📋 目录
- 什么是 Claude Skills
- 快速安装 Skills
- 已安装的 Skills 清单
- Skills 使用方式详解
- 实战案例:使用 Frontend Design Skill 创建网站
- Skill 管理最佳实践
- 高级技巧
- 常见问题排查
什么是 Claude Skills
Claude Skills 是模块化的能力包,包含指令、元数据和可选资源(脚本、模板),让 Claude 在需要时自动加载和使用。
核心特点
- 自动触发- 无需手动调用,Claude 会根据你的需求自动识别并使用合适的 Skill
- 渐进式加载- 按需加载内容,节省 Token 消耗
- 跨平台复用- 一次创建,到处使用
- 团队协作- 可共享给团队成员
Skills vs 其他方案
| 特性 | Skills | MCP | Prompts |
|---|---|---|---|
| Token 效率 | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ |
| 易用性 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
| 复用性 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐ |
| 实时数据 | ❌ | ✅ | ❌ |
| 适用场景 | 工作流程 | 外部集成 | 一次性任务 |
快速安装 Skills
方法 1:从官方仓库安装(推荐)
# 1. 创建 skills 目录mkdir-p ~/.claude/skills# 2. 克隆官方仓库cd~/.claude/skillsgitclone --depth1https://github.com/anthropics/skills.git temp_skills# 3. 复制 skills 到目录cp-r temp_skills/skills/*.rm-rf temp_skills# 4. 验证安装ls~/.claude/skills/方法 2:手动创建自定义 Skill
# 创建 skill 目录mkdir-p ~/.claude/skills/my-custom-skillcd~/.claude/skills/my-custom-skill# 创建 SKILL.md 文件cat>SKILL.md<<'EOF' --- name: my-custom-skill description: 简短描述这个 skill 的功能和使用场景 --- # My Custom Skill ## 功能说明 详细的使用指南... ## 使用示例 \`\`\`bash 示例代码 \`\`\` EOF方法 3:从 Git 仓库安装
cd~/.claude/skillsgitclone https://github.com/username/awesome-skill.git安装位置说明
Skills 可以安装在两个位置:
用户级(全局):
~/.claude/skills/- 所有项目都可用
- 适合通用 skills
项目级(本地):
<项目目录>/.claude/skills/- 仅当前项目可用
- 优先级高于用户级
- 适合项目特定的 skills
已安装的 Skills 清单
安装完成后,你将拥有以下 16 个官方 Skills:
📄 文档处理类
| Skill | 功能 | 触发关键词 |
|---|---|---|
| PDF 提取、合并、表单填写 | PDF、文档提取、表单 | |
| docx | Word 文档创建、编辑、批注 | Word、文档、docx |
| pptx | PowerPoint 演示文稿生成 | PPT、演示文稿、幻灯片 |
| xlsx | Excel 数据分析、报表 | Excel、表格、数据分析 |
🎨 设计与创意类
| Skill | 功能 | 触发关键词 |
|---|---|---|
| frontend-design | 前端界面设计 | 网页设计、前端、UI |
| canvas-design | Canvas 图形绘制 | Canvas、图形、动画 |
| algorithmic-art | 算法艺术生成 | 算法艺术、生成式艺术 |
| theme-factory | 主题创建 | 主题、配色方案 |
| brand-guidelines | 品牌指南 | 品牌、设计规范 |
🔧 开发工具类
| Skill | 功能 | 触发关键词 |
|---|---|---|
| skill-creator | 创建新 Skills | 创建 skill、编写 skill |
| mcp-builder | MCP 服务器构建 | MCP、服务器集成 |
| webapp-testing | Web 应用测试 | 测试、自动化测试 |
| web-artifacts-builder | Web 组件构建 | Web 组件、交互应用 |
💬 协作与沟通类
| Skill | 功能 | 触发关键词 |
|---|---|---|
| doc-coauthoring | 文档协作 | 协作、多人编辑 |
| internal-comms | 内部沟通文档 | 公告、团队沟通 |
| slack-gif-creator | Slack GIF 创建 | GIF、Slack |
Skills 使用方式详解
🔑 核心原则:自动触发
重要:Skills 是自动触发的,你不需要手动调用任何命令。只需正常描述你的需求,Claude 会自动识别并使用合适的 Skill。
触发机制
Claude 通过匹配你的请求和 Skill 的description字段来决定是否使用某个 Skill:
---name:pdfdescription:Comprehensive PDF manipulation toolkit for extracting text and tables,creating new PDFs,merging/splitting documents,and handling forms. When Claude needs to fill in a PDF form or programmatically process,generate,or analyze PDF documents at scale.---当你说"提取 PDF 文本"时,Claude 会:
- 扫描所有 Skills 的 description
- 发现
pdfskill 匹配度最高 - 自动加载
~/.claude/skills/pdf/SKILL.md - 按照 Skill 中的指导完成任务
常见使用场景
📄 文档处理
# PDF Skill 自动触发 用户:"提取这个 PDF 的文本内容" 用户:"合并这两个 PDF 文件" 用户:"填写这个 PDF 表单" 用户:"从 PDF 中提取表格数据" # DOCX Skill 自动触发 用户:"创建一个 Word 文档" 用户:"编辑这个 docx 文件,添加批注" 用户:"提取 Word 文档的内容" # PPTX Skill 自动触发 用户:"生成一个关于 AI 的 PPT" 用户:"创建 10 页的演示文稿" 用户:"修改这个 PowerPoint" # XLSX Skill 自动触发 用户:"分析这个 Excel 数据" 用户:"创建数据透视表" 用户:"生成销售报表"🎨 设计与创意
# Frontend Design Skill 自动触发 用户:"设计一个登录页面" 用户:"创建响应式布局" 用户:"生成 CSS 样式" # Canvas Design Skill 自动触发 用户:"创建 Canvas 动画" 用户:"绘制交互式图形" # Algorithmic Art Skill 自动触发 用户:"生成算法艺术" 用户:"创建生成式图案"🔧 开发工具
# Skill Creator Skill 自动触发 用户:"帮我创建一个新的 skill" 用户:"我想制作一个自定义 skill" 用户:"如何编写 skill" # MCP Builder Skill 自动触发 用户:"创建一个 MCP 服务器" 用户:"构建 MCP 集成" # Webapp Testing Skill 自动触发 用户:"测试这个网页" 用户:"编写测试用例"实战案例:使用 Frontend Design Skill 创建网站
让我们通过一个真实案例来展示 Skills 的强大能力。
案例背景
创建一个名为daitou的代码编辑器软件的官网下载页面,要求:
- 独特的视觉设计,避免常见的 AI 风格
- 响应式布局
- 交互式动画
- 支持多平台下载
实施步骤
第 1 步:触发 Frontend Design Skill
我的请求:
"帮我根据 Frontend Design Skill 生成一个独特的关于一个名字叫做 daitou 的软件 (类似 code IDE)的官网下载页面,然后本地测试打开一下"关键词匹配:
- “Frontend Design Skill” - 明确提及
- “网站”、“页面” - 匹配 description 中的 “web components, pages”
- “设计” - 匹配设计相关功能
第 2 步:Skill 自动加载
Claude 自动执行:
- 读取
~/.claude/skills/frontend-design/SKILL.md - 按照 Skill 中的设计原则工作
- 应用最佳实践
第 3 步:设计决策
根据 Frontend Design Skill 的指导,我选择了:
美学方向:极简未来主义 + 工业感
关键设计决策:
字体:Syne (展示) + JetBrains Mono (等宽)
- ❌ 避免:Inter, Roboto, Arial
- ✅ 选择:独特、有个性的字体
配色:深色主题 + 霓虹绿 (#00ff88)
- ❌ 避免:紫色渐变、常见配色
- ✅ 选择:工业感十足的配色
动画:入场动画、悬停效果、打字效果
- ✅ 高影响力的动画时机
纹理:噪点叠加、光晕效果
- ✅ 增加氛围和深度
第 4 步:实现代码
生成的文件结构:
daitou-website/ ├── index.html (10.5 KB) - 主页面结构 ├── style.css (13 KB) - 视觉样式 └── script.js (7.8 KB) - 交互逻辑index.html 核心结构:
<!DOCTYPEhtml><htmllang="zh-CN"><head><!-- 独特字体加载 --><linkhref="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&family=Syne:wght@400;700;800&display=swap"rel="stylesheet"></head><body><divclass="grain-overlay"></div><!-- Hero 区域 --><sectionclass="hero"><divclass="hero-content"><divclass="logo-container"><divclass="logo-glow"></div><h1class="logo">daitou</h1></div><pclass="tagline">代码之刀 / 灵感之源</p><!-- ... --></div><!-- 代码预览 --><divclass="hero-visual"><divclass="code-preview"><!-- Rust 代码示例 --></div></div></section><!-- 功能展示 --><sectionclass="features"><!-- 6 个功能卡片 --></section><!-- 下载区域 --><sectionclass="download-section"><!-- Windows / macOS / Linux --></section></body></html>style.css 设计系统:
:root{/* 色彩系统 - 工业未来主义 */--color-bg:#0a0a0a;--color-primary:#00ff88;--color-accent:#ff3366;/* 字体系统 */--font-display:'Syne',sans-serif;--font-mono:'JetBrains Mono',monospace;/* 动画曲线 */--transition-base:0.3scubic-bezier(0.4,0,0.2,1);}/* 噪点纹理 */.grain-overlay{background-image:url("data:image/svg+xml,...");opacity:0.03;}/* 发光效果 */.logo-glow{background:radial-gradient(circle,var(--color-primary),transparent);filter:blur(40px);animation:glow 3s ease-in-out infinite;}script.js 交互功能:
// 1. 自动检测用户操作系统functiondetectPlatform(){constuserAgent=window.navigator.userAgent.toLowerCase();if(userAgent.indexOf('win')!==-1)return'windows';if(userAgent.indexOf('mac')!==-1)return'macos';if(userAgent.indexOf('linux')!==-1)return'linux';}// 2. 代码预览打字效果functionanimateCodePreview(){// 逐字符打字动画}// 3. 滚动触发动画functionsetupScrollAnimations(){constobserver=newIntersectionObserver(entries=>{// 元素进入视口时淡入});}// 4. 下载按钮交互functionhandleDownload(platform,button){// 模拟下载流程}第 5 步:页面特性
生成的页面包含以下特性:
视觉设计:
- ✅ 独特的霓虹绿 + 深色配色方案
- ✅ 噪点纹理叠加增加质感
- ✅ 发光效果和脉冲动画
- ✅ 3D 旋转的代码预览窗口
- ✅ 渐变、阴影、透明度层次
交互体验:
- ✅ 入场动画(淡入 + 上移)
- ✅ 悬停效果(卡片提升、颜色变化)
- ✅ 代码打字机效果(延迟 1.5 秒)
- ✅ 按钮 ripple 波纹效果
- ✅ 滚动触发动画
- ✅ 鼠标跟随光晕
功能实现:
- ✅ 自动检测用户操作系统
- ✅ 高亮推荐的下载选项
- ✅ 三大平台下载支持(Windows/macOS/Linux)
- ✅ 下载按钮状态反馈
- ✅ 快捷键支持(Ctrl/Cmd + D)
- ✅ 完全响应式布局
性能优化:
- ✅ CSS 优先的动画(GPU 加速)
- ✅ Intersection Observer API(性能友好的滚动检测)
- ✅ 延迟加载动画
- ✅ 优化的字体加载
成果展示
最终生成的页面具有:
| 维度 | 评分 | 说明 |
|---|---|---|
| 视觉独特性 | ⭐⭐⭐⭐⭐ | 完全避免了常见的 AI 风格 |
| 交互体验 | ⭐⭐⭐⭐⭐ | 流畅的动画和微交互 |
| 代码质量 | ⭐⭐⭐⭐⭐ | 结构清晰、注释完整 |
| 响应式 | ⭐⭐⭐⭐⭐ | 完美适配各种设备 |
| 性能 | ⭐⭐⭐⭐☆ | 优化良好,轻量级 |
Skill 的价值体现
通过这个案例,我们看到 Frontend Design Skill 提供了:
设计指导原则
- 明确的美学方向选择
- 避免常见错误的规则
- 最佳实践建议
实现标准
- 字体选择指南
- 配色系统建议
- 动画设计原则
质量保证
- 响应式设计要求
- 性能优化建议
- 可访问性考虑
没有 Skill 的情况:
- 可能使用 Inter/Roboto 等常见字体
- 可能使用紫色渐变等 AI 常见配色
- 动画效果可能过于简单或过度
- 缺少独特的设计个性
有 Skill 的情况:
- 选择了独特的 Syne + JetBrains Mono 字体组合
- 工业感的霓虹绿配色方案
- 精心设计的动画时机和效果
- 强烈的品牌个性和记忆点
Skill 管理最佳实践
查看 Skill 结构
# 查看某个 skill 的完整结构ls-la ~/.claude/skills/pdf/# 典型结构:# pdf/# ├── SKILL.md # 核心文件(必需)# ├── LICENSE.txt # 许可证# ├── forms.md # 额外文档(表单处理指南)# ├── reference.md # 参考文档(API 详解)# └── scripts/ # 脚本目录(可执行工具)# ├── extract.py# └── merge.py验证 Skill 安装
# 1. 检查 SKILL.md 是否存在ls~/.claude/skills/*/SKILL.md# 2. 查看 Skill 的 YAML 配置head-10 ~/.claude/skills/pdf/SKILL.md# 应该看到:# ---# name: pdf# description: Comprehensive PDF manipulation toolkit...# ---# 3. 验证 description 是否清晰grep-A2"description:"~/.claude/skills/*/SKILL.md# 4. 检查文件权限ls-la ~/.claude/skills/管理多个 Skill 位置
# 用户级 Skills(全局)~/.claude/skills/ ├── pdf/ ├── docx/ └── pptx/# 项目级 Skills(本地优先)/path/to/project/.claude/skills/ ├── project-specific-skill/ └── custom-workflow/# 优先级:项目级 > 用户级创建项目特定的 Skill
# 在项目目录创建cd/path/to/projectmkdir-p .claude/skills/deployment-workflowcat>.claude/skills/deployment-workflow/SKILL.md<<'EOF' --- name: deployment-workflow description: Custom deployment workflow for this project. Use when deploying or releasing this application. --- # Deployment Workflow ## Pre-deployment Checklist - [ ] Run tests - [ ] Update version - [ ] Build production bundle ## Deployment Steps 1. Build: `npm run build` 2. Test: `npm test` 3. Deploy: `./deploy.sh` EOFSkill 版本管理
# 使用 Git 管理 Skillscd~/.claude/skillsgitinitgitadd.gitcommit -m"Initial skills setup"# 创建 .gitignorecat>.gitignore<<'EOF' # 忽略临时文件 *.tmp *.log # 忽略敏感配置 secrets/ EOF高级技巧
组合多个 Skills
Skills 可以自动组合使用,完成复杂任务:
示例 1:PDF 分析 + PPT 生成
用户:"分析这个 PDF 报告,然后生成一个 PPT 总结" Claude 执行: 1. 触发 pdf skill - 提取 PDF 文本 - 分析关键信息 - 提取数据和图表 2. 触发 pptx skill - 按照专业模板创建 PPT - 将分析结果可视化 - 生成执行摘要 3. 输出最终的 .pptx 文件示例 2:数据分析 + 文档报告
用户:"分析这个 Excel 销售数据,生成 Word 报告" Claude 执行: 1. 触发 xlsx skill - 读取 Excel 数据 - 计算统计指标 - 生成图表 2. 触发 docx skill - 创建专业报告模板 - 嵌入数据和图表 - 添加分析结论 3. 输出 Word 文档自定义 Skill 最佳实践
创建高质量的自定义 Skill:
--- name: code-review-workflow description: | Comprehensive code review workflow with security scanning, performance analysis, and style checking. Use when reviewing code, conducting security audits, or checking code quality. Supports Python, JavaScript, TypeScript, Go, and Rust. --- # Code Review Workflow ## Quick Start For a basic code review: \`\`\`bash python scripts/review.py --file path/to/code.py \`\`\` ## Review Checklist ### 🔴 Security (Critical) - [ ] SQL injection vulnerabilities - [ ] XSS attack vectors - [ ] Authentication bypass - [ ] Sensitive data exposure **Details**: See [SECURITY.md](references/SECURITY.md) ### ⚡ Performance - [ ] O(n²) or worse complexity - [ ] Memory leaks - [ ] Unnecessary database queries **Tools**: - Python: `python scripts/profile.py` - JavaScript: `node scripts/analyze-perf.js` ### 🎨 Style - [ ] Naming conventions - [ ] Code duplication (DRY principle) - [ ] Error handling **Auto-fix**: `python scripts/format.py --fix` ## Advanced Features For complex scenarios, see: - [Advanced Security Scanning](references/ADVANCED_SECURITY.md) - [Performance Optimization Guide](references/PERFORMANCE.md)关键要素:
清晰的 description
- 说明功能(“做什么”)
- 说明场景(“什么时候用”)
- 包含关键词(触发词)
渐进式内容
- Quick Start(快速上手)
- Common Cases(常见场景)
- Advanced Features(高级功能,链接到外部文档)
可执行脚本
- 提供现成的工具
- 减少 Token 消耗
- 确保一致性
外部参考
- 详细文档单独存放
- 按需加载
- 保持主文件简洁
调试 Skills
如果 Skill 没有被触发:
# 1. 确认 SKILL.md 存在find~/.claude/skills -name"SKILL.md"-type f# 2. 检查 YAML frontmatter 格式head-15 ~/.claude/skills/your-skill/SKILL.md# 正确格式:# ---# name: skill-name# description: Clear description here# ---# 3. 验证 description 是否匹配你的请求# description 应该包含:# - 核心功能关键词# - 使用场景描述# - 触发条件说明# 4. 测试触发# 在请求中明确提及 Skill 名称:# "使用 pdf skill 提取文本"# "根据 frontend-design skill 创建页面"性能优化技巧
优化 Token 消耗:
# ❌ 低效设计(所有内容都在 SKILL.md) --- name: mega-skill description: Does everything --- # Mega Skill (50,000 tokens) ## Feature 1 [10,000 tokens of detailed explanation...] ## Feature 2 [10,000 tokens of detailed explanation...] ## Feature 3 [10,000 tokens of detailed explanation...] # ✅ 高效设计(模块化 + 渐进披露) --- name: modular-skill description: Core functionality with modular features --- # Modular Skill (3,000 tokens) ## Core Features Basic usage guide (3,000 tokens) ## Advanced Features - Feature 1: See [FEATURE1.md](references/FEATURE1.md) - Feature 2: See [FEATURE2.md](references/FEATURE2.md) - Feature 3: See [FEATURE3.md](references/FEATURE3.md)效果对比:
| 设计方式 | 基础任务 | 高级任务 | 完整加载 |
|---|---|---|---|
| 低效设计 | 50,000 tokens | 50,000 tokens | 50,000 tokens |
| 高效设计 | 3,000 tokens | 3,000 + 5,000 | 3,000 + 15,000 |
| 节省 | 94% | 84% | 64% |
常见问题排查
Q1: Skill 没有被触发?
检查清单:
# 1. SKILL.md 是否存在?ls~/.claude/skills/your-skill/SKILL.md# 2. YAML 格式是否正确?head-10 ~/.claude/skills/your-skill/SKILL.md# 3. description 是否包含相关关键词?grep"description:"~/.claude/skills/your-skill/SKILL.md# 4. 文件权限是否正确?ls-la ~/.claude/skills/your-skill/解决方法:
- 在请求中明确提及 Skill 名称
- 优化 description,增加触发关键词
- 确保 YAML frontmatter 格式正确
Q2: 如何知道哪个 Skill 被使用了?
Claude 会在响应中说明使用了哪个 Skill,例如:
"我将使用 frontend-design skill 来创建这个页面..." "根据 pdf skill 的指导,我会..."Q3: 可以同时使用多个 Skills 吗?
可以!Skills 会自动组合使用。例如:
- “分析 PDF + 生成 PPT” → 使用
pdf+pptx - “提取数据 + 创建报告” → 使用
xlsx+docx
Q4: 项目级 Skill 和用户级 Skill 冲突怎么办?
优先级:项目级 > 用户级
如果同名 Skill 存在于两个位置:
项目/.claude/skills/my-skill/ ← 使用这个 ~/.claude/skills/my-skill/ ← 忽略这个Q5: 如何更新已安装的 Skills?
# 方法 1: 重新克隆官方仓库cd~/.claude/skillsrm-rf pdf docx pptx# 删除旧版本gitclone --depth1https://github.com/anthropics/skills.git tempcp-r temp/skills/*.rm-rf temp# 方法 2: 如果使用 Git 管理cd~/.claude/skills/your-skillgitpull origin main# 方法 3: 手动替换# 下载新版本,替换 SKILL.md 和相关文件Q6: Skills 占用多少存储空间?
官方 16 个 Skills 总计约5-10 MB:
- 每个 SKILL.md 约 5-50 KB
- 脚本和参考文档约 100-500 KB
- 总体非常轻量级
Q7: 可以删除不需要的 Skills 吗?
可以!直接删除目录即可:
# 删除不需要的 skillrm-rf ~/.claude/skills/slack-gif-creator# 或者移动到备份目录mkdir-p ~/.claude/skills-backupmv~/.claude/skills/unused-skill ~/.claude/skills-backup/总结
核心要点
- 自动化- Skills 自动触发,无需手动调用
- 模块化- 每个 Skill 专注于特定领域
- 可组合- 多个 Skills 可以协同工作
- 高效率- 渐进式加载,节省 Token
- 易扩展- 可以创建自定义 Skills
最佳实践
✅DO:
- 使用官方 Skills 作为起点
- 为项目创建特定的 Skills
- 保持 SKILL.md 简洁,详细内容外部链接
- 使用 Git 管理 Skills
- 定期更新 Skills
❌DON’T:
- 不要在 SKILL.md 中包含过多内容
- 不要使用不清晰的 description
- 不要忽略 YAML frontmatter 格式
- 不要硬编码敏感信息
- 不要创建过于泛化的 Skills
下一步
- 实践- 尝试使用已安装的 Skills 完成实际任务
- 创建- 为你的工作流程创建自定义 Skills
- 分享- 将有用的 Skills 分享给团队
- 优化- 根据使用情况持续优化 Skills
参考资源
- 官方 Skills 仓库
- Skill 创建指南
- Claude Code 文档
- 本文中的 daitou 网站项目