一个真实故事
去年10月，我手里有个React项目要重构，2000多行的上帝类，看着就头疼。每次让Claude Code帮我优化代码，我都要重复交代一遍：
- "记得用TypeScript严格模式"
- "API调用要加错误处理"
- "组件要符合单一职责原则"
复制粘贴这些要求，少说也得两三分钟。更烦的是，聊了十几轮之后，Claude Code经常会"忘记"我最初的要求，又开始写出不符合规范的代码。
直到我在文档里翻到了Skill功能。
试了一周后，我把那些重复的要求全封装成了几个skill文件。现在只要一句@skill react-refactor，Claude Code立刻就知道该怎么做。那个2000行的类，原本估计要花三天时间重构，最后两个下午就搞定了。
Skill到底是什么
说白了，Skill就是给Claude Code装技能包。
你在.claude/skills/目录下创建一个markdown文件，把常用的提示词、工作流程、代码规范写进去。需要的时候，一句@skill 技能名就能调用。就像游戏里给角色装备不同技能，需要输出的时候装输出技能，需要坦克的时候装防御技能。
来看个最简单的例子：
1--- 2title: "React代码审查专家" 3description: "专门审查React代码的质量、性能和最佳实践" 4--- 5 6# React代码审查流程 7 8你是一位经验丰富的React代码审查专家。请按以下标准审查代码： 9 10## 审查重点 111. **组件设计** 12 - 单一职责原则 13 - Props类型定义的完整性 14 - 组件拆分的合理性 15 162. **性能优化** 17 - 不必要的重渲染 18 - useMemo/useCallback的使用 19 - 列表渲染的key值 20 213. **代码质量** 22 - TypeScript类型安全 23 - 错误边界处理 24 - 可访问性（a11y） 25 26## 输出格式 27- 问题列表（按严重程度排序） 28- 具体的代码建议 29- 优先级标注（P0/P1/P2） 30
把这个文件保存为.claude/skills/react-review.md，以后审查React代码时，直接@skill react-review就行。Claude Code会严格按照你定义的标准来审查。
为什么手写提示词撑不住了
我之前也是提示词工程师，Notion里存了几十条精心打磨的提示词模板。但用了几个月后，发现这玩法有硬伤：
重复劳动太多每次都要从Notion复制粘贴，有时候还要根据当前项目调整几个词。一天下来光是复制粘贴提示词，就要花半小时。
版本管理混乱今天用的提示词和上周的不一样，效果也不稳定。想回溯"上次那个好用的版本"？抱歉，找不到了。
团队协作是灾难我的好提示词，同事想用？手动发微信。同事改进了？又要手动同步回来。这效率跟石器时代没区别。
AI会遗忘长对话里，Claude Code很容易忘记你最初的要求。聊到第20轮，你发现它又在犯之前说过不要犯的错误。
Skill把这些问题一次性解决了：
- 版本化：用Git管理，回溯随便
- 可共享：团队仓库一拉，所有人同步
- 始终生效：不会因为对话太长而失效
我的第一个Skill：API接口生成器
那个电商项目里，后端给我扔了个100多个接口的Swagger文档。手动对接的话，一个接口要写：
- TypeScript类型定义
- axios请求函数
- 错误处理逻辑
- loading状态管理
算了一下，100个接口差不多要30个小时。
我花了1个小时，写了个api-generator的skill：
1--- 2title: "API接口代码生成器" 3description: "根据接口文档生成TS类型定义和axios封装" 4version: "1.3.0" 5--- 6 7# API代码生成专家 8 9你是一位全栈工程师，擅长前后端接口对接。你的任务是根据API文档生成高质量的TypeScript代码。 10 11## 生成内容 12 13### 1. TypeScript类型定义 14```typescript 15// 请求参数类型 16interface GetUserRequest { 17 userId: string; 18 includeDetails?: boolean; 19} 20 21// 响应数据类型 22interface GetUserResponse { 23 id: string; 24 name: string; 25 email: string; 26 createdAt: string; 27} 28
2. Axios请求函数
1import request from '@/utils/request'; 2 3export const getUserAPI = async ( 4 params: GetUserRequest 5): Promise<GetUserResponse> => { 6 try { 7 const response = await request.get<GetUserResponse>('/api/user', { params }); 8 return response.data; 9 } catch (error) { 10 console.error('获取用户信息失败:', error); 11 throw error; 12 } 13}; 14
3. React Hook封装（可选）
1export const useGetUser = (userId: string) => { 2 const [data, setData] = useState<GetUserResponse | null>(null); 3 const [loading, setLoading] = useState(false); 4 const [error, setError] = useState<Error | null>(null); 5 6 useEffect(() => { 7 const fetchData = async () => { 8 setLoading(true); 9 try { 10 const result = await getUserAPI({ userId }); 11 setData(result); 12 } catch (err) { 13 setError(err as Error); 14 } finally { 15 setLoading(false); 16 } 17 }; 18 fetchData(); 19 }, [userId]); 20 21 return { data, loading, error }; 22}; 23
代码规范
- 命名遵循驼峰命名法
- API函数以
API结尾 - Hook函数以
use开头 - 所有异步函数都要有错误处理
- 导出的类型和函数都要加JSDoc注释
输出格式
- 先输出类型定义
- 再输出API函数
- 如果是常用接口，再生成Hook封装
- 最后给出使用示例
1 2有了这个skill，对接一个接口从30分钟缩短到了5分钟。100个接口，前后只花了两天时间就全部搞定。更关键的是，团队里的新人也能用同样的规范生成代码，整个项目的代码风格高度统一。 3 4## 高级玩法：让Skill配合起来干活 5 6用熟了之后，我发现单个skill还不够。真实的开发场景往往需要多个skill配合。 7 8比如我重构老代码时的标准流程： 9 10```bash 11# 第1步：分析代码问题 12@skill code-analyzer src/legacy/UserService.ts 13 14# 第2步：制定重构方案 15@skill refactor-planner 16 17# 第3步：生成测试用例（重构前必须有测试保底） 18@skill test-generator 19 20# 第4步：执行重构 21（手动重构或让Claude Code辅助） 22 23# 第5步：最终代码审查 24@skill code-reviewer 25
这四个skill依次调用，形成了完整的重构工作流。我甚至写了个shell脚本自动执行这个流程：
1#!/bin/bash 2# refactor-workflow.sh 3 4echo "🔍 步骤1/4: 分析代码问题..." 5claude-code @skill code-analyzer $1 6 7read -p "按回车继续..." 8 9echo "📋 步骤2/4: 制定重构方案..." 10claude-code @skill refactor-planner 11 12read -p "按回车继续..." 13 14echo "🧪 步骤3/4: 生成测试用例..." 15claude-code @skill test-generator 16 17read -p "执行测试并确认通过后，按回车继续..." 18 19echo "✅ 步骤4/4: 最终代码审查..." 20claude-code @skill code-reviewer 21
用这个脚本重构过一个2000行的上帝类，拆成了7个职责清晰的小类。测试覆盖率从40%提升到85%，整个过程比想象中顺利很多。
团队共享：把Skill当作基础设施
我们团队现在把skill当作基础设施来管理。创建了一个Git仓库专门存放team-skills：
1team-skills/ 2├── frontend/ 3│ ├── react-review.md # React代码审查 4│ ├── vue-component-gen.md # Vue组件生成 5│ └── css-optimizer.md # CSS性能优化 6├── backend/ 7│ ├── api-design.md # API设计规范 8│ ├── database-review.md # 数据库审查 9│ └── security-audit.md # 安全审计 10└── common/ 11 ├── code-cleaner.md # 代码清理 12 ├── test-generator.md # 测试生成 13 └── commit-msg.md # Git提交信息生成 14
每个开发者在本地项目里软链接到这个仓库：
1# 一次性配置 2git clone [email protected]:your-team/team-skills.git ~/.team-skills 3ln -s ~/.team-skills/* .claude/skills/ 4
好处立竿见影：
- 新人友好：入职第一天就有完整的skill库，立刻就能按规范写代码
- 自动同步：团队更新skill后，所有人git pull就能获取最新版本
- 代码一致：不管谁写的代码，风格都高度统一
上个月来了个实习生，第二天就能写出符合团队规范的代码。要在以前，至少得培训一周。
Skill和CLAUDE.md是黄金搭档
Skill更强大的玩法，是配合项目根目录的CLAUDE.md一起用。
在CLAUDE.md里定义项目全局规则：
1# 项目上下文 2 3- 技术栈：React 18 + TypeScript 5.0 + Vite 4 4- 代码规范：Airbnb ESLint规则 5- 提交规范：Conventional Commits 6- 状态管理：Zustand（禁止使用Redux） 7 8## 重要约定 9- 所有组件必须有完整的TypeScript类型定义 10- API调用统一使用 src/utils/request.ts 封装 11- 组件文件名使用PascalCase（如UserProfile.tsx） 12- 工具函数文件名使用camelCase（如formatDate.ts） 13 14## 目录结构 15src/ 16├── components/ # 公共组件 17├── pages/ # 页面组件 18├── hooks/ # 自定义Hooks 19├── utils/ # 工具函数 20├── services/ # API服务 21└── stores/ # Zustand状态管理 22
然后在skill里引用这些规则：
1--- 2title: "React组件生成器" 3--- 4 5# 组件生成指令 6 7严格按照CLAUDE.md中定义的技术栈、目录结构和命名规范生成React组件。 8 9生成的组件必须： 10- 使用TypeScript 11- 符合项目的ESLint规则 12- 放在正确的目录下 13- 使用项目约定的状态管理方案 14
这样skill会自动读取CLAUDE.md的配置，生成的代码完全符合项目规范。新项目克隆下来，skill也能立刻适配。
我的5个必备Skill
用了半年，我的skills目录里积累了20多个skill。挑几个最常用的分享一下：
1. 测试用例生成器（test-gen.md）
写完功能代码后最烦的就是补测试。这个skill能分析函数逻辑，自动生成单元测试，包括边界情况和异常场景。
效果：我的测试覆盖率从40%提升到85%，节省了至少一半的测试编写时间。
2. Git提交信息生成器（commit-msg.md）
每次提交都要想commit message，挺浪费脑细胞的。这个skill分析git diff内容，自动生成符合Conventional Commits规范的提交信息。
示例输出：
1feat(user-auth): 添加OAuth2.0登录功能 2 3- 集成Google和GitHub第三方登录 4- 添加JWT token刷新机制 5- 完善用户权限校验中间件 6 7Closes #123 8
虽然只有30行代码，但这是我每天都要用的skill。累计节省的时间已经好几个小时了。
3. 代码重构助手（refactor.md）
老代码需要优化但不知从何下手时，这个skill能：
- 识别代码坏味道
- 给出重构优先级排序
- 提供step-by-step重构计划
- 保证重构前后功能一致
那个2000行的上帝类就是靠这个skill搞定的。
4. 安全审查专家（security-audit.md）
专门检查代码安全问题：
- SQL注入风险
- XSS攻击防护
- 敏感信息泄露
- 权限校验完整性
有次准备上线前用这个skill扫了一遍，发现3个潜在的安全漏洞，吓出一身冷汗。
5. 文档生成器（doc-gen.md）
项目文档总是滞后于代码？这个skill能根据代码自动生成API文档，提取函数注释生成Markdown，还能维护更新日志。
文档更新时间从2小时缩短到10分钟，而且再也不会出现"代码改了文档没改"的情况。
写好Skill的5个技巧
半年下来，我总结了几个编写skill的经验：
1. Frontmatter要认真写
虽然看起来可有可无，但title和description会显示在skill列表里：
1--- 2title: "全栈代码审查专家" 3description: "审查前后端代码，关注安全性、性能和可维护性" 4version: "2.1.0" 5tags: ["代码审查", "安全", "性能"] 6--- 7
version字段方便版本管理，tags方便分类查找。
2. 角色定义要清晰
"你是一位...专家"这种开头很有用，能让Claude Code快速进入角色：
1你是一位拥有10年经验的全栈工程师，擅长代码审查和安全审计。 2
比直接说"请审查代码"效果好很多。
3. 用对比示例说明
用✅和❌对比好坏代码，Claude Code理解起来更准确：
1### SQL注入风险 2 3❌ 危险写法： 4```javascript 5const query = [`SELECT * FROM users WHERE id = ${userId}`](https://xplanc.org/primers/document/zh/02.Python/EX.%E5%86%85%E5%BB%BA%E5%87%BD%E6%95%B0/EX.id.md); 6
✅ 安全写法：
1const query = 'SELECT * FROM users WHERE id = ?'; 2db.query(query, [userId]); 3
1 2### 4. 输出格式要具体 3 4别说"请给出建议"，要说"按以下格式输出"： 5 6```markdown 7## 输出格式 8 9### 🔴 严重问题（必须修复） 10- [文件名:行号] 问题描述 11- 风险说明 12- 修复建议（附代码示例） 13 14### 🟡 建议改进（推荐优化） 15- [文件名:行号] 问题描述 16- 改进理由 17- 优化方案 18
5. 加上错误处理规则
告诉AI遇到问题怎么办：
1## 错误处理 2 3如果遇到以下情况： 4- 代码语法错误：先指出错误位置，不继续审查 5- 文件无法访问：提示用户检查路径 6- 代码量过大（>5000行）：建议分批审查 7
常见问题
Skill太多记不住名字？
用好命名规范：
review-*: 代码审查类gen-*: 代码生成类util-*: 工具类fix-*: 问题修复类
我的命名：review-frontend.md、gen-api.md、util-commit.md
Skill输出太长看不完？
在skill里加上简洁模式：
1默认使用详细模式。如果用户添加`--brief`参数，输出简洁版： 2- 问题清单（一行一个） 3- 严重程度标注 4- 关键修复建议 5
Skill在不同项目中表现不一致？
让skill主动请求上下文：
1## 分析前置步骤 2 3开始前请先： 41. 读取package.json了解依赖版本 52. 检查tsconfig.json了解TS配置 63. 查看.eslintrc了解代码规范 74. 浏览README.md了解项目架构 8
最后说两句
用了半年的skill功能，我的开发效率至少提升了40%。更重要的是，很多重复性的脑力劳动被解放出来了，我可以把时间花在真正需要思考的架构设计和业务逻辑上。
如果你现在还在手写提示词，建议你：
- 今天就开始：从一个简单的skill开始，比如代码审查或测试生成
- 逐步完善：每次用完后反思哪里可以改进，更新版本
- 团队共享：好的skill就像好的工具库，要分享出去
- 持续学习：关注官方文档更新，新功能可能会改变写法
最后分享一个心得：Skill的价值不在于有多复杂，而在于解决真实问题。我那个最简单的commit-msg生成器只有30行，但每天都在用，累计节省的时间已经好几个小时了。
从现在开始，试着把你每天重复输入的提示词整理成skill吧。三个月后，你会感谢今天的自己。
相关资源
本文首发自个人博客
《把常用 Prompt 做成 Skill 之后，我和 Claude Code 的配合效率直接翻了 3 倍》 是转载文章，点击查看原文。
