您請 Claude Code 在瀏覽器裡做一款西洋棋遊戲。打開頁面，棋盤和棋子都在，兵也乖乖跟著滑鼠移動。看起來可以玩了。但您試著把兵往前拖三格，它竟然就停在那裡。接著您又試著讓黑方連走兩步，頁面還是沒有阻止。
在這兩步之前，專案看起來幾乎已經完成。現在才發現，最重要的部分根本還沒做好：沒有人檢查棋規。您可以請代理禁止兵這樣走，但接下來還得處理輪流走棋、將軍、王車易位、兵的升變。每修好一項，又會冒出一個問題：還漏了哪條規則？
這時不妨先停下來，找找有沒有現成的程式碼能處理這件事。chess.js 函式庫已經實作了西洋棋規則。您可以把一步棋交給它檢查，再取得檢查結果。自己的程式碼只要負責串起幾個步驟：取得棋盤上的操作、交給函式庫驗證，然後顯示正確的棋子位置。
接下來要把函式庫載入瀏覽器，讓頁面可以使用它。其中一種方式是透過 CDN 連結載入。下文會說明這個流程，以及為什麼程式碼裡多了一個連結，不代表兵就不會再亂走了。
函式庫負責什麼
函式庫是您接入專案的現成程式碼，讓您不必重新實作已經有人寫好的功能。chess.js 就是這樣的例子：它知道每種棋子的走法、將軍和王車易位的規則，能列出目前局面下所有合法走法，也能判斷棋局是否結束。
這裡很容易踩進一個陷阱：接入函式庫，就以為遊戲會自動運作。其實不會。函式庫只在記憶體中保存棋規和棋局狀態，不會繪製任何畫面，甚至不知道頁面上有個棋盤。
| 元件 | 負責什麼 | 缺少時會怎樣 |
|---|---|---|
函式庫 chess.js | 棋規和目前棋局：可走哪些步、輪到哪一方、棋局是否結束 | 沒有人檢查走法，棋盤上什麼步都能走 |
| 頁面介面 | 棋盤、棋子、拖曳操作、格子標示 | 有規則卻無法操作，遊戲也就無從玩起 |
| 串接程式碼 | 把走法傳給函式庫，再根據回傳結果重繪棋盤 | 規則和畫面各自運作，彼此毫無影響 |
看看正常走棋時會發生什麼。您把兵從 e2 一口氣拖到 e5。介面偵測到拖曳操作後，串接程式碼會詢問函式庫："這步棋合法嗎？"函式庫回答"不合法"，串接程式碼便把棋子移回 e2。如果沒有人提出這個問題，兵就會直接停在 e5，頁面也完全不會阻止它。
兩條分支最後都會執行同一個動作：串接程式碼把函式庫中的棋局顯示出來。合法走法會產生新局面，不合法走法則維持原狀，因此棋子會回到原本的位置。
因此，交代任務時要說清楚整個串接流程。只說"接入 chess.js"的話，代理照字面就能完成：加上一行載入程式碼，然後就結束了。您應該要求它把流程接起來：將棋盤上的走法交給函式庫檢查，由函式庫的回應決定是否移動棋子，並依函式庫的狀態更新棋局，而不是照您放開滑鼠的位置顯示。
兩者都會被"接入"，所以很容易混淆。Skill 會改變代理本身的行為：擴充它的指示，替它增加能力。函式庫則完全不涉及代理，而是您應用程式裡的程式碼，會在使用者的瀏覽器中執行。代理可以幫您接入函式庫，但之後即使沒有代理，它仍會照常運作。
瀏覽器如何透過 CDN 取得程式碼
函式庫的檔案得先有來源。您可以下載檔案，放在網頁旁邊；也可以在頁面程式碼裡指定外部服務上的檔案連結。常見的做法是使用 CDN（Content Delivery Network，內容傳遞網路）。它由多台伺服器組成，能從不同地點將檔案傳送給使用者。圖片、樣式表和 JavaScript 函式庫都常透過 CDN 傳送。這個例子中的函式庫檔案由 jsDelivr 提供。
您打開頁面時，瀏覽器會讀取頁面程式碼，並找到函式庫的連結。它會向該網址請求檔案、下載檔案，接著執行使用函式庫的頁面程式碼。函式庫是在使用者的瀏覽器中執行。CDN 負責傳送程式碼，棋步檢查則在您的裝置上進行。
圖中的框線將瀏覽器和外部服務區隔開來。函式庫載入後就在頁面裡，串接程式碼也會在同一處呼叫它。每一步棋都不必傳送到 CDN。
chess.js 的接入方式如下：
<script type="module">
import { Chess } from 'https://cdn.jsdelivr.net/npm/chess.js@1.4.0/+esm'
const chess = new Chess()
console.log(chess.fen())
// rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1
</script>這裡有三個重點。第一個是 type="module"。函式庫以 ES 模組形式提供，只能透過 import 取得其中的 Chess；一般的 <script src="..."> 標籤無法解析同一個檔案，會因為裡面的 export 而出錯。有些函式庫也提供較舊的非模組建置，只要一般的 script 標籤就夠了，頁面也會自動出現全域變數。chess.js 沒有這種建置，所以只能用這一種方式。
第二個重點是網址中明確指定的版本號：chess.js@1.4.0。接入方式和方法名稱都要依照連結中指定版本的文件。網址若沒有版本號，遲早會指向另一個檔案，依照舊文件撰寫的程式碼就會無法運作。
第三個重點最容易被忽略：網址結尾的 /+esm。這不是裝飾，而是要求 CDN 將檔案整理成模組格式；少了它，同一個網址會傳回另一種建置，讓 import 找不到任何內容。
不必把整個遊戲做完，也能確認函式庫是否真的載入成功。在同一個 <script type="module"> 裡加上幾行程式碼，然後開啟瀏覽器的開發人員工具（Console 分頁，按 F12 或 Ctrl+Shift+I）：
// 白方的兵不能從 e2 一步走到 e5
try {
chess.move('e5')
} catch (error) {
console.log('走法遭到拒絕：', error.message) // Invalid move: e5
}
chess.move('e4') // 函式庫會接受這一步
console.log(chess.turn()) // b, 黑方的回合如果 Console 顯示初始局面、不合法的走法遭到拒絕，而且 e4 之後輪到黑方，就表示檔案已載入，棋規也正常運作。接下來只要把這些規則和棋盤串起來。
還有一點要先說清楚，才不會誤以為 CDN 解決了所有問題。它仍然需要網路連線。瀏覽器可能會重複使用快取中的檔案，也就是先前儲存的副本，因此不一定每次開啟頁面都要重新下載。但如果沒有可用的副本，而且 CDN 無法連線，函式庫就載入不了，遊戲也無法套用其中的規則。
這一步的錯誤幾乎總是出在函式庫的接入方式：網址、版本或匯入格式不對。別隨便改那一行，請代理幫您核對，找出不一致的地方。簡單檢查一下，就不用花半小時逐一試錯了。
如何搭配 Claude Code 使用
只說"透過 CDN 接入函式庫"，會讓代理自行決定好幾件事：從哪裡取得檔案、選哪個版本、如何在這個頁面載入，以及用什麼方式確認結果。不如直接在任務指示中說清楚。以下是幾種情境的 prompt，不必每一個都照著送出。
選擇接入連結
如果代理建議使用某個函式庫，先請它確認如何在您的專案中接入。這樣您就能拿到明確的網址，也會知道網址的來源。
檢查我的頁面如何運作，以及是否已經接入 chess.js。
查看函式庫和 jsDelivr 的文件，找出適用於瀏覽器的 CDN 載入方式。
提出一個指定版本的 URL，並解釋網址各部分的用途。
附上文件連結。先不要修改程式碼。
如果無法查證文件，請直接告訴我。請留意回覆中的版本號、接入方式和選擇理由。只說"這個連結能用"並不足夠，您無從判斷代理是否對照過文件，也不知道檔案是否適用於您的頁面。
讓函式庫連上棋盤
選好網址後，交代代理一項能看見成果的任務。如果是簡單的 HTML 頁面，也可以順便說明要保留目前的啟動方式。
透過選定的 CDN 網址接入固定版本的 chess.js。
保留目前的頁面啟動方式。讓函式庫和棋盤串接起來：
將每一步棋交給函式庫檢查，並顯示函式庫狀態中的棋局。
遇到不合法的走法時，把棋子移回原本的格子。
指出接入程式碼的位置，以及處理函式庫回應的地方。這裡有兩個不同的成果：瀏覽器載入了函式庫，而棋盤上的操作也開始依照函式庫的規則進行。請代理指出這兩處程式碼，您就能看清楚它具體新增了什麼。
在瀏覽器中檢查結果
HTML 裡有連結，只能證明檔案經過修改。接下來的任務可以確認函式庫是否真的載入，以及遊戲是否正常運作。
開啟頁面，在開發人員工具的 Network 分頁檢查 chess.js 是否載入。
查看 Console 中是否有錯誤。接著從初始局面試走 e2-e5：
這步棋應該被拒絕，兵仍留在 e2。然後走 e2-e4：
這步應該成功，並輪到黑方。
回報每個步驟中觀察到的結果。如果您無法存取瀏覽器，
請提供簡短的檢查步驟，並說明您沒有親自檢查。Network 分頁會顯示頁面的網路請求；Console 則會顯示程式碼訊息和錯誤。如果檔案已載入，但兵仍然能走到 e5，就該檢查走法的處理邏輯。光是更換 CDN 連結，並不能修好這個串接問題。
找出載入錯誤的原因
發生錯誤時，請把 Console 中的完整錯誤訊息，以及 Network 裡失敗請求的網址交給代理。這樣它就能檢查實際原因，而不是逐一試不同連結。
接入函式庫後，頁面出現錯誤。
Console 訊息：[在此貼上完整訊息]。
Network 中的請求網址和結果：[在此貼上網址和狀態]。
檢查檔案是否可存取、格式是否符合目前的匯入方式，
以及程式碼中的名稱是否和所選版本的文件一致。
先根據這些資料指出原因，再做最小幅度的修改並重新檢查。
不要同時更換 CDN、版本和遊戲程式碼。請用自己的資料取代方括號中的文字。如果 Network 中完全沒有函式庫請求，也請直接說明，這同樣是有用的線索。修正後，再檢查那兩步棋，確認整個串接流程都正常運作。
處理 CDN 無法連線的情況
如果函式庫載入失敗，但棋盤看起來仍可操作，使用者可能會誤以為遊戲能正常進行。請代理清楚呈現這種狀態，避免造成誤解。
處理 chess.js 無法從 CDN 載入的情況。
函式庫尚未就緒前，不要允許走棋。發生錯誤時，顯示
清楚易懂的訊息，並提供重新載入頁面的方式。
先檢查 CDN 請求遭到封鎖時的行為，再解除封鎖後重新檢查。
請考慮快取：單純中斷網路，可能仍會使用先前載入的副本。
說明您如何測試這個失敗情境。這類檢查最好和一般棋局分開進行。最後應該能明確看出兩種狀態：函式庫可用，走法會經過檢查；載入失敗時，頁面會說明為什麼目前無法走棋。
GO TO FULL VERSION