Claude Code 常用 Skills 安装教程
Claude Code 的 Skills(技能)系统可以大幅提升开发效率。
一、什么是 Skills
Skills 是用来扩展 Claude Code 能力的机制。创建一个 SKILL.md 文件,Claude 会将其视为"可复用的工具箱"。
Skills 的特点:
- 可被 Claude 在合适场景自动加载
- 可由用户通过
/skill-name手动调用 - 基于 Agent Skills 开放标准
二、安装 Skills
2.1 添加 Marketplace
shell# 进入 Claude Code 后执行 /plugin marketplace add anthropics/skills # 或者在终端执行 claude plugin marketplace add anthropics/skills
2.2 安装官方技能包
| 技能包 | 功能 |
|---|---|
example-skills@anthropic-agent-skills | 官方示例技能包(前端设计、网页测试、动图制作等) |
document-skills@anthropic-agent-skills | 文档处理技能包(PPT、Word、Excel、PDF) |
shell# 安装示例技能包 /plugin install example-skills@anthropic-agent-skills # 安装文档处理技能包 /plugin install document-skills@anthropic-agent-skills
2.3 交互式安装
进入claude code后直接输入 /plugin 会看到菜单:
Plugins Discover Installed Marketplaces
- Discover - 浏览和搜索可用技能
- Marketplaces - 添加新的技能市场
- Installed - 查看已安装的技能
选择技能后会提示安装范围:
Install for you (user scope)- 仅个人使用Install for all collaborators on this repository (project scope)- 项目所有成员Install for you, in this repo only (local scope)- 仅当前仓库
三、常用技能包推荐
3.1 skill-creator -元技能
核心能力:快速生成自定义Skill,无需编程经验,人人都能定制AI能力
text用skill-creator帮我创建一个[描述]的Skill # 或者显示调用 /skill-creator 创建一个[]的Skill
安装: 官方技能包自带,也可以手动安装: github地址 ,将整个文件夹下载,然后直接复制到.claude/skills 目录即可
3.2 obsidian-skills -Obsidian知识库
专为 Obsidian 准备的 Skills。由Obsidian CEO开源,目前为止有3个Skill。分别为 Obsidian Flavored Markdown 、Obsidian Bases 、JSON Canvas。例如,我想生成中国历史朝代关系。直接说:
bash/json-canvas 生成明代历代皇帝关系图
github地址
安装:
text/plugin marketplace add kepano/obsidian-skills /plugin install obsidian@obsidian-skills
手动安装同上
3.3 planning-with-files - 像 Manus 一样工作
可以通过外部文件(task_plan.md、notes.md)实现外部记忆,且避免长对话上下文漂移,最终形成计划→执行→回顾的闭环。 使用场景:比如有个复杂项目可能要做几天,可以交给它规划,直接跟它说:
text用planning-with-files开始一个新项目规划:[描述]
Claude会自动创建规划文件,后续对话都会引用这些文件保持前后一致性。快速安装步骤:
bash/plugin marketplace add OthmanAdi/planning-with-files /plugin install planning-with-files@planning-with-files
3.4 makepad-skills - Rust开发加速器
用于在 Rust 中使用 Makepad 框架构建跨平台 UI 应用的 Agent Skills 安装:
bash# 第一步:添加市场 /plugin marketplace add ZhangHanDong/makepad-skills /plugin install makepad-skills@makepad-skills-marketplace # 第二步:安装插件(选择一个或多个) /plugin install makepad-full@makepad-skills-marketplace # 全部技能 /plugin install makepad-core@makepad-skills-marketplace # 核心 + 入门 /plugin install makepad-graphics@makepad-skills-marketplace # 图形 & 着色器 /plugin install makepad-patterns@makepad-skills-marketplace # 生产模式 /plugin install makepad-deployment@makepad-skills-marketplace # 平台打包 /plugin install makepad-reference@makepad-skills-marketplace # API 文档 & 问题排查
使用:
text用makepad-skills生成一个跨平台的日历App
Claude会按最佳实践一步步生成代码,还能自我迭代优化。
3.5 React/Next.js 技能包
shellnpx skills add vercel-labs/agent-skills
包含技能:
vercel-react-best-practices- React/Next.js 性能优化vercel-react-native-skills- React Native 开发vercel-composition-patterns- React 组合模式
3.6 UI/UX 设计技能(强烈推荐)
shell# Claude Code 内安装 /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skill
3.7 Vue.js 技能包
shell# 添加 marketplace npx skills add vuejs-ai/skills /plugin marketplace add vuejs-ai/skills # 安装指定技能 /plugin install create-adaptable-composable@vue-skills # 安装多个技能 /plugin install create-adaptable-composable@vue-skills vue-best-practices@vue-skills vue-development-guides@vue-skills
包含技能:
vue-best-practices- Vue.js 最佳实践vue-pinia-best-practices- Pinia 状态管理vue-router-best-practices- Vue Router 路由vue-testing-best-practices- Vue 测试实践vue-debug-guides- Vue 3 调试指南
或者使用 CLI 工具:
shell# 安装 CLI # Install CLI globally npm install -g uipro-cli # 进入项目目录 cd /path/to/your/project # Install for your AI assistant uipro init --ai claude # Claude Code uipro init --ai cursor # Cursor uipro init --ai windsurf # Windsurf uipro init --ai antigravity # Antigravity uipro init --ai copilot # GitHub Copilot uipro init --ai kiro # Kiro uipro init --ai codex # Codex CLI uipro init --ai qoder # Qoder uipro init --ai roocode # Roo Code uipro init --ai gemini # Gemini CLI uipro init --ai trae # Trae uipro init --ai opencode # OpenCode uipro init --ai continue # Continue uipro init --ai codebuddy # CodeBuddy uipro init --ai all # All assistants # 其他命令 uipro versions # 查看可用版本 uipro update # 更新到最新版本 uipro init --offline # 离线模式
四、技能使用
4.1 自动触发
安装完技能包后,直接描述需求即可自动触发:
帮我开发一个个人博客
帮我创建一个 Vue 组件
帮我优化 React 性能
4.2 手动调用
shell# 直接使用斜杠命令 /frontend-design 帮我开发一个个人博客 /vue-best-practices review ./src/components/ /webapp-testing run
五、创建自定义 Skill
5.1 存放位置(三级作用域)
| 作用域 | 路径 | 适用范围 | 优先级 |
|---|---|---|---|
| 个人 | ~/.claude/skills/<skill-name>/ | 所有项目 | 低 |
| 项目 | .claude/skills/<skill-name>/ | 仅当前仓库 | 中 |
| 插件 | <plugin>/skills/<skill-name>/ | 启用该插件的项目 | 高 |
同名 Skill 冲突时:插件 > 项目 > 个人
个人级别(User Scope)
bash# 存放路径 ~/.claude/skills/ # 示例 ~/.claude/skills/vue-best-practices/SKILL.md ~/.claude/skills/frontend-design/SKILL.md
- 安装一次,所有项目可用
- 适合个人常用的通用技能
项目级别(Project Scope)
bash# 存放路径(项目根目录) .claude/skills/ # 示例 .claude/skills/my-project-skill/SKILL.md
- 仅当前项目可用
- 适合项目特定的专业知识
- 需要提交到代码仓库
插件级别(Plugin Scope)
bash# 存放路径 <plugin-dir>/skills/ # 示例 ~/.claude/plugins/my-plugin/skills/custom-skill/SKILL.md
- 随插件安装/卸载自动管理
- 适合插件捆绑的专业技能
查看已安装的 Skills:
bash# 查看个人级别 Skills ls ~/.claude/skills/ # 查看当前项目的 Skills ls .claude/skills/
5.2 目录结构
my-skill/
├── SKILL.md # 必需:入口与主要指令
├── reference.md # 可选:大段参考资料(需要时再加载)
├── examples/ # 可选:示例输出
└── scripts/ # 可选:可执行脚本
5.3 创建步骤
以创建 explain-code Skill 为例:
bash# 1) 创建 Skill 目录(个人级别) mkdir -p ~/.claude/skills/explain-code # 2) 编写 SKILL.md touch ~/.claude/skills/explain-code/SKILL.md
5.4 SKILL.md 格式
文件由两部分组成:YAML frontmatter + Markdown 内容
yaml--- name: explain-code description: 用"类比 + ASCII 图"解释代码。适用于讲解代码库、解释执行流程。 --- 解释代码时,始终包含: 1. **类比开头**:将代码比作日常生活中的事物 2. **画图说明**:使用 ASCII 艺术展示流程、结构或关系 3. **逐步讲解**:解释代码执行的每一步 4. **指出陷阱**:常见的错误或误解是什么? 保持解释口语化。
5.5 Frontmatter 常用字段
yaml--- name: my-skill # Skill 名称(小写字母/数字/连字符,最长64) description: 这个 Skill 做什么 # 推荐填写,用于自动加载匹配 argument-hint: [issue-number] # 自动补全时显示的参数提示 disable-model-invocation: true # true=仅手动触发,不自动加载 user-invocable: false # false=从菜单隐藏(仅自动触发) allowed-tools: Read, Grep # 允许使用的工具范围 model: Claude Sonnet 4 # Skill 激活时使用的模型 context: fork # fork=在隔离子代理上下文运行 agent: Explore # context: fork 时选择子代理类型 hooks: # 仅对该 Skill 生效的 hooks ---
5.6 控制触发权限
| Frontmatter | 手动调用 | 自动触发 | 描述是否常驻 |
|---|---|---|---|
| 默认 | ✓ | ✓ | 描述常驻 |
disable-model-invocation: true | ✓ | ✗ | 仅触发时加载 |
user-invocable: false | ✗ | ✓ | 描述常驻 |
六、高级功能
6.1 动态上下文注入
使用 !`command` 占位符,Claude 执行命令后注入结果:
yaml--- name: pr-summary description: 汇总 PR 改动 context: fork agent: Explore allowed-tools: Bash(gh:*) --- ## Pull request context - PR diff: !`gh pr diff` - PR comments: !`gh pr view --comments` - Changed files: !`gh pr diff --name-only` ## Your task 基于以上信息给出 PR 摘要、风险点与建议验证清单。
6.2 子代理中运行 Skill
设置 context: fork 使 Skill 在隔离上下文运行,不污染主对话:
yaml--- context: fork agent: Explore ---
七、故障排除
Skill 不触发
确保 description 回答两个问题:
- 这个 Skill 做什么?
- Claude 应该何时使用?(包含用户会提到的触发词)
Skill 不加载
- 检查文件路径是否正确
- 文件名必须精确为
SKILL.md(区分大小写) - YAML 以
---开头/结尾,用空格缩进 - 运行
claude --debug查看错误
多个 Skill 冲突
使用具体触发词区分,如:
- "Excel 文件和 CRM 导出的销售数据"
- "日志文件和系统指标"
八、Skills 与其他功能对比
| 场景 | 推荐选择 |
|---|---|
| 给 Claude 专业知识 | Skills |
| 创建可复用提示 | 斜杠命令 |
| 设置项目级指令 | CLAUDE.md |
| 委派任务到独立上下文 | Subagents |
| 事件触发脚本 | Hooks |
| 连接外部工具和数据源 | MCP 服务器 |
Skills vs MCP:
- Skills 告诉 Claude 如何使用工具
- MCP 提供工具
- MCP 服务器连接 Claude 到数据库,Skill 教 Claude 你的数据模型和查询模式
九、常用链接
提示: 如果你需要特定领域的技能,可以在 GitHub 搜索。如果你对某个领域非常熟悉,也可以制作自己的 Skill!