教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载本篇指南系统讲解 Claude Code Skills技能机制的完整使用路径从理解为什么需要技能、安装find-skills并实战体验三款热门技能Remotion 视频制作、frontend-design 前端美化、frontend-slides 演示文稿到掌握SKILL.md文件结构与 Skills 与 MCP 的本质区别最终亲手创建自己的技能包并深入理解其基于提示词的动态上下文注入内部机制。学完本篇你将能把重复性的提示词固化为可复用、可共享、可版本控制的数字员工能力这也是 easy-vibe 项目第三阶段 core-skills 模块的核心目标之一。一、Skills 是什么为什么需要它Claude Code Skills是一种将专业知识、工作流程和最佳实践打包成可复用技能包的功能。你可以把它想象成给 Claude 配备的技能书——当你需要它完成特定任务时不再需要一遍遍解释要求而是直接按照技能中预先定义的标准来执行工作。在没有 Skills 之前使用 Claude Code 存在四个典型痛点重复指令每次都要解释代码要符合什么风格提交信息要怎么写知识无法沉淀团队成员各自摸索出的使用经验无法共享标准不统一不同人用 Claude产出结果可能完全不同效率低下常见任务每次都要从头解释。Skills 正是为解决这些问题而生它让 Claude 从通用助手变成有经验的团队成员——它知道你的项目规范、工作流程和最佳实践。为什么现在要学 SkillsSkills 正在成为 AI 工程师的必备能力原因包括社区热度高GitHub 上相关仓库星标快速增长如 OpenSkills 项目 7.2k stars、Obsidian Skills 9 天增长 6.6k stars 等社区现象官方支持Anthropic 官方维护 Skills 仓库Vercel 推出 Agent Skills 与find-skills工具实用性强从代码审查、Git 操作到视频制作、PPT 生成覆盖多种场景效率提升一次配置、反复使用让 Claude 真正成为你的数字员工。二、快速开始先装find-skills再实战三款热门技能理解了价值之后直接动手体验。本节带你安装第一个技能并完成多个实战任务。第一步安装 find-skills强烈推荐必装find-skills相当于 AI Agent 世界的应用商店搜索器当你需要完成某个任务但本地没有合适技能时它会自动搜索并推荐最合适的技能。安装命令npx skills add vercel-labs/skillsfind-skills -g -y安装完成后直接告诉 Claude 你的需求它会通过find-skills自动搜索。例如我需要做一个 React 组件的性能优化帮我找找有什么技能可以用为什么推荐先装它在此之前你需要手动在 GitHub 搜索、逐个复制安装配置、反复调试安装之后一句话描述需求、AI 自动搜索最匹配技能、一键安装即可用。Windows 用户注意官方版本对 Windows 支持有限社区提供了支持 CMD/PowerShell 并增加中文搜索的适配版本安装步骤为下载 Windows 版SKILL.md→ 替换C:/Users/你的用户名/.agents/skills/find-skills目录下的文件 → 重启 Claude Code 生效。实战一Remotion 视频制作技能在 Claude Code 中输入帮我找找 Remotion 相关的技能我想做视频find-skills会推荐remotion-dev/skills然后安装npx skills add remotion-dev/skills -gRemotion 是一个用 React 代码制作视频的框架。安装后即可用自然语言让 Claude 写视频代码例如用 Remotion 做一个视频 - 1920x10805 秒 - 一行文字 Hello World 从左边飞进来 - 同时带旋转和缩放效果 - 背景是渐变色还可以做数据可视化视频柱状图逐根生长、数字滚动增加、结尾显示增长 300%大字或多场景演示视频Logo 淡入 → 特性逐个出现 → CTA 按钮弹出场景间平滑过渡。Claude 生成的是完整 Remotion 项目运行方式创建新项目npx create-video my-video把 Claude 生成的代码复制进去预览npm start渲染视频npm run build实战二frontend-design 解决前端又丑又卡用自然语言描述问题例如我的网页看起来很土而且加载很慢帮我找找有什么技能可以用。find-skills会推荐官方技能anthropics/skills/frontend-design安装npx skills add anthropics/skills/frontend-design -g这个技能专门解决 AI 生成的界面看起来很土、千篇一律的问题帮助 Claude 设计出独特的视觉风格极简主义、复古未来主义、野兽派等、专业的配色字体、合理的间距布局以及流畅的交互动画。典型任务帮我重新设计这个页面要看起来很专业别像 AI 生成的做一个暗色主题的 Dashboard要有科技感实战三frontend-slides 快速制作精美 PPTfrontend-slides让你用自然语言创建精美的 HTML 演示文稿——即使完全不懂 CSS 或 JavaScript。它的核心设计是展示而非讲述当你描述不出想要的设计风格时它会生成 3 个视觉预览让你选择而不是让你抽象描述蓝色背景、大字体。手动安装mkdir -p ~/.claude/skills/frontend-slides # 下载 SKILL.md 和 STYLE_PRESETS.md 放入该目录三种典型使用场景从零创建演示文稿/frontend-slides 我想创建一个 AI 创业项目的融资路演 PPT大概 10 页转换 PowerPoint/frontend-slides 把我的 presentation.pptx 转成网页版演示快速生成风格预览/frontend-slides 我想做一个技术分享的 PPT先给我看看可选的视觉风格其内置视觉风格包括风格名称特点适用场景Neon Cyber未来科技感、粒子效果技术分享、AI 产品Midnight Executive高端商务、值得信赖商务汇报、融资路演Paper Ink编辑风格、文学气息内容创作、教育分享Swiss Modern简洁几何、包豪斯风格设计作品、极简主义Brutalist原始大胆、抓人眼球艺术展示、个性表达生成的演示文稿是单文件 HTML包含完整的样式和交互代码、键盘导航方向键/空格、触摸滑动支持、鼠标滚轮翻页、进度条与导航点、滚动触发动画和响应式设计!DOCTYPE html html langzh-CN head !-- 所有样式内联零依赖 -- /head body section classslide title-slide h1 classreveal你的标题/h1 /section !-- 更多幻灯片... -- /body /html推荐它的理由零依赖单个 HTML 文件长期可打开、视觉发现不用描述设计直接选择、PPT 转换保留原内容换新皮肤、生产级代码可访问性好、注释清晰、易于定制。安装后如何使用安装完成后无需额外配置向 Claude 提出相关任务时它会自动调用对应技能。查看已安装技能npx skills list三款技能横向对比Skills解决什么问题好玩程度实用程度remotion-dev/skills用代码做视频⭐⭐⭐⭐⭐⭐⭐⭐⭐anthropics/skills/frontend-design让前端变好看⭐⭐⭐⭐⭐⭐⭐⭐⭐frontend-slides快速制作精美 PPT⭐⭐⭐⭐⭐⭐⭐⭐⭐三、Skills 核心概念与 SKILL.md 文件结构核心概念Skills 是存储在文件系统中的技能包包含SKILL.md技能的定义文件必需scripts/辅助脚本可选templates/输出模板可选references/参考文档可选examples/示例文件可选。Skills vs 提示词Prompts提示词Skills临时性的每次都要重复说持久化的写一次反复用存在对话历史中占用 Token按需加载节省 Token无法在会话间共享可以在团队中共享难以版本控制可以用 Git 管理两种类型的 Skills全局 Skills个人存放于~/.claude/skills/作用范围覆盖所有项目适合个人通用技能项目 Skills团队存放于项目目录/.claude/skills/作用范围仅限当前项目适合团队共享与项目特定规范。SKILL.md 文件结构一个完整的技能目录如下my-skill/ ├── SKILL.md # 必需技能定义文件 ├── scripts/ # 可选辅助脚本 ├── templates/ # 可选输出模板 ├── references/ # 可选参考文档 └── examples/ # 可选示例文件SKILL.md分为两部分YAML Frontmatter元数据与Markdown 内容指令--- name: skill-name # 技能名称会变成 /skill-name 命令 description: 简短描述 # 用于 Claude 自动匹配触发 category: development # 分类 tags: # 标签 - code - automation ---# 技能标题 ## 使用场景 什么时候用这个技能 ## 执行步骤 1. 第一步 2. 第二步 ## 注意事项 - 注意点 1 - 注意点 2关键字段说明字段必填说明name是技能名称只能用小写字母、数字、连字符description是技能描述越具体越容易被 Claude 自动匹配category否分类标签tags否更多分类标签allowed-tools否允许使用的工具无需权限即可用四、Skills vs MCP本质区别与协同方式很多初学者混淆 Skills 与 MCP其实二者完全不同维度SkillsMCP本质知识和流程工具和接口提供什么告诉 AI 怎么做给 AI 能用什么存储位置skills/目录MCP 服务器配置方式Markdown 文件JSON 配置文件触发方式/skill-name或自动识别通过配置自动加载形象比喻如果把 Claude 比作一个工作人员MCP 是配给他的工具扳手、电脑、访问权限Skills 是给他的操作手册怎么做代码审查、怎么提交代码。两者不是竞争关系而是互补关系协同流程为用户任务 → Claude 识别需求 ↓ 加载相关 Skills知道怎么做 ↓ 通过 MCP 调用工具有工具可用 ↓ 完成任务以代码审查为例Skills 定义审查步骤、检查清单与输出格式MCP 提供访问 GitHub PR、获取代码 diff 的能力。Skills 告诉 Claude 怎么审查MCP 给 Claude 访问代码的能力。选择建议需要定义工作流程 → 用 Skills需要访问外部数据 → 用 MCP两者都需要 → 配合使用。在 easy-vibe 仓库中可以看到真实的 MCP 配置示例config/mcporter.json 中的mcpServers字段定义了一个本地 MCP 服务器autoglm-browser-agent通过命令启动并携带--start_url、--max_steps、--log_dir等启动参数。这与 MCP 完全指南 中介绍的项目级配置mcpServersJSON 结构完全一致——Skills 负责知识MCP 负责能力二者共同构成完整的 Agent 工作流。五、如何获取 Skills官方、社区与搜索技巧官方资源Anthropic 官方维护的 Skills 仓库含 skill-creator、mcp-builder、slack-gif-creator 等官方示例技能Claude Code 官方文档 Skills 章节。社区资源按名检索即可资源说明claude-code-best-practice社区维护的资源集合包含 Skills、Agents、Hooks 等everything-claude-code综合工具包包含预配置 Skillsawesome-agent-skills精选 Skills 资源列表jeffallan/claude-skills66 个专业技能300 参考文档GitCode/awesome-claude-skills开源精选集合搜索技巧使用具体关键词react testing 优于 testing组合「领域 动作」nextjs deploy、typescript lint优先选择高安装量的技能10K 说明经过实战检验关注 Trending 榜单发现新兴技能。六、如何创建自己的 Skills两种方法与完整实例创建技能有两种方法直接让 Claude 帮忙创建或使用专门的skill-creator工具。方法一直接让 Claude 创建用自然语言告诉 Claude 需求即可例如请帮我创建一个名为 format-code 的 skill功能是自动格式化代码。 要求 1. 自动检测编程语言类型 2. 应用对应的格式化规则 3. 返回格式化前后的 diffClaude 会自动创建目录结构、生成SKILL.md、填写 YAML frontmatter、编写技能内容。适合快速创建简单技能、不熟悉格式时快速迭代。方法二使用 skill-creatornpx skills add anthropics/skillsskill-creator -g或安装整个官方 skills 仓库npx skills add anthropics/skills -g。然后在对话中触发/skill-creator按提示填写技能名称、功能描述、使用场景、执行步骤。它会引导你明确技能用途、生成SKILL.md草稿、创建测试用例并运行评估优化适合创建复杂技能或有规范化、测试验证需求时。方法一直接创建方法二skill-creator快速简单步骤引导适合简单技能适合复杂技能直接对话完成规范流程灵活修改有测试验证技巧如何写好需求好的需求描述明确执行步骤与注意事项创建一个 git-commit skill功能是自动提交代码。 执行步骤 1. 检查有哪些文件被修改 2. 生成符合 Conventional Commits 规范的提交信息 3. 执行 git commit 4. 询问是否需要 push 注意事项 - 提交前先检查是否有敏感信息 - 不要提交 dist/node_modules/ 等目录不好的需求描述如帮我写一个提交代码的 skill——太模糊Claude 不知道具体要做什么。实例 1代码审查 Skillreview-prmkdir -p ~/.claude/skills/review-prcat ~/.claude/skills/review-pr/SKILL.md EOF --- name: review-pr description: 审查 Pull Request 的代码质量、安全性和测试覆盖率 --- 你是一位资深的代码审查者。 ## 审查流程 1. **代码风格检查** - 代码是否符合团队规范 - 命名是否清晰 - 注释是否充分 2. **安全性检查** - 是否有安全漏洞 - 敏感信息是否暴露 - 输入验证是否完善 3. **测试检查** - 是否有足够的测试 - 测试用例是否覆盖边界情况 - 测试是否可运行 4. **总体评价** - 优点是什么 - 需要改进的地方 - 建议是否批准合并 ## 输出格式 请以清晰的结构输出审查结果使用列表形式。 EOF使用方式/review-pr 请审查当前分支的 PR。实例 2Git 自动提交 Skillgit-commitmkdir -p ~/.claude/skills/git-commit cat ~/.claude/skills/git-commit/SKILL.md EOF --- name: git-commit description: 自动检测修改、生成提交信息并提交代码 --- 你是一位熟练的 Git 用户。 ## 执行流程 1. **检查修改** 运行 git status 查看修改的文件 运行 git diff 查看具体改动 2. **生成提交信息** 分析改动的性质 生成符合 Conventional Commits 格式的提交信息 格式type(scope): description 3. **安全检查** 检查是否有敏感信息密钥、密码、token 检查是否包含了不该提交的目录 4. **确认后执行** 显示提交信息供确认 执行 git add 和 git commit 询问是否需要 push ## 注意事项 - 不要提交 node_modules/、dist/、.next/ 等目录 - 提交前先运行测试确保代码可用 - 提交信息要清晰说明改动内容 EOF这一技能与 easy-vibe 仓库的提交规范高度契合AGENTS.md 中明确规定Commits follow a Conventional Commits stylefeat: ...、fix: ...、docs: ...等格式——你完全可以用上述git-commit技能把这种团队规范固化为可自动执行的流程。实例 3测试生成 Skillgen-testmkdir -p ~/.claude/skills/gen-test cat ~/.claude/skills/gen-test/SKILL.md EOF --- name: gen-test description: 为代码自动生成单元测试确保功能正确性 --- 你是一位测试开发工程师。 ## 工作流程 1. **分析代码** - 理解函数/类的功能 - 识别输入和输出 - 找出边界情况 2. **生成测试** - 使用合适的测试框架 - 覆盖正常情况 - 覆盖边界情况 - 覆盖异常情况 3. **验证测试** - 确保测试可以运行 - 确保测试能检测到问题 - 不要过度模拟实现 ## 测试框架 - JavaScript/TypeScriptJest 或 Vitest - Pythonpytest - Gotesting 包 ## 输出格式 先输出测试代码然后说明如何运行测试。 EOF实例 4文档生成 Skillgen-readmemkdir -p ~/.claude/skills/gen-readme cat ~/.claude/skills/gen-readme/SKILL.md EOF --- name: gen-readme description: 为项目自动生成 README 文档 --- 你是一位技术文档专家。 ## 工作流程 1. **分析项目** - 扫描项目目录结构 - 查看 package.json 或其他配置文件 - 阅读现有代码 2. **生成内容** - 项目简介 - 安装方法 - 使用说明 - API 文档 - 开发指南 3. **格式化** - 使用清晰的章节结构 - 添加代码示例 - 添加适当的徽章 - 添加许可证信息 ## 标准 README 结构 - 项目标题和简介 - 功能特点 - 安装方法 - 快速开始 - 使用说明 - API 文档 - 开发指南 - 贡献指南 - 许可证 EOF七、进阶技巧Skills 与 Hooks、Commands、团队协作Skills 与 Hooks 配合Hooks 可在特定事件时自动执行操作结合 Skills 实现更强大的自动化。例如代码保存后自动格式化调用 format-code 技能// .claude/hooks.json { hooks: { PostToolUse: [{ matcher: { tool_name: Edit }, hook: { type: command, command: /format-code // 调用 format-code skill } }] } }Skills 与 Commands 配合Commands 是简单的快捷命令Skills 是复杂的工作流两者可配合使用。团队协作共享项目 Skills将 Skills 放入.claude/skills/目录 → 提交到 Git 仓库 → 团队成员克隆项目后即可使用。版本控制Skills 可以像代码一样版本控制每个 commit 记录变更可随时回滚。八、常见问题排查Q1Skill 没有被触发可能原因YAML frontmatter 格式错误、description 不够具体、Claude Code 没有重启。解决方法检查 YAML 格式、改进 description 包含具体使用场景、重启 Claude Code。Q2description 怎么写才准确好的 description 包含技能的具体功能、使用场景当用户提到...、触发关键词。不好的例子description: 审查代码好的例子description: 审查 Pull Request 的代码。当用户提到 PR、review、代码审查时触发。Q3Skills 和 Commands 的区别CommandsSkills简单快捷命令完整工作流单个.md文件目录结构SKILL.md 可选文件手动触发可自动触发适合简单操作适合复杂流程Q4如何调试 Skill使用/skills查看技能是否被识别直接输入技能名称手动触发检查SKILL.md文件内容是否正确查看 Claude Code 日志。九、深入阅读Claude Skills 的内部机制理解了怎么用之后再看为什么这样设计。第一性原理基于提示词的动态上下文注入Skills 不是可执行代码。它本质上是高级指令Prompt在需要时被植入到 Claude 的上下文中。这种设计被称为Prompt-based Dynamic Context Injection Meta-Tool Architecture基于提示词的动态上下文注入与元工具架构┌─────────────┐ ┌─────────────┐ ┌──────────────┐ │ 用户请求 │ ─── │ LLM 匹配 │ ─── │ 触发 Skill │ └─────────────┘ │ Skill 描述 │ └──────────────┘ └─────────────┘ │ ▼ ┌──────────────┐ │ 注入完整 │ │ 指令内容 │ └──────────────┘ │ ▼ ┌──────────────┐ │ 执行任务 │ └──────────────┘三层渐进式加载架构Token 优化为了管理大量 Skills 而不消耗过多 TokenClaude 采用三层加载机制层级内容加载时机Token 消耗Layer 1: 元数据YAML frontmattername descriptionClaude 启动时~30-50 tokens/skillLayer 2: 指令完整 SKILL.md 内容Skill 被触发时~5,000 tokensLayer 3: 资源脚本、模板、参考文档按需通过文件系统访问不占上下文设计优势假设有 100 个 Skills启动时仅消耗约 3,000-5,000 tokens元数据只有被触发的 Skill 才加载完整内容参考文档等资源永远不会被完整加载到上下文。对比无 Skills 的情况每次对话需要 50,000 tokens 描述所有能力而使用 Skills 后每轮对话可节省 40,000 tokens。双上下文注入机制当 Skill 被激活时系统同时进行两次修改1. 对话上下文注入——用户看到可见消息如The pdf skill is loadingAI 实际收到隐藏元消息标记为isMeta: true用户界面不显示内容为完整 SKILL.md 指令// 用户看到的可见消息 command-messageThe pdf skill is loading/command-message // AI 实际收到的隐藏元消息 { isMeta: true, // 标记为元消息用户界面不显示 content: # PDF 分析专家指令 你是一位专业的 PDF 分析专家。工作流程 1. 使用 pdftotext 提取文本 2. 分析文档结构 3. 生成摘要报告 ... // 完整的 SKILL.md 内容可能数千字 }2. 执行上下文修改——除注入指令外Skill 还能动态修改 Claude 的环境修改类型示例说明工具权限allowed-tools: Bash(pdftotext:*)临时授予特定工具访问权限模型切换从 Sonnet 切换到 Opus某些复杂任务需要更强推理能力上下文隔离创建子会话空间避免污染主对话上下文纯 LLM 推理的路由机制Claude Skills 没有硬编码路由。传统方法使用嵌入向量匹配、分类器、正则/关键词匹配或单独的路由算法而 Claude Skills 采用纯 LLM 推理利用 Claude 自身的语言理解能力将用户意图匹配到 Skill description自动处理多语言、同义词与模糊描述无需额外维护。工作流程所有 Skill 的 name 和 description 被格式化到 Skill 工具的描述中 → Claude 收到用户消息、可用工具列表含 Skill meta-tool、Skill 列表name description→ 自然语言理解匹配意图 → 匹配成功时调用command: skill-name。文件解析机制与完整执行流程SKILL.md 的解析流程Claude Code 启动 → 扫描~/.claude/skills/和.claude/skills/目录 → 使用 gray-matter 库解析每个 SKILL.md 的 YAML frontmatter → 验证必需字段name 最大 64 字符仅限小写字母、数字、连字符description 用于 LLM 自动匹配→ 提取元数据构建 Skill 列表只加载 name description不加载正文。一个完整的执行流程示例帮我分析这个 PDF 文件Step 1: LLM 决策 Claude 在 Skill 列表中找到 pdf skill 的描述 description: 分析 PDF 文档内容、提取文本、生成摘要 Step 2: 系统介入 Claude Code 执行 1. 读取 ~/.claude/skills/pdf/SKILL.md 2. 生成可见消息The pdf skill is loading 3. 生成隐藏元消息完整的 SKILL.md 内容 4. 修改会话权限allowed-tools [Bash(pdftotext:*)] Step 3: LLM 执行 上下文包含原始用户请求、PDF 专家工作流指令、pdftotext 访问权限 Claude 执行提取文本 → 分析结构 → 生成摘要 → 展示结果 Step 4: 用完即弃 任务完成后Skill 的完整内容从上下文中移除 只保留对话历史不保留完整 Skill 指令核心设计创新与学术基础创新点传统方法Skills 方法优势能力来源固化在模型权重中动态加载的提示词可扩展、可更新Token 效率所有能力常驻内存按需加载节省 80% tokens知识管理分散在对话历史中模块化的文件系统可版本控制、可共享生命周期持续占用用完即弃上下文更清爽其设计理念源于多项研究强化学习Voyager 2023积累技能库的概念、认知架构ACT-R、Soar程序性记忆与陈述性记忆分离、分层策略Options Framework三层渐进式加载。核心思想转变是传统方案要求AI 记住一切而 Skills 让AI 知道去哪里找专业知识更接近人类专家的思维方式。与 Agent Skills 开放标准的关系Claude Skills 遵循 Agent Skills 开放标准这意味着跨平台兼容Cursor、Windsurf、Aider 等工具都支持、统一的文件格式SKILL.md 结构标准、可互操作不同工具间可共享 Skills。该标准定义必需SKILL.md文件metadata instructions可选scripts/可执行代码、references/知识库文档、assets/模板和资源。十、总结从通用助手到团队专家Skills 是让 Claude Code 从通用助手变成团队专家的关键。通过 Skills 你可以标准化工作流程、复用团队知识、提高协作效率、减少重复解释。记住一个判断标准如果你发现自己重复两次同样的指令就应该考虑创建一个 Skill。从安装find-skills开始体验几款社区热门技能建立直觉再仿照上文四个完整实例动手编写自己的第一个SKILL.md——这就是掌握技能机制的最短路径。建议继续学习同模块的 MCP 完全指南 理解工具层能力并结合 Agent Teams、工作流 等章节构建完整的 Agent 化开发体系。赞分享教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载相关推荐easy-vibe 第三阶段核心技能Claude Code Skills 技能包完全指南——安装实操、SKILL.md 编写与动态上下文注入机制easy vibe 第三阶段核心技能Claude Code Skills 技能包完全指南——安装实操、SKILL.md 编写与动态上下文注入机制 本文基于 e教程文档人工智能Vibe CodingViMax AI视频生成快速上手一句话创意到完整视频的3步教程ViMax AI视频生成快速上手一句话创意到完整视频的3步教程 ViMax 是一个多智能体 AI 视频生成框架你输入一句话创意或现成剧本它自动完成剧本创作教程文档easy-vibe Stage 3 进阶开发全景指南从 Claude Code 核心技能到跨平台原生应用实战easy vibe Stage 3 进阶开发全景指南从 Claude Code 核心技能到跨平台原生应用实战 本文是 easy vibeAI 原生产品开发者教程文档人工智能Vibe Coding创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考