安装 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+ 框架支持）