Claude Skill 完全入门教程：从零开始打造你的第一个Skill

为什么需要了解 Claude Skill？

你是否遇到过这样的困扰：每次让Claude写代码，都要重复粘贴团队规范；好不容易调教好的提示词，换个项目就完全失效；团队里每个人用AI的方式五花八门，输出质量参差不齐。

Claude Skill 正是为解决这些问题而生。它能让你的AI经验固化下来，一次教学，永久受益。本文将带你从零开始，亲手创建第一个属于自己的Skill。

Claude Skill 到底是什么？

想象你招了一位天才实习生——Claude，他智商极高但不懂你们公司的业务。传统的做法是每次布置任务都口头交代一遍（Prompt），而 Agent Skill 则是给他一本完整的标准作业程序（SOP）：

• 📋 入职手册（SKILL.md）：包含岗位描述、工作流程、注意事项
• 🧰 工具箱（scripts/）：处理特定任务的脚本和代码
• 📚 参考资料（references/）：行业规范、模板素材、API文档

核心定义

从技术角度讲，Skill 就是一个标准化的文件夹，里面包含教Claude如何处理特定任务的指令集。它的核心价值在于：

• 一次教学，永久受益：不用每次对话都重复说明
• 跨平台通用：Claude.ai、Claude Code、API完全兼容
• 可组合：多个Skills可同时加载协作

Skill vs Prompt vs MCP

很多初学者容易混淆这几个概念，我用一张表帮你理清：

💡 MCP + Skill 才是王炸组合：MCP提供工具（如数据库连接），Skill教AI怎么按你们公司的规范查数据、生成报表、处理异常。

Skill 的核心设计三原则

理解这三个原则，你就能把握Skill设计的精髓：

渐进式披露（Progressive Disclosure）

这是Skills系统最核心的架构设计。它不是把所有信息一次性塞给Claude，而是分三层加载，根据需要逐步展示：

核心公式：总Token消耗 = 100词（metadata） + 5000词（body） + 按需资源

可组合性（Composability）

用户可以同时启用多个Skills，多个Skills可以组合调用。

可移植性（Portability）

同一个Skill在所有环境中表现一致，例如：

• Claude.ai（网页版）：Settings → Capabilities 中启用
• Claude Code（桌面应用）：复制到 ~/.claude/skills/
• Claude API（开发者集成）：调用时指定 skills 参数

Skill 的标准目录结构

一个标准的Skill文件夹长这样：

your-skill-name/          # 文件夹名：必须小写+连字符（kebab-case）
├── SKILL.md              # 必需 - 主文件（必须大写S，必须这个文件名）
├── scripts/              # 可选 - 可执行代码（Python/Bash等）
├── references/           # 可选 - 参考文档（按需加载）
└── assets/               # 可选 - 模板、资源文件（输出用）

⚠️ 重要规则

实战示例

比如作为前端开发，我需要写一个代码审查 Skill 来提高代码的质量，一个完整的 SKILL.md 文件应该是：

---
name: code-review
description: 前端代码审查专家，当用户要求审查前端代码（React/Vue/TypeScript）或提供PR链接时，按本技能规范执行全面审查。
---
 
# 前端代码审查技能
 
你是一位资深前端技术负责人，请严格按照以下标准审查代码，并输出结构化报告。
 
## 审查范围
- 框架：React 18+ / Vue 3+ / 原生TypeScript
- 风格：ESLint + Prettier 团队配置（见 references/前端代码规范.md）
- 重点关注：性能、可维护性、安全性、无障碍（a11y）
 
## 审查流程（必须逐步执行）
 
1. **理解上下文**
   - 读取变更文件列表
   - 判断变更目的（新功能/重构/修复bug）
   - 若用户提供PR描述，结合描述分析
 
2. **静态检查（自动化优先）**
   - 若存在 `scripts/check_line_length.py`，运行并纳入结果
   - 人工检查：命名一致性、组件拆分粒度、重复代码
 
3. **逐文件深度审查**
   对每个变更文件，检查以下维度：
 
   ### React / Vue 专项
   - 是否正确使用hooks/composition API
   - 避免在渲染函数中创建新对象/函数（导致子组件重渲染）
   - useEffect / watch 依赖项是否完整
   - 列表渲染是否带唯一且稳定的 `key`
 
   ### TypeScript
   - 禁止滥用 `any`（如需使用，注释说明原因）
   - 是否正确使用联合类型/类型守卫
   - 避免过度使用 `as` 断言
 
   ### 性能
   - 图片是否懒加载
   - 大列表是否虚拟滚动
   - 是否合理使用 `useMemo` / `useCallback` / `computed`
 
   ### 安全性
   - 禁止 `dangerouslySetInnerHTML`（除非对内容做了净化）
   - 检查XSS风险（用户输入转义）
 
   ### 可维护性
   - 单个组件不超过300行（不含样式）
   - 复杂逻辑是否抽取为自定义hook/composable
   - 注释是否解释“为什么”而非“做什么”
 
4. **输出审查报告**
   使用以下Markdown模板：
 
   ```markdown
   ## 📋 代码审查报告
   **变更概述**：[简述变更目的]
 
   ### ✅ 优点
   - ...
 
   ### ⚠️ 待改进（按优先级排序）
   #### 🔴 高优先级（必须修改）
   - `文件路径:行号` - 问题描述 | 建议方案
   #### 🟡 中优先级（建议修改）
   - ...
   #### 🟢 低优先级（可选优化）
   - ...
 
   ### 📊 质量评分
   | 维度 | 评分(1-5) | 说明 |
   |------|-----------|------|
   | 可维护性 | 4 | ... |
   | 性能 | 3 | ... |
   | 安全性 | 5 | ... |
 
   ### 💡 最佳实践建议
   - ...

然后可以把这个 SKILL.md 放到项目的目录 ~/.claude/skills/code-review 下面，当你跟 Claude 说帮你 CR 代码时，就会自动调用这个 Skill 来执行相关操作，你也可以手动运行 /code-review。

常见问题解答

Q1: Skill 和 Command 是什么关系？

A: Command 已合并到 Skill 体系。旧Command文件（.claude/commands/）依然兼容，但建议新功能直接创建Skill，因为它支持脚本、多文件、子代理等高级能力。Command是你主动触发，Skill是AI按需自动加载。

Q2: Skill 会自动触发吗？

A: 是的。Claude扫描所有Skill的元数据，当用户请求在语义上与某个Skill的 description 匹配时，会请求用户确认后加载完整指令。这种"按需加载"机制有效节省上下文窗口。

Q3: 可以同时使用多个Skill吗？

A: 可以。Skills具有可组合性，多个相关Skill可同时激活处理复杂任务（如 Theme Factory + Canvas Design）。

Q4: 有哪些学习资源？

• 官方免费课程：DeepLearning.AI 平台的《Agent Skills with Anthropic》（2小时19分）
• 官方完整指南：《The Complete Guide to Building Skills for Claude》PDF
• GitHub仓库：anthropics/skills（包含大量示例）

总结

Agent Skills的正式发布，标志着AI协作从提示词工程正式迈入技能工程的全新范式。它将人类专家的经验、标准化流程与行业最佳实践，封装成AI可理解、可执行、可复用的数字资产。

核心价值：

• 降本增效：通过渐进式披露、按需加载机制，大幅减少Token消耗
• 跨平台互通：作为开放标准，实现"一次构建、多端复用"
• Skill市场：构建起类似VS Code插件市场的Skill生态

现在就开始吧！ 花15-30分钟，用本文的步骤创建你的第一个Skill。一旦尝到"一次教学，永久受益"的甜头，你就再也回不去了。