Claude Code 的 Skills 彻底火了新手也能看懂的 AI Agent 技能扩展实战教程摘要最近 AI 编程圈里Claude Code 的热度非常高而其中一个非常值得关注的能力就是Skills。简单来说Skills 就像是给 Claude Code 安装“专业技能包”你可以把一套固定的开发流程、代码规范、项目规则、审查清单、部署步骤封装成一个 Skill让 Claude Code 在需要时自动调用或者通过命令手动触发。本文面向新手从 0 开始讲清楚Claude Code Skills 是什么Skills 和普通提示词有什么区别Skills 的目录结构怎么写如何创建第一个自己的 Skill如何用 Skill 做代码审查、Git 提交总结、前端组件生成新手使用 Skills 时常见问题与避坑建议目录1. Claude Code 是什么2. Skills 是什么3. 为什么 Claude Code Skills 会火4. Skills 和普通提示词有什么区别5. Skills 的基本目录结构6. 第一个 Skill自动总结 Git 修改内容7. 第二个 Skill代码审查助手8. 第三个 Skill前端组件生成助手9. Skills 中常见配置字段说明10. 新手常见问题11. 最佳实践建议12. 总结1. Claude Code 是什么Claude Code 是 Anthropic 推出的 AI 编程工具可以理解为一个运行在终端或 IDE 中的 AI 编程助手。它不只是简单回答代码问题而是可以直接参与开发流程例如阅读整个项目代码修改多个文件运行命令分析报错编写测试修复 Bug生成提交信息辅助代码审查根据项目上下文完成开发任务和普通聊天式 AI 不同Claude Code 更像是一个能进入项目目录、理解代码结构、执行开发任务的 AI Agent。2. Skills 是什么Skills 可以翻译成“技能包”或“能力包”。一个 Skill 本质上是一个文件夹里面至少包含一个SKILL.md文件。这个文件会告诉 Claude Code当遇到什么任务时应该如何处理。例如你经常让 Claude Code 做这些事情帮我审查代码帮我总结 Git diff帮我生成接口文档帮我写前端组件帮我检查 SQL 是否有风险帮我按照公司规范生成 commit message如果每次都复制一大段提示词非常麻烦。这时就可以把这些固定流程封装成 Skill。以后只需要输入类似命令/code-review或者/summarize-changesClaude Code 就会按照你提前写好的规则执行任务。3. 为什么 Claude Code Skills 会火我认为 Skills 火起来主要有 4 个原因。3.1 它把提示词变成了工程化资产以前我们使用 AI经常是“临时写提示词”。比如请你帮我审查下面的代码重点关注性能、安全性、边界条件、异常处理和可维护性。这个提示词本身是有价值的但每次都要重新写。Skills 的意义在于它把这些提示词、规则、流程、模板沉淀成项目文件。也就是说AI 使用经验不再只是个人习惯而可以变成团队资产。3.2 它适合团队协作对于一个团队来说最怕的不是 AI 不会写代码而是 AI 写出来的代码风格不统一。比如有的人喜欢函数式写法有的人喜欢面向对象写法有的人接口返回格式不统一有的人错误处理很随意有的人提交信息没有规范如果团队把这些规范写成 SkillsClaude Code 就能按照统一标准工作。这对团队开发非常有价值。3.3 它比普通提示词更可复用普通提示词只能复制粘贴。Skills 可以直接放在项目中例如.claude/skills/code-review/SKILL.md这样每个项目都可以有自己的专属技能。例如前端项目有前端代码规范 Skill后端项目有接口设计 Skill数据分析项目有数据清洗 Skill算法项目有模型评估 Skill企业项目有内部开发流程 Skill这就非常适合真实开发环境。3.4 它更接近 AI Agent 的工作方式AI Agent 的核心不是“回答问题”而是“完成任务”。一个成熟的 Agent 不应该每次都靠用户解释任务而应该具备可复用的工作流程。Skills 正好解决了这个问题什么时候触发读取什么上下文按什么步骤执行输出什么格式是否允许运行命令是否需要用户手动调用这些都可以写进 Skill 中。4. Skills 和普通提示词有什么区别对比项普通提示词Claude Code Skills使用方式每次手动输入保存为 Skill 后重复调用可维护性较差较好团队共享不方便可以直接放进项目上下文管理容易很长按需加载自动触发一般不支持可以根据描述自动触发工程化程度低高适合场景临时问答固定流程、团队规范、重复任务一句话总结普通提示词适合临时提问Skills 适合沉淀长期可复用的 AI 工作流。5. Skills 的基本目录结构一个最简单的 Skill 结构如下.claude/ └── skills/ └── my-skill/ └── SKILL.md其中.claude/skills/是项目中的 Skills 目录my-skill是 Skill 名称SKILL.md是 Skill 的核心说明文件如果你想创建个人级 Skill也可以放在用户目录下~/.claude/skills/my-skill/SKILL.md项目级 Skill 只对当前项目生效。个人级 Skill 可以在多个项目中使用。6. 第一个 Skill自动总结 Git 修改内容下面我们从一个最简单、最实用的例子开始。目标创建一个 Skill让 Claude Code 自动总结当前项目的 Git 修改内容并指出潜在风险。6.1 创建目录在项目根目录下执行mkdir-p.claude/skills/summarize-changes目录结构如下.claude/ └── skills/ └── summarize-changes/ └── SKILL.md6.2 编写 SKILL.md新建文件.claude/skills/summarize-changes/SKILL.md写入以下内容--- name: summarize-changes description: Summarize current git changes and identify possible risks. Use this when the user asks what changed, wants to review current modifications, or needs a commit summary. --- ## Current Git Diff !git diff HEAD ## Instructions You are a careful senior software engineer. Please analyze the current Git diff and output: 1. A short summary of the main changes 2. Important files changed 3. Possible risks 4. Whether tests should be added or updated 5. A suggested commit message Use Chinese in the final response. Keep the result clear and concise.6.3 使用这个 Skill进入项目后启动 Claude Codeclaude然后输入/summarize-changes它就会读取当前 Git diff并按照 Skill 中的要求总结修改。6.4 这个例子有什么价值这个 Skill 很适合新手使用因为它可以帮助你看懂自己到底改了什么检查是否遗漏测试发现潜在风险自动生成 commit message提升提交代码前的自检质量尤其是项目文件变多以后手动看 diff 很容易漏问题用 Skill 做一遍总结非常实用。7. 第二个 Skill代码审查助手下面我们再写一个更实用的 Skill代码审查助手。目标让 Claude Code 按照固定维度审查当前修改。7.1 创建目录mkdir-p.claude/skills/code-review7.2 编写 SKILL.md--- name: code-review description: Review the current code changes for correctness, maintainability, security, performance, and test coverage. --- ## Current Git Diff !git diff HEAD ## Review Role You are a strict but constructive senior code reviewer. ## Review Checklist Please review the code changes from the following dimensions: 1. Correctness - Is the logic correct? - Are there any missing edge cases? - Are there possible null, undefined, or empty value issues? 2. Maintainability - Is the code readable? - Are function names and variable names clear? - Is the structure easy to extend? 3. Security - Is there any unsafe input handling? - Is sensitive data exposed? - Are permissions or authentication checks missing? 4. Performance - Are there unnecessary loops? - Are there repeated database queries? - Are there avoidable expensive operations? 5. Testing - Are tests missing? - Should existing tests be updated? - What test cases should be added? ## Output Format Please output in Chinese using the following format: ### 总体评价 ### 主要问题 ### 潜在风险 ### 修改建议 ### 建议补充的测试7.3 使用方式/code-review你也可以直接问帮我审查一下这次修改有没有问题如果描述匹配Claude Code 也可能自动调用这个 Skill。7.4 为什么代码审查适合做成 Skill代码审查是典型的重复任务。每次审查都要关注逻辑正确性边界条件安全问题性能问题可维护性测试覆盖这些维度非常固定所以很适合沉淀成 Skill。8. 第三个 Skill前端组件生成助手下面我们写一个前端开发常用 Skill。目标让 Claude Code 按照统一规范生成 React 组件。8.1 创建目录mkdir-p.claude/skills/react-component8.2 编写 SKILL.md--- name: react-component description: Generate React components following project conventions. Use this when the user asks to create or refactor a React component. argument-hint: [component-name] --- ## Role You are a senior frontend engineer. ## Component Requirements When generating React components, follow these rules: 1. Use TypeScript 2. Use functional components 3. Define clear Props types 4. Keep component logic simple 5. Avoid unnecessary state 6. Prefer composition over complex conditional rendering 7. Add basic loading and empty states when needed 8. Keep styles separated if the project already uses separate style files 9. Follow existing project naming conventions ## Output Requirements When creating a component, provide: 1. Component file 2. Props definition 3. Example usage 4. Notes about edge cases 5. Suggestions for testing ## Style Use clean, readable, production-oriented code. Avoid over-engineering. Explain important decisions in Chinese.8.3 调用方式/react-component UserCard也可以直接告诉 Claude Code帮我写一个 UserCard 组件展示用户头像、昵称、邮箱和状态如果描述匹配Skill 就可以被使用。8.4 示例组件代码例如我们希望生成一个用户卡片组件可以得到类似代码import React from react; type UserStatus active | inactive | pending; interface UserCardProps { avatarUrl: string; name: string; email: string; status: UserStatus; } export const UserCard: React.FCUserCardProps ({ avatarUrl, name, email, status, }) { const statusTextMap: RecordUserStatus, string { active: 正常, inactive: 停用, pending: 待确认, }; return ( div classNameuser-card img classNameuser-card__avatar src{avatarUrl} alt{${name} avatar} / div classNameuser-card__content h3 classNameuser-card__name{name}/h3 p classNameuser-card__email{email}/p span className{user-card__status user-card__status--${status}} {statusTextMap[status]} /span /div /div ); };对应样式可以写成.user-card{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #e5e7eb;border-radius:12px;background-color:#ffffff;}.user-card__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;}.user-card__content{display:flex;flex-direction:column;gap:4px;}.user-card__name{margin:0;font-size:16px;font-weight:600;}.user-card__email{margin:0;font-size:14px;color:#6b7280;}.user-card__status{font-size:12px;}.user-card__status--active{color:#16a34a;}.user-card__status--inactive{color:#dc2626;}.user-card__status--pending{color:#d97706;}9. Skills 中常见配置字段说明SKILL.md顶部通常会有一段 YAML 配置例如--- name: code-review description: Review code changes for correctness and maintainability. argument-hint: [file-or-scope] disable-model-invocation: true allowed-tools: Read Grep Bash ---常见字段如下。9.1 namename:code-review表示 Skill 的展示名称。一般建议和文件夹名称保持一致方便理解。9.2 descriptiondescription:Review code changes for correctness and maintainability.这是非常重要的字段。Claude Code 会根据 description 判断什么时候应该使用这个 Skill。新手写 description 时建议包含三类信息这个 Skill 做什么 什么时候使用 适合什么任务例如description:Review current git changes for bugs,risks,maintainability,and missing tests. Use when the user asks to review code or check modifications before commit.9.3 argument-hintargument-hint:[component-name]这个字段用于提示用户调用 Skill 时应该传什么参数。例如/react-component UserCard其中UserCard就是参数。9.4 disable-model-invocationdisable-model-invocation:true这个字段表示是否禁止 Claude 自动触发该 Skill。如果设置为true就只能用户手动调用。适合以下场景部署删除文件执行危险命令修改数据库批量重构比如部署 Skill 最好手动调用不要让 AI 自动触发。9.5 allowed-toolsallowed-tools:Read Grep Bash这个字段可以配置 Skill 允许使用的工具。新手建议谨慎使用尤其是涉及文件删除网络请求数据库操作部署命令权限变更AI Agent 越强越要注意权限边界。10. 新手常见问题10.1 Skills 是不是等于插件不完全等于。插件通常更偏向“扩展工具能力”而 Skill 更偏向“封装任务流程和上下文规则”。可以简单理解为插件 提供工具 Skill 教 Claude 如何使用规则和流程完成任务10.2 Skills 和 CLAUDE.md 有什么区别CLAUDE.md更适合写项目的长期背景信息例如项目架构技术栈编码规范常用命令项目注意事项Skills 更适合写具体任务流程例如如何审查代码如何生成组件如何部署项目如何总结 Git 修改如何生成接口文档简单理解CLAUDE.md告诉 Claude 这个项目是什么 Skills告诉 Claude 遇到某类任务时怎么做10.3 Skill 写得越长越好吗不是。Skill 不是越长越好而是越清晰越好。建议遵循目标明确步骤清楚输出格式固定不写无关背景不把所有规则塞进一个 Skill一个 Skill 最好只解决一类问题。10.4 Skill 可以放代码文件吗可以。一个复杂 Skill 可以包含my-skill/ ├── SKILL.md ├── examples/ │ └── example-output.md ├── templates/ │ └── component-template.tsx └── scripts/ └── validate.sh其中SKILL.md写核心说明examples放示例输出templates放模板scripts放辅助脚本这样 Skill 会更像一个完整的小型工具包。10.5 为什么我的 Skill 没有触发常见原因有description写得太模糊Skill 目录放错了SKILL.md文件名写错了当前 Claude Code 没有读取到该目录任务描述和 Skill 的用途不匹配设置了disable-model-invocation: true建议先用手动命令测试/skill-name如果手动可以调用说明 Skill 本身基本没问题。如果想让它自动触发就要优化description。11. 最佳实践建议11.1 一个 Skill 只做一件事不要写一个“万能开发助手 Skill”。不推荐这个 Skill 负责代码审查、组件生成、接口设计、数据库优化、部署上线、文档生成。推荐拆成多个 Skill.claude/skills/code-review/ .claude/skills/api-design/ .claude/skills/react-component/ .claude/skills/sql-review/ .claude/skills/release-note/这样更清晰也更容易维护。11.2 description 一定要写具体不好的写法description:Help with code.好的写法description:Review current git changes for bugs,security risks,maintainability issues,and missing tests before commit.因为 Claude Code 判断是否调用 Skill主要依赖描述信息。描述越准确触发越稳定。11.3 输出格式要固定如果你希望每次结果都稳定就要写清楚输出格式。例如## Output Format Please output with the following sections: 1. Summary 2. Problems 3. Risks 4. Suggested changes 5. Suggested tests这样 Claude Code 的输出就不会太散。11.4 危险操作必须手动触发涉及以下操作时建议设置disable-model-invocation:true包括部署生产环境删除文件修改数据库批量重构执行 shell 脚本推送代码创建 releaseAI Agent 可以提高效率但不能把关键权限完全交出去。11.5 让 Skill 成为团队规范的一部分如果是团队项目可以把 Skills 放在项目中.claude/skills/然后随代码一起提交到仓库。这样每个团队成员使用 Claude Code 时都可以共享同一套 AI 工作流程。这对团队规范化非常有帮助。12. 总结Claude Code Skills 的核心价值不是“多一个功能”而是让 AI 编程从临时对话走向工程化。以前我们使用 AI更多是我问一句AI 答一句。而有了 Skills 之后开发流程会变成把重复任务沉淀成 Skill让 AI 按照固定流程完成。对于新手来说建议先从这 3 个 Skill 开始summarize-changes# 总结 Git 修改code-review# 代码审查react-component# 生成前端组件等熟悉之后再逐步扩展api-design# 接口设计sql-review# SQL 审查release-note# 版本说明deploy-staging# 测试环境部署test-writer# 自动生成测试最后总结一句Claude Code Skills 本质上是把你的开发经验、团队规范和重复工作流程封装成 AI 可以复用的技能包。如果说 Claude Code 是一个 AI 程序员那么 Skills 就是给这个 AI 程序员安装的专业工作手册。谁能更早把自己的工作流沉淀成 Skills谁就能更快进入 AI Agent 编程时代。如果你觉得这篇文章对你有帮助可以点赞、收藏、关注。后续我会继续整理 Claude Code、AI Agent、Dify、Coze、LangChain、MCP 等方向的实战教程。
《Claude Code 的 Skills 彻底火了！新手也能看懂的 AI Agent 技能扩展实战教程》
发布时间：2026/6/12 19:37:27
Claude Code 的 Skills 彻底火了新手也能看懂的 AI Agent 技能扩展实战教程摘要最近 AI 编程圈里Claude Code 的热度非常高而其中一个非常值得关注的能力就是Skills。简单来说Skills 就像是给 Claude Code 安装“专业技能包”你可以把一套固定的开发流程、代码规范、项目规则、审查清单、部署步骤封装成一个 Skill让 Claude Code 在需要时自动调用或者通过命令手动触发。本文面向新手从 0 开始讲清楚Claude Code Skills 是什么Skills 和普通提示词有什么区别Skills 的目录结构怎么写如何创建第一个自己的 Skill如何用 Skill 做代码审查、Git 提交总结、前端组件生成新手使用 Skills 时常见问题与避坑建议目录1. Claude Code 是什么2. Skills 是什么3. 为什么 Claude Code Skills 会火4. Skills 和普通提示词有什么区别5. Skills 的基本目录结构6. 第一个 Skill自动总结 Git 修改内容7. 第二个 Skill代码审查助手8. 第三个 Skill前端组件生成助手9. Skills 中常见配置字段说明10. 新手常见问题11. 最佳实践建议12. 总结1. Claude Code 是什么Claude Code 是 Anthropic 推出的 AI 编程工具可以理解为一个运行在终端或 IDE 中的 AI 编程助手。它不只是简单回答代码问题而是可以直接参与开发流程例如阅读整个项目代码修改多个文件运行命令分析报错编写测试修复 Bug生成提交信息辅助代码审查根据项目上下文完成开发任务和普通聊天式 AI 不同Claude Code 更像是一个能进入项目目录、理解代码结构、执行开发任务的 AI Agent。2. Skills 是什么Skills 可以翻译成“技能包”或“能力包”。一个 Skill 本质上是一个文件夹里面至少包含一个SKILL.md文件。这个文件会告诉 Claude Code当遇到什么任务时应该如何处理。例如你经常让 Claude Code 做这些事情帮我审查代码帮我总结 Git diff帮我生成接口文档帮我写前端组件帮我检查 SQL 是否有风险帮我按照公司规范生成 commit message如果每次都复制一大段提示词非常麻烦。这时就可以把这些固定流程封装成 Skill。以后只需要输入类似命令/code-review或者/summarize-changesClaude Code 就会按照你提前写好的规则执行任务。3. 为什么 Claude Code Skills 会火我认为 Skills 火起来主要有 4 个原因。3.1 它把提示词变成了工程化资产以前我们使用 AI经常是“临时写提示词”。比如请你帮我审查下面的代码重点关注性能、安全性、边界条件、异常处理和可维护性。这个提示词本身是有价值的但每次都要重新写。Skills 的意义在于它把这些提示词、规则、流程、模板沉淀成项目文件。也就是说AI 使用经验不再只是个人习惯而可以变成团队资产。3.2 它适合团队协作对于一个团队来说最怕的不是 AI 不会写代码而是 AI 写出来的代码风格不统一。比如有的人喜欢函数式写法有的人喜欢面向对象写法有的人接口返回格式不统一有的人错误处理很随意有的人提交信息没有规范如果团队把这些规范写成 SkillsClaude Code 就能按照统一标准工作。这对团队开发非常有价值。3.3 它比普通提示词更可复用普通提示词只能复制粘贴。Skills 可以直接放在项目中例如.claude/skills/code-review/SKILL.md这样每个项目都可以有自己的专属技能。例如前端项目有前端代码规范 Skill后端项目有接口设计 Skill数据分析项目有数据清洗 Skill算法项目有模型评估 Skill企业项目有内部开发流程 Skill这就非常适合真实开发环境。3.4 它更接近 AI Agent 的工作方式AI Agent 的核心不是“回答问题”而是“完成任务”。一个成熟的 Agent 不应该每次都靠用户解释任务而应该具备可复用的工作流程。Skills 正好解决了这个问题什么时候触发读取什么上下文按什么步骤执行输出什么格式是否允许运行命令是否需要用户手动调用这些都可以写进 Skill 中。4. Skills 和普通提示词有什么区别对比项普通提示词Claude Code Skills使用方式每次手动输入保存为 Skill 后重复调用可维护性较差较好团队共享不方便可以直接放进项目上下文管理容易很长按需加载自动触发一般不支持可以根据描述自动触发工程化程度低高适合场景临时问答固定流程、团队规范、重复任务一句话总结普通提示词适合临时提问Skills 适合沉淀长期可复用的 AI 工作流。5. Skills 的基本目录结构一个最简单的 Skill 结构如下.claude/ └── skills/ └── my-skill/ └── SKILL.md其中.claude/skills/是项目中的 Skills 目录my-skill是 Skill 名称SKILL.md是 Skill 的核心说明文件如果你想创建个人级 Skill也可以放在用户目录下~/.claude/skills/my-skill/SKILL.md项目级 Skill 只对当前项目生效。个人级 Skill 可以在多个项目中使用。6. 第一个 Skill自动总结 Git 修改内容下面我们从一个最简单、最实用的例子开始。目标创建一个 Skill让 Claude Code 自动总结当前项目的 Git 修改内容并指出潜在风险。6.1 创建目录在项目根目录下执行mkdir-p.claude/skills/summarize-changes目录结构如下.claude/ └── skills/ └── summarize-changes/ └── SKILL.md6.2 编写 SKILL.md新建文件.claude/skills/summarize-changes/SKILL.md写入以下内容--- name: summarize-changes description: Summarize current git changes and identify possible risks. Use this when the user asks what changed, wants to review current modifications, or needs a commit summary. --- ## Current Git Diff !git diff HEAD ## Instructions You are a careful senior software engineer. Please analyze the current Git diff and output: 1. A short summary of the main changes 2. Important files changed 3. Possible risks 4. Whether tests should be added or updated 5. A suggested commit message Use Chinese in the final response. Keep the result clear and concise.6.3 使用这个 Skill进入项目后启动 Claude Codeclaude然后输入/summarize-changes它就会读取当前 Git diff并按照 Skill 中的要求总结修改。6.4 这个例子有什么价值这个 Skill 很适合新手使用因为它可以帮助你看懂自己到底改了什么检查是否遗漏测试发现潜在风险自动生成 commit message提升提交代码前的自检质量尤其是项目文件变多以后手动看 diff 很容易漏问题用 Skill 做一遍总结非常实用。7. 第二个 Skill代码审查助手下面我们再写一个更实用的 Skill代码审查助手。目标让 Claude Code 按照固定维度审查当前修改。7.1 创建目录mkdir-p.claude/skills/code-review7.2 编写 SKILL.md--- name: code-review description: Review the current code changes for correctness, maintainability, security, performance, and test coverage. --- ## Current Git Diff !git diff HEAD ## Review Role You are a strict but constructive senior code reviewer. ## Review Checklist Please review the code changes from the following dimensions: 1. Correctness - Is the logic correct? - Are there any missing edge cases? - Are there possible null, undefined, or empty value issues? 2. Maintainability - Is the code readable? - Are function names and variable names clear? - Is the structure easy to extend? 3. Security - Is there any unsafe input handling? - Is sensitive data exposed? - Are permissions or authentication checks missing? 4. Performance - Are there unnecessary loops? - Are there repeated database queries? - Are there avoidable expensive operations? 5. Testing - Are tests missing? - Should existing tests be updated? - What test cases should be added? ## Output Format Please output in Chinese using the following format: ### 总体评价 ### 主要问题 ### 潜在风险 ### 修改建议 ### 建议补充的测试7.3 使用方式/code-review你也可以直接问帮我审查一下这次修改有没有问题如果描述匹配Claude Code 也可能自动调用这个 Skill。7.4 为什么代码审查适合做成 Skill代码审查是典型的重复任务。每次审查都要关注逻辑正确性边界条件安全问题性能问题可维护性测试覆盖这些维度非常固定所以很适合沉淀成 Skill。8. 第三个 Skill前端组件生成助手下面我们写一个前端开发常用 Skill。目标让 Claude Code 按照统一规范生成 React 组件。8.1 创建目录mkdir-p.claude/skills/react-component8.2 编写 SKILL.md--- name: react-component description: Generate React components following project conventions. Use this when the user asks to create or refactor a React component. argument-hint: [component-name] --- ## Role You are a senior frontend engineer. ## Component Requirements When generating React components, follow these rules: 1. Use TypeScript 2. Use functional components 3. Define clear Props types 4. Keep component logic simple 5. Avoid unnecessary state 6. Prefer composition over complex conditional rendering 7. Add basic loading and empty states when needed 8. Keep styles separated if the project already uses separate style files 9. Follow existing project naming conventions ## Output Requirements When creating a component, provide: 1. Component file 2. Props definition 3. Example usage 4. Notes about edge cases 5. Suggestions for testing ## Style Use clean, readable, production-oriented code. Avoid over-engineering. Explain important decisions in Chinese.8.3 调用方式/react-component UserCard也可以直接告诉 Claude Code帮我写一个 UserCard 组件展示用户头像、昵称、邮箱和状态如果描述匹配Skill 就可以被使用。8.4 示例组件代码例如我们希望生成一个用户卡片组件可以得到类似代码import React from react; type UserStatus active | inactive | pending; interface UserCardProps { avatarUrl: string; name: string; email: string; status: UserStatus; } export const UserCard: React.FCUserCardProps ({ avatarUrl, name, email, status, }) { const statusTextMap: RecordUserStatus, string { active: 正常, inactive: 停用, pending: 待确认, }; return ( div classNameuser-card img classNameuser-card__avatar src{avatarUrl} alt{${name} avatar} / div classNameuser-card__content h3 classNameuser-card__name{name}/h3 p classNameuser-card__email{email}/p span className{user-card__status user-card__status--${status}} {statusTextMap[status]} /span /div /div ); };对应样式可以写成.user-card{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #e5e7eb;border-radius:12px;background-color:#ffffff;}.user-card__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;}.user-card__content{display:flex;flex-direction:column;gap:4px;}.user-card__name{margin:0;font-size:16px;font-weight:600;}.user-card__email{margin:0;font-size:14px;color:#6b7280;}.user-card__status{font-size:12px;}.user-card__status--active{color:#16a34a;}.user-card__status--inactive{color:#dc2626;}.user-card__status--pending{color:#d97706;}9. Skills 中常见配置字段说明SKILL.md顶部通常会有一段 YAML 配置例如--- name: code-review description: Review code changes for correctness and maintainability. argument-hint: [file-or-scope] disable-model-invocation: true allowed-tools: Read Grep Bash ---常见字段如下。9.1 namename:code-review表示 Skill 的展示名称。一般建议和文件夹名称保持一致方便理解。9.2 descriptiondescription:Review code changes for correctness and maintainability.这是非常重要的字段。Claude Code 会根据 description 判断什么时候应该使用这个 Skill。新手写 description 时建议包含三类信息这个 Skill 做什么 什么时候使用 适合什么任务例如description:Review current git changes for bugs,risks,maintainability,and missing tests. Use when the user asks to review code or check modifications before commit.9.3 argument-hintargument-hint:[component-name]这个字段用于提示用户调用 Skill 时应该传什么参数。例如/react-component UserCard其中UserCard就是参数。9.4 disable-model-invocationdisable-model-invocation:true这个字段表示是否禁止 Claude 自动触发该 Skill。如果设置为true就只能用户手动调用。适合以下场景部署删除文件执行危险命令修改数据库批量重构比如部署 Skill 最好手动调用不要让 AI 自动触发。9.5 allowed-toolsallowed-tools:Read Grep Bash这个字段可以配置 Skill 允许使用的工具。新手建议谨慎使用尤其是涉及文件删除网络请求数据库操作部署命令权限变更AI Agent 越强越要注意权限边界。10. 新手常见问题10.1 Skills 是不是等于插件不完全等于。插件通常更偏向“扩展工具能力”而 Skill 更偏向“封装任务流程和上下文规则”。可以简单理解为插件 提供工具 Skill 教 Claude 如何使用规则和流程完成任务10.2 Skills 和 CLAUDE.md 有什么区别CLAUDE.md更适合写项目的长期背景信息例如项目架构技术栈编码规范常用命令项目注意事项Skills 更适合写具体任务流程例如如何审查代码如何生成组件如何部署项目如何总结 Git 修改如何生成接口文档简单理解CLAUDE.md告诉 Claude 这个项目是什么 Skills告诉 Claude 遇到某类任务时怎么做10.3 Skill 写得越长越好吗不是。Skill 不是越长越好而是越清晰越好。建议遵循目标明确步骤清楚输出格式固定不写无关背景不把所有规则塞进一个 Skill一个 Skill 最好只解决一类问题。10.4 Skill 可以放代码文件吗可以。一个复杂 Skill 可以包含my-skill/ ├── SKILL.md ├── examples/ │ └── example-output.md ├── templates/ │ └── component-template.tsx └── scripts/ └── validate.sh其中SKILL.md写核心说明examples放示例输出templates放模板scripts放辅助脚本这样 Skill 会更像一个完整的小型工具包。10.5 为什么我的 Skill 没有触发常见原因有description写得太模糊Skill 目录放错了SKILL.md文件名写错了当前 Claude Code 没有读取到该目录任务描述和 Skill 的用途不匹配设置了disable-model-invocation: true建议先用手动命令测试/skill-name如果手动可以调用说明 Skill 本身基本没问题。如果想让它自动触发就要优化description。11. 最佳实践建议11.1 一个 Skill 只做一件事不要写一个“万能开发助手 Skill”。不推荐这个 Skill 负责代码审查、组件生成、接口设计、数据库优化、部署上线、文档生成。推荐拆成多个 Skill.claude/skills/code-review/ .claude/skills/api-design/ .claude/skills/react-component/ .claude/skills/sql-review/ .claude/skills/release-note/这样更清晰也更容易维护。11.2 description 一定要写具体不好的写法description:Help with code.好的写法description:Review current git changes for bugs,security risks,maintainability issues,and missing tests before commit.因为 Claude Code 判断是否调用 Skill主要依赖描述信息。描述越准确触发越稳定。11.3 输出格式要固定如果你希望每次结果都稳定就要写清楚输出格式。例如## Output Format Please output with the following sections: 1. Summary 2. Problems 3. Risks 4. Suggested changes 5. Suggested tests这样 Claude Code 的输出就不会太散。11.4 危险操作必须手动触发涉及以下操作时建议设置disable-model-invocation:true包括部署生产环境删除文件修改数据库批量重构执行 shell 脚本推送代码创建 releaseAI Agent 可以提高效率但不能把关键权限完全交出去。11.5 让 Skill 成为团队规范的一部分如果是团队项目可以把 Skills 放在项目中.claude/skills/然后随代码一起提交到仓库。这样每个团队成员使用 Claude Code 时都可以共享同一套 AI 工作流程。这对团队规范化非常有帮助。12. 总结Claude Code Skills 的核心价值不是“多一个功能”而是让 AI 编程从临时对话走向工程化。以前我们使用 AI更多是我问一句AI 答一句。而有了 Skills 之后开发流程会变成把重复任务沉淀成 Skill让 AI 按照固定流程完成。对于新手来说建议先从这 3 个 Skill 开始summarize-changes# 总结 Git 修改code-review# 代码审查react-component# 生成前端组件等熟悉之后再逐步扩展api-design# 接口设计sql-review# SQL 审查release-note# 版本说明deploy-staging# 测试环境部署test-writer# 自动生成测试最后总结一句Claude Code Skills 本质上是把你的开发经验、团队规范和重复工作流程封装成 AI 可以复用的技能包。如果说 Claude Code 是一个 AI 程序员那么 Skills 就是给这个 AI 程序员安装的专业工作手册。谁能更早把自己的工作流沉淀成 Skills谁就能更快进入 AI Agent 编程时代。如果你觉得这篇文章对你有帮助可以点赞、收藏、关注。后续我会继续整理 Claude Code、AI Agent、Dify、Coze、LangChain、MCP 等方向的实战教程。
