安裝 Agent Skills
學完你能做什麼
- 用一條命令快速安裝 Agent Skills（推薦）
- 手動將技能複製到 Claude Code 的本機目錄
- 在 claude.ai 中啟用技能並配置網路權限
- 排查安裝時的常見錯誤
你現在的困境
你想用 Agent Skills 讓 Claude 幫你部署專案、審查程式碼，但不知道怎麼安裝到 Claude Code 或 claude.ai。或者你嘗試了安裝，但技能沒有啟用，部署時提示"Network Egress Error"。
什麼時候用這一招
- ✓ 第一次使用 Agent Skills
- ✓ 你使用 Claude Code（終端機命令列工具）
- ✓ 你使用 claude.ai（網頁版 Claude）
- ✓ 你需要讓技能能存取網路（部署功能）
🎒 開始前的準備
在開始之前，確認你已經：
- [ ] 安裝了 Node.js 20+ 版本
- [ ] 有一個正在使用的 Claude Code 或 claude.ai 帳戶
提示
如果你還不了解 Agent Skills 是什麼，建議先閱讀 Agent Skills 入門。
核心思路
Agent Skills 的安裝有兩種方式：
- npx 安裝（推薦）：一鍵安裝到 Claude Code，自動化完成所有步驟
- 手動安裝：複製檔案到指定目錄，適用於 claude.ai 或需要自訂安裝位置
安裝後，技能會自動在 Claude 啟用——你只要觸發關鍵詞（如"Deploy my app"），Claude 就會自動呼叫對應的技能。
方式一：npx 快速安裝（推薦）
這是最簡單的安裝方式，適合 Claude Code 使用者。
第 1 步：執行安裝命令
在終端機中執行：
npx add-skill vercel-labs/agent-skills為什麼add-skill 是一個 npm 套件，它會自動下載 Agent Skills 並安裝到正確的目錄。
你應該看到：
Skills successfully installed.第 2 步：驗證安裝
在 Claude Code 中，輸入：
List available skills你應該看到： Claude 返回的技能列表中包含：
react-best-practicesweb-design-guidelinesvercel-deploy
檢查點 ✅：如果看到這 3 個技能，說明安裝成功。
方式二：手動安裝到 Claude Code
如果你不想用 npx，或者需要控制安裝位置，可以用手動安裝。
第 1 步：複製或下載專案
git clone https://github.com/vercel-labs/agent-skills.git
cd agent-skills為什麼 手動安裝需要先取得專案原始碼。
第 2 步：複製技能到 Claude Code 目錄
cp -r skills/react-best-practices ~/.claude/skills/
cp -r skills/web-design-guidelines ~/.claude/skills/
cp -r skills/claude.ai/vercel-deploy-claimable ~/.claude/skills/vercel-deploy為什麼 Claude Code 的技能儲存在 ~/.claude/skills/ 目錄下。複製後 Claude 就能識別這些技能。
你應該看到： 命令執行完成後，沒有錯誤輸出。
檢查點 ✅： 用 ls ~/.claude/skills/ 查看，應該能看到 3 個技能目錄：react-best-practices、web-design-guidelines、vercel-deploy。
第 3 步：重新啟動 Claude Code
強制結束 Claude Code，然後重新開啟。
為什麼 Claude Code 只在啟動時載入技能列表，需要重新啟動才能識別新安裝的技能。
方式三：在 claude.ai 中使用技能
如果你使用 claude.ai（網頁版 Claude），安裝方式不同。
方法 3.1：新增到專案知識庫
第 1 步：選擇技能檔案
將 skills/react-best-practices、skills/web-design-guidelines、skills/claude.ai/vercel-deploy-claimable 這三個目錄下的所有檔案打包。
為什麼 claude.ai 需要將技能檔案作為"知識庫"新增到專案中。
第 2 步：上傳到專案
在 claude.ai 中：
- 新增或開啟一個專案
- 點擊"Knowledge" → "Add Files"
- 上傳技能檔案（或整個目錄）
你應該看到： 知識庫中顯示了專案的檔案列表。
方法 3.2：貼上 SKILL.md 內容
如果不想上傳整個目錄，可以直接複製 SKILL.md 的內容。
第 1 步：複製技能定義
開啟 skills/react-best-practices/SKILL.md，複製全部內容。
為什麼SKILL.md 包含了技能的完整定義，Claude 會根據這個檔案理解技能的功能。
第 2 步：貼上到對話
在 claude.ai 對話中貼上 SKILL.md 的內容，或者新增到專案的"Instructions"中。
你應該看到： Claude 確認接收了技能定義。
配置網路權限（重要）
如果你使用 vercel-deploy 技能部署專案，需要配置網路權限。
重要
vercel-deploy 技能需要存取 *.vercel.com 網域才能上傳部署。跳過這一步會導致部署失敗！
第 1 步：開啟 Claude 能力設定
在瀏覽器中存取：
https://claude.ai/settings/capabilities為什麼 這裡控制 Claude 能存取的網域列表。
第 2 步：新增 Vercel 網域
點擊"Add domain"，輸入：
*.vercel.com點擊"Save"儲存。
你應該看到： 網域列表中出現了 *.vercel.com。
檢查點 ✅：網域已新增，技能現在可以存取網路了。
踩坑提醒
問題 1：技能沒有啟用
現象：你輸入"Deploy my app"，但 Claude 不知道該怎麼做。
可能原因：
- Claude Code 沒有重新啟動（手動安裝時）
- claude.ai 的專案知識庫沒有正確載入技能
解決方法：
- Claude Code：重新啟動應用程式
- claude.ai：確認技能檔案已上傳到專案的 Knowledge
問題 2：部署失敗（Network Egress Error）
現象：
Deployment failed due to network restrictions解決方法： 檢查是否已新增 *.vercel.com 到網路權限：
存取 https://claude.ai/settings/capabilities
查看是否包含 *.vercel.com問題 3：找不到 ~/.claude/skills/ 目錄
現象：手動安裝時提示目錄不存在。
解決方法：
mkdir -p ~/.claude/skills/問題 4：npx 安裝失敗
現象：
npx: command not found解決方法：
# 確認 Node.js 和 npm 已安裝
node -v
npm -v
# 如果沒安裝，從 https://nodejs.org/ 安裝 LTS 版本本課小結
本課介紹了三種安裝 Agent Skills 的方式：
- npx 快速安裝：推薦用於 Claude Code，一鍵完成
- 手動安裝：複製檔案到
~/.claude/skills/，適用於需要控制安裝位置 - claude.ai 安裝：上傳檔案到專案知識庫或貼上
SKILL.md
如果你使用 vercel-deploy 技能，別忘了在 https://claude.ai/settings/capabilities 新增 *.vercel.com 網路權限。
安裝完成後，你就可以讓 Claude 自動使用這些技能進行程式碼審查、可訪問性檢查和專案部署了。
下一課預告
下一課我們學習 React/Next.js 效能優化最佳實踐。
你會學到：
- 如何使用 57 條 React 效能優化規則
- 消除瀑布、優化打包大小、減少 Re-render
- 讓 AI 自動審查程式碼並給出修復建議
附錄：源碼參考
點擊展開查看源碼位置
更新時間：2026-01-25
| 功能 | 檔案路徑 | 行號 |
|---|---|---|
| npx 安裝方法 | README.md:83-86 | 83-86 |
| Claude Code 手動安裝 | AGENTS.md:98-105 | 98-105 |
| claude.ai 安裝方法 | AGENTS.md:106-109 | 106-109 |
| 網路權限配置 | skills/claude.ai/vercel-deploy-claimable/SKILL.md:104-112 | 104-112 |
關鍵技能包：
react-best-practices：57 條 React 效能優化規則（實際規則檔案數量）web-design-guidelines：100+ 條 Web 設計指南規則vercel-deploy：一鍵部署到 Vercel（40+ 框架支援）