写在前面
这是一系列 Claude Code 教程的最后一篇！前面我们学习了从入门到高级的各种技能，今天我们要讲解如何创建属于自己的自定义 Skills，并提供完整的命令速查表。让我们开始吧！
🎯 一、为什么要自定义 Skills？
Skills 的价值
预设 Skills：
- 通用能力，平均水平
- 不够深入特定领域
自定义 Skills：
- 深度定制，完全符合你的需求
- 沉淀个人/团队最佳实践
- 可重复使用
常见使用场景
| 场景 | 功能 |
|---|---|
| 🎨 设计系统 | 封装公司的 UI 设计规范 |
| 🔧 开发框架 | 封装标准的项目结构和代码模板 |
| 📋 工作流程 | 自动化特定的开发流程 |
| 📚 领域知识 | 沉淀专业领域的知识和经验 |
📦 二、Skill 文件结构
标准目录结构
my-custom-skill/
├── SKILL.md # 主文件（必需）
├── references/ # 参考文档
│ ├── overview.md # 概述
│ └── examples.md # 示例
├── patterns/ # 代码模式
│ ├── component.tsx # 组件模板
│ └── api.ts # API 模板
├── examples/ # 示例代码
└── README.md # 说明文档
核心文件：SKILL.md
---
title: my-react-component
description: 创建标准的 React 组件
---
# React 组件模板
## 用途
快速创建符合公司规范的 React 组件
## 使用方法
告诉 Claude Code："使用 my-react-component 技能创建组件"
## 生成内容
- 组件代码（TypeScript）
- 类型定义
- Storybook 故事
- 单元测试模板
- 使用文档
## 代码模板
```typescript
// 组件模板
interface {{ComponentName}}Props {
className?: string;
children?: React.ReactNode;
}
export function {{ComponentName}}({
className,
children
}: {{ComponentName}}Props) {
return (
<div className={className}>
{children}
</div>
);
}
* * *
## 🚀 三、创建第一个 Skill
### 步骤一：初始化
使用 CLI 初始化新技能
npx skills init my-custom-skill
进入目录
cd my-custom-skill
### 步骤二：编写 SKILL.md
title: my-react-component description: 创建标准的 React 组件
React 组件模板
用途
快速创建符合公司规范的 React 组件
使用方法
告诉 Claude Code："使用 my-react-component 技能创建组件"
生成内容
- 组件代码（TypeScript）
- 类型定义
- Storybook 故事
- 单元测试模板
- 使用文档
### 步骤三：发布技能
初始化 Git
git init git add . git commit -m "Add my custom skill"
推送到 GitHub
git remote add origin github.com/username/my… git push -u origin main
安装使用
npx skills add username/my-custom-skill@my-react-component
* * *
## 📝 四、Skill 编写规范
### 1️⃣ 名称规范
✅ 正确的命名
- react-component-template
- company-design-system
- api-error-handler
❌ 避免的命名
- MySkill（太笼统）
- test（太通用）
- update（看不懂）
### 2️⃣ 描述规范
✅ 清晰描述
用途
这个 Skill 用于创建标准的 React 函数组件，包含：
- 完整的 TypeScript 类型定义
- Storybook 故事配置
- Jest 单元测试模板
❌ 模糊描述
用途
用于开发 React 组件
* * *
## 📂 五、Skills 目录结构详解
### Claude Code 的 Skills 存储位置
Claude Code 的 Skills 存储在两个主要位置：
~/.agents/skills/ # 用户安装的 skills（12个） ~/.claude/skills/ # 系统/自定义 skills（22个）
#### 1. 用户 Skills 目录（~/.agents/skills/）
| Skill 名称 | 功能描述 |
| :---------------------------- | :----------------------- |
| `pdf` | PDF 文件处理（读取、合并、拆分、OCR 等） |
| `docx` | Word 文档创建、编辑、转换 |
| `skill-creator` | 创建和优化自定义 Skills |
| `find-skills` | 发现和安装新的 Skills |
| `vercel-react-best-practices` | React/Next.js 性能优化最佳实践 |
| `browser-use` | 浏览器自动化操作 |
| `baoyu-post-to-wechat` | 微信公众号发布 |
| `xiaohongshu` | 小红书内容工具 |
| `doubao-watermark-remover` | 去除豆包 AI 水印 |
| `prd` | 生成产品需求文档 |
| `prd-to-issues` | 将 PRD 转换为 GitHub Issues |
| `breakdown-feature-prd` | 基于 Epic 创建 PRD |
#### 2. Superpowers Skills（~/.claude/skills/superpowers/）
这是 Claude Code 的核心技能系统，包含：
| Skill | 功能 |
| :------------------------------- | :-------------- |
| `using-superpowers` | 如何使用 Skills 系统 |
| `brainstorming` | 创意头脑风暴 |
| `systematic-debugging` | 系统化调试方法 |
| `test-driven-development` | TDD 开发流程 |
| `using-git-worktrees` | Git Worktree 使用 |
| `dispatching-parallel-agents` | 并行任务分发 |
| `executing-plans` | 执行计划 |
| `finishing-a-development-branch` | 完成开发分支 |
| `requesting-code-review` | 请求代码审查 |
| `receiving-code-review` | 接收代码审查 |
| `writing-skills` | 编写 Skills |
| `verification-before-completion` | 完成前验证 |
| `subagent-driven-development` | 子代理开发模式 |
* * *
## ✏️ 六、如何编辑自己的 Skills（详细教程）
### 方式一：直接编辑 SKILL.md 文件
每个 Skill 的核心是 `SKILL.md` 文件，直接编辑即可。
#### 步骤：
1. 找到 Skills 目录
cd ~/.agents/skills/
2. 进入目标 Skill 目录
cd pdf/
3. 编辑 SKILL.md
vim SKILL.md
或使用任何编辑器
#### 案例：修改 PDF Skill 添加新功能
假设你想在 PDF Skill 中添加「提取图片」功能：
PDF Processing Guide
Overview
...（原有内容）
新增功能：提取图片
使用 pdfimages
pdfimages -j input.pdf output_prefix
使用 Python
from pypdf import PdfReader
reader = PdfReader("document.pdf")
for page in reader.pages:
for img in page.images:
with open(f"image_{img.name}", "wb") as f:
f.write(img.data)
### 方式二：使用 skill-creator Skill
这是更专业的 Skill 编辑方式：
#### 启动 Skill
告诉 Claude Code："我想创建/编辑一个 skill"
#### 使用 skill-creator 的流程
- 明确意图 → 2. 访谈调研 → 3. 编写 SKILL.md → 4. 测试用例 →
- 运行评估 → 6. 改进优化 → 7. 打包发布
#### 案例：创建一个「React 组件模板」Skill
**第一步：明确意图**
| 问题 | 答案 |
|:-----|:-----|
| 这个 Skill 做什么？ | 快速创建标准 React 组件 |
| 什么时候触发？ | 用户说"创建组件"、"新建组件" |
| 输出什么？ | 完整的组件文件（TSX + 类型 + 样式） |
**第二步：编写 SKILL.md**
```markdown
---
name: react-component-template
description: 创建标准的 React 函数组件，包含 TypeScript 类型定义、CSS 模块样式、Storybook 故事和 Jest 测试。当用户请求创建新的 React 组件、组件模板、组件脚手架时使用此 Skill。
---
# React 组件模板
## 触发条件
- 用户说"创建组件"
- 用户说"新建 React 组件"
- 用户说"生成组件模板"
## 输出结构
- ComponentName.tsx # 组件主文件
- ComponentName.module.css # CSS 模块
- ComponentName.stories.tsx # Storybook
- ComponentName.test.tsx # 单元测试
- index.ts # 导出文件
## 模板代码
...
第三步：测试运行
# 测试触发
"创建一个用户卡片组件"
# 应该触发 Skill 并生成完整文件
方式三：使用 skill-creator 的描述优化功能
Skill 的 description 字段决定是否触发，优化它很重要：
# 运行优化脚本（使用 Claude Code）
python -m scripts.run_loop \
--eval-set ~/eval_set.json \
--skill-path ~/.claude/skills/my-skill \
--model claude-opus-4-5 \
--max-iterations 5
🚀 七、常用热门 Skills 使用指南
1. PDF Skill（使用率最高）
触发方式：直接说"处理 PDF"相关需求
| 功能 | 命令/方法 |
|---|---|
| 读取 PDF | pdfplumber.open("file.pdf") |
| 提取文本 | page.extract_text() |
| 提取表格 | page.extract_tables() |
| 合并 PDF | writer.add_page(page) |
| 拆分 PDF | 遍历 pages 逐个写入 |
| 添加水印 | page.merge_page(watermark) |
| OCR 识别 | pytesseract.image_to_string() |
案例：
用户：帮我把这个 PDF 的表格提取到 Excel
→ 自动触发 pdf skill
→ 使用 pdfplumber 提取表格
→ 转换为 DataFrame
→ 保存为 Excel
2. DOCX Skill（办公必备）
触发方式：提及 Word、docx、报告、文档
| 功能 | 方法 |
|---|---|
| 创建文档 | docx-js 库 |
| 编辑现有文档 | 解压→编辑 XML→重新打包 |
| 转换格式 | pandoc 或 soffice |
| 接受修订 | accept_changes.py |
案例：
用户：帮我写一份项目报告
→ 自动触发 docx skill
→ 询问报告结构和内容
→ 使用 docx-js 生成 .docx
→ 验证并返回文件
3. Brainstorming Skill（创意神器）
触发方式：任何需要思考、规划、创意的地方
使用流程：
1. 加载 skill
2. 分析用户需求
3. 探索意图和潜在问题
4. 提出方案
5. 等待确认后执行
案例：
用户：我想做一个 AI 助手
→ 触发 brainstorming
→ 反问：你希望 AI 助手做什么？什么场景使用？目标用户是谁？
→ 根据回答提供详细方案
4. Vercel React Best Practices（前端优化）
触发方式：React、Next.js、前端性能相关
包含 50+ 优化规则：
- 服务端渲染
- 重新渲染优化
- bundle 大小优化
- 异步加载
- 缓存策略
5. Find Skills（技能发现）
触发方式："有没有做 X 的 skill"、"如何做 Y"
使用方法：
# 搜索 skills
npx skills find [关键词]
# 查看排行榜
# https://skills.sh/
# 安装 skill
npx skills add <owner/repo@skill> -g -y
💡 八、实战：创建自定义 Skill 完整案例
案例：创建「公司 API 客户端」Skill
第一步：创建目录结构
mkdir -p company-api-client/{SKILL.md,references,scripts}
第二步：编写 SKILL.md
---
name: company-api-client
description: 生成符合公司规范的 API 客户端代码，包含 Axios 实例配置、请求/响应拦截器、类型定义、错误处理。用于创建新的 API 服务、API 客户端、HTTP 请求模块时触发。
---
# 公司 API 客户端生成器
## 用途
快速生成符合公司技术规范的 API 客户端代码
## 输出内容
1. apiClient.ts - Axios 实例配置
2. interceptors.ts - 请求/响应拦截器
3. types.ts - TypeScript 类型定义
4. errors.ts - 错误处理类
5. README.md - 使用文档
## 模板
### Axios 实例
```typescript
import axios from 'axios';
const apiClient = axios.create({
baseURL: process.env.API_BASE_URL || 'https://api.company.com',
timeout: 30000,
headers: {
'Content-Type': 'application/json',
},
});
请求拦截器
apiClient.interceptors.request.use(
(config) => {
const token = getAuthToken();
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => Promise.reject(error)
);
#### 第三步：添加参考资料
创建 `references/endpoints.md`：
```markdown
# 公司 API 端点
## 认证
- POST /auth/login
- POST /auth/refresh
## 用户
- GET /users/me
- PUT /users/me
第四步：测试使用
# 告诉 Claude Code
"创建一个用户 API 客户端"
# → 自动触发 skill
# → 生成完整 API 客户端代码
第五步：打包发布（可选）
python -m scripts.package_skill company-api-client/
# → 生成 company-api-client.skill
📊 九、Claude Code 配置与文件结构
Skills 存储目录
Claude Code 的 Skills 存储在以下位置：
~/.claude/skills/ # 用户安装的 skills
~/.claude/settings.json # 主配置文件
CLAUDE.md（项目级配置）
在项目根目录创建 CLAUDE.md 可以为项目设置自定义指令：
# 项目名称
- 框架：React + TypeScript
- 代码风格：遵循 Airbnb 风格指南
# 常用命令
- npm run dev # 启动开发服务器
- npm run build # 构建生产版本
- npm test # 运行测试
# 注意事项
- 使用pnpm而非npm
- 组件放在 src/components 目录
settings.json（全局配置）
{
"model": "claude-opus-4-5",
"maxTokens": 8000,
"temperature": 0.7
}
关键配置说明
| 配置项 | 说明 |
|---|---|
model | 默认使用的模型 |
maxTokens | 最大输出 tokens |
temperature | 生成温度 |
⌨️ 十、Claude Code 完整命令速查（更新版）
命令行命令
# 基础使用
claude # 启动交互式会话
claude "任务" # 单次执行任务
claude /path/to/project # 指定项目目录
claude --help # 显示帮助
claude --version # 查看版本
# 模型选择
claude --model opus-4-6 "复杂任务"
claude --model claude-sonnet "日常任务"
# 执行模式
claude -p "prompt" # 打印结果
claude --print "任务" # 同上
claude --bare -p "任务" # 最小化执行
claude -n "会话名" "任务" # 设置会话名称
# Skills 命令
claude --skills # 列出所有 skills
npx skills init [name] # 初始化新 skill
npx skills add <pkg> # 安装 skill
npx skills find [query] # 搜索 skill
会话内命令 (/xxx)
| 命令 | 功能 |
|---|---|
/model <model> | 切换使用的模型 |
/help | 显示帮助信息 |
/quit | 退出会话 |
/exit | 退出会话 |
/clear | 清除对话历史 |
/compact | 压缩上下文，节省 tokens |
/context | 查看当前上下文状态 |
/resume | 恢复之前的工作 |
/branch | 创建分支会话 |
/plan | 进入计划模式 |
/effort | 设置任务努力级别 |
/rename | 重命名当前会话 |
/sessions | 列出所有会话 |
/skills | 查看 Skills 列表 |
/mcp | MCP 服务器管理 |
/config | 配置设置 |
/doctor | 运行诊断 |
努力级别
| 级别 | 符号 | 说明 |
|---|---|---|
| low | ○ | 快速完成任务 |
| medium | ◐ | 平衡速度和深度 |
| high | ● | 深入分析（默认） |
| auto | - | 重置为默认 |
模型选择指南
| 场景 | 推荐模型 |
|---|---|
| 简单任务 | Haiku |
| 日常开发 | Sonnet |
| 复杂任务 | Opus |
| 超长上下文 | Opus 4.6 |
| 代码审查 | Opus |
| 调试分析 | Opus |
🔧 十三、Claude Code 独有特性详解
1. 任务分类系统（Categories）
Claude Code 将任务分为不同类型，每个类型使用不同的模型：
| Category | 适用场景 | 默认模型 |
|---|---|---|
visual-engineering | 前端、UI、UX、样式、动画 | Gemini 3 Pro |
ultrabrain | 复杂逻辑、架构决策、算法 | GPT-5.2 Codex |
deep | 端到端实现、深度研究 | GPT-5.2 Codex |
artistry | 非传统方案、创意解决方案 | Gemini 3 Pro |
quick | 简单修改、拼写错误、单文件更改 | Claude Haiku |
unspecified-low | 低难度通用任务 | Claude Sonnet |
unspecified-high | 高难度通用任务 | Claude Sonnet |
writing | 文档、写作、技术文章 | Gemini 3 Flash |
使用方式：
task(
category="visual-engineering",
load_skills=["frontend-ui-ux"],
prompt="Redesign the sidebar..."
)
2. 内置 Agents 详解
| Agent | 用途 | 模型 |
|---|---|---|
sisyphus | 主任务执行 | Claude Opus 4.5 |
oracle | 架构咨询、调试 | GPT-5.2 |
explore | 代码探索、grep | Claude Haiku |
librarian | 外部文档搜索 | GLM-4.7 Free |
metis | 计划前分析 | Claude Opus 4.5 |
momus | 计划审查 | GPT-5.2 |
prometheus | 计划构建 | Claude Opus 4.5 |
atlas | 通用任务 | Kimi K2.5 Free |
3. MCP 服务器配置
Claude Code 通过 claude config mcp 命令管理 MCP 服务器：
# 查看 MCP 服务器列表
claude config mcp list
# 添加 MCP 服务器
claude config mcp add <name> <command>
# 移除 MCP 服务器
claude config mcp remove <name>
4. 项目级配置（CLAUDE.md）
在项目根目录创建 CLAUDE.md 可设置项目级指令：
🎯 十四、Skill 触发机制深度解析
触发原理
用户消息 → Skill 匹配 → 触发条件检查 → 加载 Skill → 执行任务
触发条件判断
Skill 的 description 字段是触发的主要依据：
---
name: pdf
description: Use this skill whenever the user wants to do anything with PDF files...
---
触发逻辑：
- 用户消息包含 "PDF"、"pdf"、"处理 PDF" → 触发
- 用户请求创建/编辑 PDF → 触发
- 用户要求提取 PDF 内容 → 触发
优化触发准确性
# ❌ 差：描述太笼统
description: "处理文件"
# ✅ 好：具体说明功能和场景
description: "读取、创建、编辑 PDF 文件，包括文本提取、表格提取、页面合并拆分。当用户提到 PDF、pdf、文档处理时触发。"
测试触发
创建测试用例验证触发：
{
"evals": [
{
"id": 1,
"prompt": "帮我把这个 PDF 的表格提取出来",
"should_trigger": true
},
{
"id": 2,
"prompt": "写一首诗",
"should_trigger": false
}
]
}
🛠️ 十五、常用 Skills 进阶使用
1. skill-creator 进阶
创建复杂 Skill 的工作流：
1. 定义 → 2. 编写 → 3. 测试 → 4. 评估 → 5. 优化 → 6. 发布
批量创建测试用例：
# scripts/run_eval.py
python -m scripts.run_eval \
--skill-path ~/.claude/skills/my-skill \
--eval-set evals.json \
--model claude-opus-4-5
性能基准测试：
# 运行并收集指标
python -m scripts.aggregate_benchmark \
workspace/iteration-1 \
--skill-name my-skill
2. find-skills 进阶
搜索技巧：
# 精确搜索
npx skills find "react component"
# 模糊搜索
npx skills find component
# 查看特定分类
npx skills list --category testing
排行榜参考：
| 排名 | Skill | 安装量 | 用途 |
|---|---|---|---|
| 1 | vercel-labs/react-best-practices | 185K+ | React 性能优化 |
| 2 | anthropics/frontend-design | 120K+ | 前端设计 |
| 3 | anthropics/document-processing | 100K+ | 文档处理 |
3. PDF/DOCX 组合使用
场景：从 PDF 提取数据生成 Word 报告
用户：把 PDF 里的表格提取出来生成报告
→ 触发 PDF Skill
- 使用 pdfplumber 提取表格
- 转换为 DataFrame
→ 触发 DOCX Skill
- 创建 Word 文档
- 插入表格
- 添加标题和格式
→ 输出：report.docx
📚 十六、Skill 最佳实践
1. SKILL.md 写作规范
---
name: skill-name
description: 清晰描述功能和使用场景
---
# Skill 标题
## 触发条件
- 具体说明什么时候使用
## 输出内容
- 详细列出生成什么
## 核心逻辑
- 具体执行步骤
## 示例
``` 示例代码 ```
2. 目录结构最佳实践
my-skill/
├── SKILL.md # ≤500 行
├── assets/ # 静态文件可以不存在
├── image1.png # 图片
│ └── song.mp4 # 视屏
├── references/
│ ├── overview.md # 概述
│ └── detailed.md # 详细文档（可选）
├── scripts/
│ └── helper.py # 辅助脚本
├── templates/
│ └── template.xx # 代码模板
└── evals/
└── evals.json # 测试用例
3. 描述优化技巧
原则：
- 具体明确，避免模糊
- 包含触发关键词
- 说明输出格式
模板：
[功能描述]。当用户[具体场景/关键词]时触发。生成[输出格式]。
🔍 十七、故障排除
常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| Skill 不触发 | description 太笼统 | 优化描述，加入关键词 |
| 输出质量差 | 缺少示例 | 添加更多 examples |
| 执行报错 | 依赖缺失 | 检查 required tools |
| 触发过度 | should-not-trigger 太少 | 添加负面测试用例 |
调试命令
# 查看可用的 skills
/skills
# 查看当前模型
/context
# 诊断问题
/doctor
📋 十八、进阶技巧汇总
1. 并行任务分发
// 同时触发多个 agents
task(subagent_type="explore", run_in_background=true, ...)
task(subagent_type="librarian", run_in_background=true, ...)
2. 会话管理
/sessions # 列出所有会话
/resume [id] # 恢复会话
/branch # 创建分支
/compact # 压缩上下文
3. 上下文管理
/context # 查看上下文状态
/clear # 清除对话
4. 远程协作
/teleport # 远程会话
/remote-control # 控制远程
🚀 十九、扩展阅读
官方资源
- Skills.sh - Skills 商店
- Claude Code 官方文档 - 官方文档
- Awesome Skills - Skills 集合
社区
- Claude Code Discord
- Claude Code 社区
- GitHub Discussions
📊 十一、九篇文章回顾
| 篇数 | 主题 | 主要内容 |
|---|---|---|
| 一 | 安装与首次体验 | 安装、配置、认证、模型选择 |
| 二 | 对话与提示词技巧 | 高效沟通、模型切换命令 |
| 三 | 代码生成与修改 | 命令行用法、代码生成 |
| 四 | 文件操作完全指南 | 文件操作、LSP 集成 |
| 五 | MCP 与 Agent Skills | MCP 协议、Skills 系统 |
| 六 | 项目实战案例 | 完整开发流程 |
| 七 | Sub-Agents 与团队协作 | 多 Agent 并行处理 |
| 八 | 工作流与自动化 | 自动化任务 |
| 九 | 创建自定义 Skills | 定制专属技能、命令速查 |
学习路径
🌱 入门阶段（一～三）
↓ 掌握基础：安装、对话、代码生成、命令使用
🌿 进阶阶段（四～六）
↓ 掌握核心：文件操作、Skills、项目实战
🌳 高级阶段（七～九）
↓ 掌握精通：Sub-Agents、自动化、自定义 Skills
🎓 十二、实战练习
Example
动手练习：创建以下自定义 Skills
- 初体验：创建一个简单的代码模板 Skill
- 实用型：创建团队的代码规范 Skill
- 高级：创建完整的项目初始化 Skill
🎉 总结
🎉 祝贺你！ 完成了整个 Claude Code 教程系列！
从此你已经掌握了 Claude Code/Claude Code 的从入门到高级的所有技能。记得不断实践，逐渐将 AI 编程工具变成你的日常工作搭档！
如果觉得系列文章有帮助，欢迎 转发分享 👍
我们下次再见！
