news 2026/6/12 19:37:24

《Claude Code 的 Skills 彻底火了!新手也能看懂的 AI Agent 技能扩展实战教程》

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
《Claude Code 的 Skills 彻底火了!新手也能看懂的 AI Agent 技能扩展实战教程》

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-changes

Claude Code 就会按照你提前写好的规则执行任务。


3. 为什么 Claude Code Skills 会火

我认为 Skills 火起来主要有 4 个原因。

3.1 它把提示词变成了工程化资产

以前我们使用 AI,经常是“临时写提示词”。

比如:

请你帮我审查下面的代码,重点关注性能、安全性、边界条件、异常处理和可维护性。

这个提示词本身是有价值的,但每次都要重新写。

Skills 的意义在于:
它把这些提示词、规则、流程、模板沉淀成项目文件。

也就是说,AI 使用经验不再只是个人习惯,而可以变成团队资产。


3.2 它适合团队协作

对于一个团队来说,最怕的不是 AI 不会写代码,而是 AI 写出来的代码风格不统一。

比如:

  • 有的人喜欢函数式写法
  • 有的人喜欢面向对象写法
  • 有的人接口返回格式不统一
  • 有的人错误处理很随意
  • 有的人提交信息没有规范

如果团队把这些规范写成 Skills,Claude 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.md

6.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 Code:

claude

然后输入:

/summarize-changes

它就会读取当前 Git diff,并按照 Skill 中的要求总结修改。


6.4 这个例子有什么价值

这个 Skill 很适合新手使用,因为它可以帮助你:

  • 看懂自己到底改了什么
  • 检查是否遗漏测试
  • 发现潜在风险
  • 自动生成 commit message
  • 提升提交代码前的自检质量

尤其是项目文件变多以后,手动看 diff 很容易漏问题,用 Skill 做一遍总结非常实用。


7. 第二个 Skill:代码审查助手

下面我们再写一个更实用的 Skill:代码审查助手。

目标:让 Claude Code 按照固定维度审查当前修改。


7.1 创建目录

mkdir-p.claude/skills/code-review

7.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-component

8.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.FC<UserCardProps> = ({ avatarUrl, name, email, status, }) => { const statusTextMap: Record<UserStatus, string> = { active: "正常", inactive: "停用", pending: "待确认", }; return ( <div className="user-card"> <img className="user-card__avatar" src={avatarUrl} alt={`${name} avatar`} /> <div className="user-card__content"> <h3 className="user-card__name">{name}</h3> <p className="user-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 name

name:code-review

表示 Skill 的展示名称。

一般建议和文件夹名称保持一致,方便理解。


9.2 description

description: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-hint

argument-hint:[component-name]

这个字段用于提示用户调用 Skill 时应该传什么参数。

例如:

/react-component UserCard

其中UserCard就是参数。


9.4 disable-model-invocation

disable-model-invocation:true

这个字段表示是否禁止 Claude 自动触发该 Skill。

如果设置为true,就只能用户手动调用。

适合以下场景:

  • 部署
  • 删除文件
  • 执行危险命令
  • 修改数据库
  • 批量重构

比如部署 Skill 最好手动调用,不要让 AI 自动触发。


9.5 allowed-tools

allowed-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 没有触发?

常见原因有:

  1. description写得太模糊
  2. Skill 目录放错了
  3. SKILL.md文件名写错了
  4. 当前 Claude Code 没有读取到该目录
  5. 任务描述和 Skill 的用途不匹配
  6. 设置了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 脚本
  • 推送代码
  • 创建 release

AI 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 等方向的实战教程。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/12 19:33:56

从物理波的叠加到数学公式:用Desmos动态演示帮你直观理解sin(α+β)

用Desmos动态演示波叠加&#xff1a;从物理现象到数学公式的直观理解记得第一次在物理实验室看到示波器上两条正弦波叠加成新波形时&#xff0c;那种"原来公式可以这样活过来"的震撼至今难忘。现在&#xff0c;我们完全可以在浏览器里用Desmos重现这种神奇体验——不…

作者头像 李华
网站建设 2026/6/12 19:30:53

深入剖析MCF52110:经典工业控制器的架构、外设与实战开发指南

1. MCF52110&#xff1a;一个老牌工业控制器的深度剖析与实战指南在嵌入式工业控制领域&#xff0c;选型往往是一场在性能、成本、可靠性和开发便利性之间的精妙平衡。十几年前&#xff0c;当32位微控制器开始从高端应用向成本敏感型领域渗透时&#xff0c;飞思卡尔&#xff08…

作者头像 李华
网站建设 2026/6/12 19:24:59

CSDN博客下载器终极指南:如何快速备份你的技术博客内容

CSDN博客下载器终极指南&#xff1a;如何快速备份你的技术博客内容 【免费下载链接】CSDNBlogDownloader 项目地址: https://gitcode.com/gh_mirrors/cs/CSDNBlogDownloader CSDNBlogDownloader是一款专为技术博主和学习者设计的CSDN博客下载工具&#xff0c;让你轻松实…

作者头像 李华
网站建设 2026/6/12 19:20:53

ArcGIS Pro 基础:属性表的关联功能使用

关联和连接功能的区别&#xff1a;&#xff08;1&#xff09;&#xff1a;连接只能实现&#xff1a;一对一和一对多&#xff1b;&#xff08;2&#xff09;&#xff1a;关联可以实现&#xff1a;一对一、一对多、多对多&#xff1b;&#xff08;3&#xff09;&#xff1a;连接可…

作者头像 李华