阅读原文：Claude Code Skills 完全指南

一、本章核心学习目标

  • 理解 Claude Code Skills 的核心定位，搞懂它如何扩展 AI 助手的能力边界
  • 掌握 Skills 的快速上手流程，学会用 find-skills 一键搜索安装技能
  • 掌握实战场景的用法，比如视频制作、前端美化、PPT 生成
  • 理解 Skills 与 MCP 的核心差异，学会根据需求选择
  • 学会创建自己的自定义 Skill，沉淀团队的工作流程和规范

二、什么是 Skills？

Claude Code Skills 是一种将专业知识、工作流程和最佳实践打包成 “可复用技能包” 的功能。

想象一下，Skills 就像是给 Claude 配备的 “技能书”—— 当你需要它完成特定任务时，它不再需要你一遍遍地解释要求，而是直接按照预先定义好的技能标准来执行工作。

2.1 为什么需要 Skills？

在没有 Skills 之前，使用 Claude Code 存在一些问题：

  • 重复指令：每次都要解释 “代码要符合什么风格”、“提交信息要怎么写”
  • 知识无法沉淀：团队成员各自的使用经验无法共享
  • 标准不统一：不同的人用 Claude，结果可能完全不同
  • 效率低下：常见的任务每次都要从头解释

Skills 解决了这些问题，让 Claude 变成一个 “有经验的团队成员”—— 它知道你的项目规范、工作流程和最佳实践。

2.2 为什么现在要学 Skills？

Skills 正在成为 AI 工程师的必备技能：

  • 社区热度高：GitHub 上相关仓库星标快速增长，例如 OpenSkills 项目已收获 7.2k stars，Obsidian Skills 9 天暴涨 6.6k stars
  • 官方支持：Anthropic 官方维护 Skills 仓库，Vercel 推出 Agent Skills 和 find-skills 工具
  • 实用性强：从代码审查、Git 操作到视频制作、PPT 生成，覆盖多种场景。skills.sh 平台已有 60K+ 订阅量的热门技能
  • 效率提升：一次配置，反复使用，让 Claude 真正成为你的 “数字员工”
  • 开发者认可：多个技术社区推荐，被广泛认为是提升 AI 编程效率的关键工具

三、5 分钟快速上手

3.1 第一步：安装 find-skills（必装神器）

在开始使用 Skills 之前，强烈推荐先安装 find-skills —— 这是 AI Agent 领域的 “技能搜索神器”，目前已有 60K+ 订阅量。

find-skills 是什么？
简单来说，它就像是 AI Agent 的 “应用商店搜索器”。当你需要完成某个任务但本地没有对应的 Skill 时，它会自动帮你搜索并推荐最合适的 Skill。

安装命令：

npx skills add vercel-labs/skills@find-skills -g -y

Windows 用户注意：官方版本对 Windows 支持有限，社区制作了适配版本，支持 CMD 和 PowerShell，并增加了中文搜索功能。
下载地址：github.com/tongbei821/customize-skills

3.2 实战 Skill 1：Remotion 视频制作

用 Remotion Skill，你可以用自然语言直接制作视频：

安装：

你：帮我找找 Remotion 相关的技能，我想做视频
Claude：推荐安装 remotion-dev/skills

使用示例：

用 Remotion 做一个视频：
- 1920x1080，5 秒
- 一行文字 "Hello World" 从左边飞进来
- 同时带旋转和缩放效果
- 背景是渐变色

Claude 会自动生成完整的 Remotion 代码，你直接运行就能得到动画视频。

3.3 实战 Skill 2：frontend-design 前端美化

解决 “前端又丑又卡” 的痛点，让 AI 生成的界面摆脱千篇一律的 “AI 味”：

安装：

你：我的网页看起来很土，帮我找找技能
Claude：推荐安装 anthropics/skills/frontend-design

使用示例：

帮我重新设计这个页面，要看起来很专业，别像 AI 生成的

它会自动帮你：

  • 独特的视觉风格，避开烂大街的默认配色
  • 精心挑选的字体和布局
  • 流畅的交互动画
  • 干净高性能的代码

3.4 实战 Skill 3：frontend-slides 快速做 PPT

用自然语言一键生成精美演示文稿，它会自动生成多个视觉预览让你选择：

安装：

你：帮我找找做 PPT 相关的技能
Claude：推荐安装 frontend-slides

使用示例：

/frontend-slides
我想创建一个 AI 创业项目的融资路演 PPT，大概 10 页

它会引导你输入内容，然后生成 3 个不同风格的 PPT 预览，你选一个就能直接导出。

3.5 三个热门 Skill 对比

Skills 解决什么问题 适用场景
remotion-dev/skills 用代码制作视频 产品演示、动画制作
anthropics/skills/frontend-design 前端界面美化 解决 “AI 味” 界面
frontend-slides 快速生成 PPT 演示文稿、路演材料

四、核心概念详解

4.1 Skills 的核心工作原理

Skills 本质上是高级提示词包，它不是可执行代码，而是在需要时动态注入到 Claude 的上下文中：

  • 自动匹配：Claude 会根据你的需求，自动匹配对应的 Skill
  • 动态注入：匹配成功后，把 Skill 的完整指令注入到对话上下文
  • 按需加载：只有用到的 Skill 才会加载，不浪费 Token
  • 用完即弃：任务完成后自动清理，保持上下文清爽

4.2 SKILL.md 文件结构

每个 Skill 都是一个目录，核心是 SKILL.md 文件：

my-custom-skill/
├── SKILL.md        # 必需：核心定义文件
├── config.json     # 可选：元数据配置
├── README.md       # 可选：使用文档
├── scripts/        # 可选：可执行脚本
├── templates/      # 可选：模板文件
└── references/     # 可选：参考文档

SKILL.md 模板：

---
name: my-skill
description: 技能的功能描述，用于自动匹配
category: code
tags: [format, lint]
---

# 技能的详细指令
你是一个XX专家，当用户需要XX任务时，请按照以下步骤执行：

1. 第一步：XXX
2. 第二步：XXX
3. 第三步：XXX

## 注意事项
- 注意点1
- 注意点2

关键字段说明：

字段 必填 说明
name 是 技能名称，小写字母、数字、连字符
description 是 技能描述，越具体越容易被自动匹配
category 否 分类标签
tags 否 更多分类标签

4.3 Skills vs MCP：核心区别

很多人会混淆这两个功能，它们是完全不同的东西，而且是互补关系：

维度 Skills MCP
本质 知识和流程 工具和接口
提供什么 告诉 AI “怎么做” 给 AI “能用什么”
存储位置 skills/ 目录的 Markdown 文件 MCP 服务器的 JSON 配置
配置方式 写 Markdown 指令 配置 JSON 连接参数
触发方式 自动匹配或命令调用 服务启动自动加载

形象比喻：
如果把 Claude 比作一个厨师：

  • MCP 是给厨师的厨具、食材、调料（工具）
  • Skills 是给厨师的菜谱、操作手册（怎么做菜）

它们的关系：

用户任务 → Claude 识别需求
↓
加载相关 Skills（知道怎么做）
↓
通过 MCP 调用工具（有工具可用）
↓
完成任务

选择建议：

你的需求 推荐方案
需要定义工作流程、规范 用 Skills
需要连接外部服务、API 用 MCP
两者都有 配合使用，效果最佳

五、常用 Skills 资源

5.1 官方资源

5.2 社区资源

仓库 说明
shanraisshan/claude-code-best-practice Boris Cherny（Claude Code 负责人）维护，包含 Skills、Agents、Hooks 等
affaan-m/everything-claude-code 综合工具包，包含预配置 Skills
JackyST0/awesome-agent-skills 精选 Skills 资源列表
jeffallan/claude-skills 66 个专业技能，300+ 参考文档
GitCode/awesome-claude-skills 开源精选

5.3 如何安装社区 Skills

使用 find-skills，只需要一句话：

帮我找找有什么 React 性能优化相关的技能

Claude 会自动搜索，推荐最合适的，你确认后一键安装。

搜索技巧：

  • 使用具体关键词：“react testing” 优于 “testing”
  • 组合「领域 + 动作」：“nextjs deploy”、“typescript lint”
  • 优先选择高安装量的技能（10K+ 说明经过实战检验）

六、创建自己的自定义 Skill

6.1 方法一：直接让 Claude 帮你创建

最简单的方式，直接用自然语言描述你的需求：

请帮我创建一个名为 "format-code" 的 skill，功能是自动格式化代码。
要求：
1. 自动检测编程语言类型
2. 应用对应的格式化规则
3. 返回格式化前后的 diff

Claude 会自动：

  1. 创建目录结构

  2. 生成 SKILL.md 文件

  3. 填写正确的 frontmatter

  4. 编写完整的技能指令

6.2 方法二：使用 skill-creator

官方的创建工具，引导你一步步完成：

安装：

npx skills add anthropics/skills@skill-creator -g

使用：

/skill-creator

然后按提示填写：

  • 技能名称
  • 功能描述
  • 使用场景
  • 执行步骤

它会自动生成完整的 SKILL.md，还会帮你做测试验证。

6.3 实战：自定义 Skill 示例

示例 1：代码审查 Skill
---
name: review-pr
description: 审查 Pull Request 的代码质量、安全性和测试覆盖率
---

你是一位资深的代码审查者。
## 审查流程
1. **代码风格检查**
   - 代码是否符合团队规范
   - 命名是否清晰
   - 注释是否充分
2. **安全性检查**
   - 是否有安全漏洞
   - 敏感信息是否暴露
   - 输入验证是否完善
3. **测试检查**
   - 是否有足够的测试
   - 测试用例是否覆盖边界情况
4. **总体评价**
   - 优点是什么
   - 需要改进的地方
   - 建议是否批准合并
示例 2：Git 自动提交 Skill
---
name: git-commit
description: 自动检测修改、生成提交信息并提交代码
---

你是一位熟练的 Git 用户。
## 执行流程
1. **检查修改**
   - 运行 `git status` 查看修改的文件
   - 运行 `git diff` 查看具体改动
2. **生成提交信息**
   - 分析改动的性质
   - 生成符合 Conventional Commits 格式的提交信息
3. **安全检查**
   - 检查是否有敏感信息
   - 不要提交 node_modules 等目录
4. **确认后执行**
   - 显示提交信息供确认
   - 执行 git commit
示例 3：测试生成 Skill

自动为代码生成单元测试。

示例 4：文档生成 Skill

自动为项目生成 README 文档。

七、进阶技巧

7.1 Skills 与 Hooks 配合

Hooks 可以在特定事件时自动触发 Skills，实现自动化：

// .claude/hooks.json
{
"hooks": {
"PostToolUse": [{
"matcher": {
"tool_name": "Edit"
},
"hook": {
"type": "command",
"command": "/format-code" // 代码保存后自动格式化
}
}]
}
}

7.2 Skills 与 Commands 配合

Commands 是简单的快捷命令，Skills 是复杂的工作流，两者可以配合使用。

7.3 团队协作

  • 共享配置：把 Skills 放在项目的 .claude/skills/ 目录，提交到 Git，团队成员克隆后就能直接用
  • 版本控制：Skills 可以像代码一样做版本控制，支持回滚
  • 统一规范：团队的编码规范、工作流程都可以沉淀到 Skills 里，保证所有人输出一致

八、常见问题排查

Q1：Skill 没有被触发？

可能原因：

  • YAML frontmatter 格式错误
  • description 不够具体，Claude 匹配不到
  • Claude Code 没有重启

解决方法：检查格式、优化 description、重启工具。

Q2：description 怎么写才准确？

好的 description 要包含：

  • 技能的具体功能
  • 使用场景（“当用户提到…”）
  • 能覆盖的关键词，方便 Claude 匹配

Q3：Skills 和 Commands 的区别？

Commands Skills
简单快捷命令 完整工作流
单个 .md 文件 目录结构（SKILL.md + 可选文件）
手动触发 可自动触发
适合简单操作 适合复杂流程

Q4：如何调试 Skill？

  1. 使用 /skills 查看技能是否被识别

  2. 直接输入技能名称手动触发

  3. 检查 SKILL.md 文件内容是否正确

  4. 查看 Claude Code 日志

九、内部机制：Skills 是如何工作的

9.1 动态上下文注入

Skills 的核心是基于提示词的动态上下文注入，它不是可执行代码，而是在需要时把技能指令注入到对话中。

9.2 三层渐进式加载架构

为了节省 Token，Claude 采用了分层加载：

层级 内容 加载时机 Token 消耗
Layer 1: 元数据 YAML frontmatter（name + description） Claude 启动时 ~30-50 tokens/skill
Layer 2: 指令 完整 SKILL.md 内容 Skill 被触发时 ~5,000 tokens
Layer 3: 资源 脚本、模板、参考文档 按需通过文件系统访问 不占上下文

效果：100 个 Skill 启动只消耗～3-5K Token，比每次都把所有指令放进去节省 80%+ 的 Token！

9.3 纯 LLM 路由机制

Claude 没有用硬编码的路由，而是用 LLM 自己的理解能力来匹配 Skill：

  • 不需要关键词匹配，Claude 能理解语义
  • 支持模糊匹配、同义词、多语言
  • 自动理解用户意图，选择最合适的 Skill

本章总结

Skills 是让 Claude Code 从 “通用助手” 变成 “领域专家” 的关键技术：

  1. 核心价值：把专业知识、工作流程打包成可复用的技能包，一次配置反复使用

  2. 零学习成本：用 find-skills，一句话就能搜索安装技能，不用手动配置

  3. 灵活扩展：从视频制作到代码审查，从前端美化到 PPT 生成，几乎可以无限扩展

  4. 团队沉淀：把团队的规范、经验沉淀到 Skills 里，保证所有人输出一致

  5. 与 MCP 互补：Skills 教 AI"怎么做"，MCP 给 AI"工具"，两者配合效果最佳

记住：如果你发现自己重复两次同样的指令，就应该创建一个 Skill！

# 开源
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

深入Android Framework：从核心原理到面试实战

avatar AtomGit开源社区

20260501_陈哲凡_研途灵伴项目周报3_管理后台与饮食纵切收口

本周重点推进管理后台业务功能与饮食模块纵切链路。完成管理后台从脚手架到真实业务页面的升级，实现题集、菜单、知识建议等8个模块的CRUD功能，统一交互模式与接口规范。同步完善后端/admin接口，强化字段校验与删除保护机制。打通饮食全链路，实现基于用户状态的智能推荐系统，采用规则评分+AI生成的双保险策略。特别注重前后端字段对齐，确保联调效率。技术栈主要使用FastAPI、React+TS、Ant

avatar AtomGit开源社区
cover

【腾讯位置服务开发者征文大赛】WorkBuddy + tencentmap skill 打造从“查地图“到“对话地图“—— AI 赋能 + 腾讯地图 API 打造智能出行规划助手

avatar AtomGit开源社区