共计 3345 个字符，预计需要花费 9 分钟才能阅读完成。
文章目录[显示]
Claude Code 从入门到脱发 · Day 8
到目前为止，我们学了怎么跟 Claude Code 对话、怎么给它立规矩、怎么管理权限、怎么用 Hooks 和 MCP。但有个问题：很多操作你会反复做。
每次修完 bug 都要跑测试、检查 lint、提交 Git。每次写新组件都要创建文件、写模板代码、加路由、写测试。每次做代码审查都要检查安全性、性能、风格 ……
把这些重复流程封装成 Skills，一条命令搞定。
本文你将学到：
- Skills 是什么，跟 CLAUDE.md 有什么区别
- 如何创建自定义 Skill
- Skill 的自动触发机制
- 常用 Skill 模板
阅读时间 ：8 分钟 | 实操时间 ：20 分钟 | 难度：中高级
Skills 是什么
Skills 是可复用的指令模板，存储在 .claude/skills/ 目录下。你可以把它理解为 Claude Code 的 " 技能包 "。
跟 CLAUDE.md 的区别：
| 特性 | CLAUDE.md | Skills |
|---|---|---|
| 加载时机 | 每次对话自动加载 | 手动调用或自动匹配时加载 |
| 内容 | 规范和约定 | 具体的工作流程和操作指令 |
| 类比 | 员工手册 | 标准操作手册（SOP） |
CLAUDE.md 告诉 Claude Code" 你应该遵守什么规矩 "，Skills 告诉它 " 这件事该怎么做 "。
创建你的第一个 Skill
目录结构
.claude/
skills/
fix-bug/
SKILL.md
new-component/
SKILL.md
code-review/
SKILL.md每个 Skill 是一个目录，里面有一个 SKILL.md 文件。
Skill 文件格式
---
name: fix-bug
description: 修复 Bug 的标准流程
invocation: user
---
## 修复 Bug 标准流程
按以下步骤执行：1. 分析用户描述的问题
2. 在代码中定位相关文件
3. 写一个能复现 bug 的失败测试
4. 运行测试确认它失败
5. 修复代码
6. 运行测试确认通过
7. 运行完整测试套件确认没有引入新问题
8. 输出修复摘要frontmatter 中的字段：
name：Skill 名称，也是斜杠命令的名字description：描述，用于自动匹配invocation：user（需要手动调用）或auto（Claude Code 自动判断是否使用）
使用 Skill
> /fix-bug 用户反馈登录后头像不显示Claude Code 会按照 SKILL.md 里定义的流程一步步执行。
实用 Skill 模板
新建组件 Skill
---
name: new-component
description: 创建新的 React 组件
invocation: user
---
## 创建 React 组件
参数：$ARGUMENTS（组件名和功能描述）执行步骤：1. 根据描述确定组件名、文件位置、所需 props
2. 创建组件文件 `src/components/{name}/{name}.tsx`
3. 创建样式模块 `src/components/{name}/{name}.module.css`（如需要）4. 创建测试文件 `src/components/{name}/{name}.test.tsx`
5. 在测试文件中写基本的渲染测试和快照测试
6. 运行测试确认通过
7. 如果需要导出，更新 `src/components/index.ts`
代码风格要求：- 使用函数式组件 + TypeScript
- Props 定义为 interface
- 导出为命名导出（非默认导出）使用：
> /new-component UserAvatar 一个圆形的用户头像组件，支持不同尺寸和在线状态显示部署检查 Skill
---
name: deploy-check
description: 部署前的完整检查清单
invocation: user
---
## 部署前检查
按顺序执行以下检查，每一项标注通过 / 失败：1. 运行完整测试套件：`npm test`
2. 运行 lint 检查：`npm run lint`
3. 运行类型检查：`npx tsc --noEmit`
4. 运行构建：`npm run build`
5. 检查是否有 console.log 残留
6. 检查是否有硬编码的密钥或密码
7. 检查 Git 状态，是否有未提交的改动
8. 查看最近 5 个 commit 的改动摘要
输出格式：每项检查结果列表，标注 PASS / FAIL
如果有 FAIL 项，给出修复建议Git 提交 Skill
---
name: commit
description: 标准化 Git 提交流程
invocation: user
---
## Git 提交流程
1. 运行 `git status` 查看改动
2. 运行 `git diff` 分析改动内容
3. 根据改动内容生成符合规范的 commit message：- 格式：类型(范围): 描述
- 类型：feat/fix/refactor/docs/test/chore
- 使用中文
4. 展示 commit message 等用户确认
5. 确认后执行 `git add` 和 `git commit`
6. 运行 `git status` 验证提交成功自动触发的 Skill
将 invocation 设置为 auto，Claude Code 会根据任务描述自动判断是否加载这个 Skill。
---
name: security-check
description: 检查代码中的安全问题，如硬编码密钥、SQL 注入、XSS
invocation: auto
---
当检测到代码中可能存在安全问题时，自动执行以下检查：...当用户说 " 帮我审查一下这个文件的安全性 " 时，Claude Code 会自动加载这个 Skill。
不建议滥用 auto 模式。太多自动 Skill 会增加每次对话的隐性开销。只把真正需要自动触发的核心流程设为 auto。
Skill 里引用子代理
Skill 可以跟子代理配合。在 Skill 里指示 Claude Code 启动子代理执行部分步骤：
---
name: full-review
description: 全方位代码审查
invocation: user
---
## 全方位代码审查
并行启动三个子代理：1. 安全审查子代理：检查注入、XSS、密钥泄露、权限问题
2. 性能审查子代理：检查 N+1 查询、不必要的渲染、内存泄漏
3. 风格审查子代理：检查命名规范、函数长度、文件结构
等待三个子代理都完成后，汇总所有发现，按严重程度排序输出。这就是 Skill + 子代理的组合拳——一条命令触发一个完整的多角度审查流程。
从 Slash Commands 到 Skills
如果你之前用过 Claude Code 的旧版 slash commands（.claude/commands/ 目录），不用担心，它们仍然兼容。但官方推荐迁移到 Skills 系统：
旧版：.claude/commands/review.md --> /review
新版：.claude/skills/review/SKILL.md --> /review功能完全一样，Skills 多了 frontmatter 配置（auto 触发、description 等）。
常见问题 Q&A
Q1：Skill 的 $ARGUMENTS 是什么？
$ARGUMENTS 是用户在调用 Skill 时传入的参数。比如 /fix-bug 登录后头像不显示，那 $ARGUMENTS 就是 " 登录后头像不显示 "。
Q2：Skill 之间能互相调用吗？
不能直接互相调用，但你可以在一个 Skill 的指令里引导 Claude Code 使用另一个 Skill 的逻辑。实际操作中，更常见的做法是在 Skill 里组合子代理。
Q3：社区有现成的 Skill 可以用吗？
有。GitHub 上有 awesome-claude-code 仓库，收录了大量社区贡献的 Skills。你可以直接复制到自己的项目里，根据需要调整。
小结
今天学了 Skills 和自定义 Agents：
- Skills 是可复用的工作流模板，放在
.claude/skills/目录 - 支持手动调用（
/skill-name）和自动触发（invocation: auto） - 可以跟子代理配合，实现复杂的多步骤流程
- 把重复的操作封装成 Skill，一条命令搞定
到这里，Claude Code 的核心能力你已经掌握得差不多了：基础对话、规范配置、权限管理、Hooks、MCP、子代理、Skills。
接下来该动真格了。
明天 Day 9，我们做一个完整的实战项目——用 Claude Code 从零搭建一个全栈应用，把前面学的十八般武艺全部用上。
系列进度：8/10
