Day 8 Skills和Agents打造你的 AI 军火库

guozi

Claude Code 从入门到脱发 · Day 8

到目前为止，我们学了怎么跟 Claude Code 对话、怎么给它立规矩、怎么管理权限、怎么用 Hooks 和 MCP。但有个问题：很多操作你会反复做。

每次修完 bug 都要跑测试、检查 lint、提交 Git。每次写新组件都要创建文件、写模板代码、加路由、写测试。每次做代码审查都要检查安全性、性能、风格......

把这些重复流程封装成 Skills，一条命令搞定。

本文你将学到：

Skills 是什么，跟 CLAUDE.md 有什么区别

如何创建自定义 Skill

Skill 的自动触发机制

常用 Skill 模板

阅读时间：8 分钟 | 实操时间：20 分钟 | 难度：中高级

━━━━━━━━━━━━━━━━━━━━

Skills 是什么

Skills 是可复用的指令模板，存储在

1. .claude/skills/

复制代码

目录下。你可以把它理解为 Claude Code 的"技能包"。

跟 CLAUDE.md 的区别：

| 特性 | CLAUDE.md | Skills |
|------|-----------|--------|
| 加载时机 | 每次对话自动加载 | 手动调用或自动匹配时加载 |
| 内容 | 规范和约定 | 具体的工作流程和操作指令 |
| 类比 | 员工手册 | 标准操作手册（SOP） |

CLAUDE.md 告诉 Claude Code"你应该遵守什么规矩"，Skills 告诉它"这件事该怎么做"。

━━━━━━━━━━━━━━━━━━━━

创建你的第一个 Skill

目录结构

1. .claude/
2.   skills/
3.     fix-bug/
4.       SKILL.md
5.     new-component/
6.       SKILL.md
7.     code-review/
8.       SKILL.md

复制代码

每个 Skill 是一个目录，里面有一个

1. SKILL.md

复制代码

文件。

Skill 文件格式

1. ---
2. name: fix-bug
3. description: 修复 Bug 的标准流程
4. invocation: user
5. ---
7. ## 修复 Bug 标准流程
9. 按以下步骤执行：
11. 1. 分析用户描述的问题
12. 2. 在代码中定位相关文件
13. 3. 写一个能复现 bug 的失败测试
14. 4. 运行测试确认它失败
15. 5. 修复代码
16. 6. 运行测试确认通过
17. 7. 运行完整测试套件确认没有引入新问题
18. 8. 输出修复摘要

复制代码

frontmatter 中的字段：

1. name

复制代码

：Skill 名称，也是斜杠命令的名字

1. description

复制代码

：描述，用于自动匹配

1. invocation

复制代码

：

1. user

复制代码

（需要手动调用）或

1. auto

复制代码

（Claude Code 自动判断是否使用）

使用 Skill

1. > /fix-bug 用户反馈登录后头像不显示

复制代码

Claude Code 会按照 SKILL.md 里定义的流程一步步执行。

━━━━━━━━━━━━━━━━━━━━

实用 Skill 模板

新建组件 Skill

1. ---
2. name: new-component
3. description: 创建新的 React 组件
4. invocation: user
5. ---
7. ## 创建 React 组件
9. 参数：$ARGUMENTS（组件名和功能描述）
11. 执行步骤：
13. 1. 根据描述确定组件名、文件位置、所需 props
14. 2. 创建组件文件 `src/components/{name}/{name}.tsx`
15. 3. 创建样式模块 `src/components/{name}/{name}.module.css`（如需要）
16. 4. 创建测试文件 `src/components/{name}/{name}.test.tsx`
17. 5. 在测试文件中写基本的渲染测试和快照测试
18. 6. 运行测试确认通过
19. 7. 如果需要导出，更新 `src/components/index.ts`
21. 代码风格要求：
22. - 使用函数式组件 + TypeScript
23. - Props 定义为 interface
24. - 导出为命名导出（非默认导出）

复制代码

使用：

1. > /new-component UserAvatar 一个圆形的用户头像组件，支持不同尺寸和在线状态显示

复制代码

部署检查 Skill

1. ---
2. name: deploy-check
3. description: 部署前的完整检查清单
4. invocation: user
5. ---
7. ## 部署前检查
9. 按顺序执行以下检查，每一项标注通过/失败：
11. 1. 运行完整测试套件：`npm test`
12. 2. 运行 lint 检查：`npm run lint`
13. 3. 运行类型检查：`npx tsc --noEmit`
14. 4. 运行构建：`npm run build`
15. 5. 检查是否有 console.log 残留
16. 6. 检查是否有硬编码的密钥或密码
17. 7. 检查 Git 状态，是否有未提交的改动
18. 8. 查看最近 5 个 commit 的改动摘要
20. 输出格式：
21. 每项检查结果列表，标注 PASS / FAIL
22. 如果有 FAIL 项，给出修复建议

复制代码

Git 提交 Skill

1. ---
2. name: commit
3. description: 标准化 Git 提交流程
4. invocation: user
5. ---
7. ## Git 提交流程
9. 1. 运行 `git status` 查看改动
10. 2. 运行 `git diff` 分析改动内容
11. 3. 根据改动内容生成符合规范的 commit message：
12.    - 格式：类型(范围): 描述
13.    - 类型：feat/fix/refactor/docs/test/chore
14.    - 使用中文
15. 4. 展示 commit message 等用户确认
16. 5. 确认后执行 `git add` 和 `git commit`
17. 6. 运行 `git status` 验证提交成功

复制代码

━━━━━━━━━━━━━━━━━━━━

自动触发的 Skill

将

1. invocation

复制代码

设置为

1. auto

复制代码

，Claude Code 会根据任务描述自动判断是否加载这个 Skill。

1. ---
2. name: security-check
3. description: 检查代码中的安全问题，如硬编码密钥、SQL注入、XSS
4. invocation: auto
5. ---
7. 当检测到代码中可能存在安全问题时，自动执行以下检查：
8. ...

复制代码

当用户说"帮我审查一下这个文件的安全性"时，Claude Code 会自动加载这个 Skill。

不建议滥用 auto 模式。太多自动 Skill 会增加每次对话的隐性开销。只把真正需要自动触发的核心流程设为 auto。

━━━━━━━━━━━━━━━━━━━━

Skill 里引用子代理

Skill 可以跟子代理配合。在 Skill 里指示 Claude Code 启动子代理执行部分步骤：

1. ---
2. name: full-review
3. description: 全方位代码审查
4. invocation: user
5. ---
7. ## 全方位代码审查
9. 并行启动三个子代理：
11. 1. 安全审查子代理：检查注入、XSS、密钥泄露、权限问题
12. 2. 性能审查子代理：检查 N+1 查询、不必要的渲染、内存泄漏
13. 3. 风格审查子代理：检查命名规范、函数长度、文件结构
15. 等待三个子代理都完成后，汇总所有发现，按严重程度排序输出。

复制代码

这就是 Skill + 子代理的组合拳——一条命令触发一个完整的多角度审查流程。

━━━━━━━━━━━━━━━━━━━━

从 Slash Commands 到 Skills

如果你之前用过 Claude Code 的旧版 slash commands（

1. .claude/commands/

复制代码

目录），不用担心，它们仍然兼容。但官方推荐迁移到 Skills 系统：

1. 旧版：.claude/commands/review.md  -->  /review
2. 新版：.claude/skills/review/SKILL.md  -->  /review

复制代码

功能完全一样，Skills 多了 frontmatter 配置（auto 触发、description 等）。

━━━━━━━━━━━━━━━━━━━━

常见问题 Q&A

Q1：Skill 的 $ARGUMENTS 是什么？

1. $ARGUMENTS

复制代码

是用户在调用 Skill 时传入的参数。比如

1. /fix-bug 登录后头像不显示

复制代码

，那

1. $ARGUMENTS

复制代码

就是"登录后头像不显示"。

Q2：Skill 之间能互相调用吗？

不能直接互相调用，但你可以在一个 Skill 的指令里引导 Claude Code 使用另一个 Skill 的逻辑。实际操作中，更常见的做法是在 Skill 里组合子代理。

Q3：社区有现成的 Skill 可以用吗？

有。GitHub 上有 awesome-claude-code 仓库，收录了大量社区贡献的 Skills。你可以直接复制到自己的项目里，根据需要调整。

━━━━━━━━━━━━━━━━━━━━

小结

今天学了 Skills 和自定义 Agents：

Skills 是可复用的工作流模板，放在

1. .claude/skills/

复制代码

目录

支持手动调用（

1. /skill-name

复制代码

）和自动触发（

1. invocation: auto

复制代码

）

可以跟子代理配合，实现复杂的多步骤流程

把重复的操作封装成 Skill，一条命令搞定

到这里，Claude Code 的核心能力你已经掌握得差不多了：基础对话、规范配置、权限管理、Hooks、MCP、子代理、Skills。

接下来该动真格了。

明天 Day 9，我们做一个完整的实战项目——用 Claude Code 从零搭建一个全栈应用，把前面学的十八般武艺全部用上。

━━━━━━━━━━━━━━━━━━━━

系列进度：8/10