使用 Claude Skills 新功能提升 Claude Code 工作流程

深入探索 Claude Skills 如何帮助开发者消除重复性工作，将工作流程自动化并标准化，让 AI 编程助手真正理解你的开发模式。

使用 Claude Skills 新功能提升 Claude Code 工作流程

前言

Claude Code 刚刚推出了革命性的新功能 —— Claude Skills，这是一种只需教会 Claude 一次工作流程，之后它就能每次自动执行的创新方式。

听起来难以置信？读完这篇文章并观看我的实战演示后，你就会理解 Claude Skills 为 Claude Code 工作流程带来的巨大优势。

如果你对 Claude Skills 还不了解，本文将通过深入分析它们解决的核心问题以及实际使用方法，帮助你快速上手这个强大的功能。

快速提示: 本文将详细介绍 Claude Skills 的使用方法和最佳实践，建议收藏以便随时查阅。

痛点：重复性工作的困扰

我已经使用 Claude Code 数月，并一直在 Medium 上分享如何充分利用每个新功能。然而，有一个核心问题始终困扰着所有追求自动化的开发者 —— 重复性工作。

每次启动新项目时，你是否发现自己在向 Claude 反复解释相同的事情：

• “添加 TypeScript，使用这些特定的 tsconfig 配置”
• “配置我习惯的 ESLint 规则”
• “按照团队的命名规范创建 React 组件”

这是我们所有人面临的共同问题。尽管我们尝试通过 Claude Code 的各种功能来解决，比如斜杠命令（slash commands）、代码钩子（hooks）等，但效果始终不够理想。

统计数据显示：大多数开发者在每个新项目的前 30 分钟都在重复教 Claude 他们的工作流程、偏好和标准规范。

如果这正是你的困扰，那么 Claude Skills 将成为你的救星。它通过自动化知识转移流程，将重复性解释转化为可重用、可执行的指令，Claude 会在需要时自动加载这些指令，为你节省宝贵的时间。

Claude Skills vs MCP：有何不同？

你可能会想：“这不就是 Model Context Protocol (MCP) 解决的问题吗？”

答案是：并非如此。

虽然两者都是 Claude 生态的重要组成部分，但它们的定位完全不同：

特性	MCP	Claude Skills
核心功能	连接外部数据源和工具	教会 Claude 执行任务的方式
应用场景	数据库、API、文件系统访问	工作流程、最佳实践、实现模式
类比	给 Claude 提供原材料	教 Claude 如何使用原材料
关系	连接数据	传授技艺

简单来说：

• MCP 将 Claude 与你的数据连接起来
• Skills 教会 Claude 你的专业技艺和工作方式

Skills 是可执行的知识包，它们告诉 Claude：“当用户请求 X 功能时，我们组织内部的标准实现方式是这样的。”

在深入测试 Claude Skills 后，我意识到之前一直在用最笨的方法使用 Claude。接下来，让我展示如何用这个功能彻底改变工作流程。

什么是 Claude Skills？

Claude Skills 是可移植的指令包，它们教会 Claude 如何以你的方式执行专业任务。

让我用通俗的语言解释一下。

技能的组成结构

一个 Skill 本质上是一个包含以下内容的文件夹：

~/.claude/skills/your-skill-name/
├── SKILL.md              # 核心指令文件
├── templates/            # 模板文件
├── scripts/              # 辅助脚本
└── resources/            # 参考资源

三大核心组件：

1. SKILL.md - 包含你的指令、模式和最佳实践的 Markdown 文件
2. 辅助资源 - 脚本、模板、配置文件或参考代码
3. 执行逻辑 - 可选的代码，用于需要每次都以相同方式执行的任务

形象的比喻

我喜欢将 Skills 比作 Claude 的食谱卡片。

就像你会给别人一份食谱来烤祖母的招牌巧克力蛋糕一样，Skills 为 Claude 提供分步指令，确保它能按照你期望的方式精确完成特定任务。

实际案例：暗黑模式切换技能

这是一个典型的 Skill 文件结构示例：

~/.claude/skills/
└── darkmode-toggle/
    ├── SKILL.md
    ├── templates/
    │   ├── toggle-button.html
    │   └── theme-styles.css
    └── scripts/
        └── theme-handler.js

在这个例子中，darkmode-toggle Skill 包含了 Claude 为任何网站添加专业暗黑模式切换所需的一切：

• SKILL.md 中的详细指令
• 可以直接引用或使用的实际模板文件

Skills 的强大特性

1. 跨平台兼容

Skills 在所有 Claude 产品中通用：

• Claude.ai
• Claude Code
• Claude API

一次构建，处处可用 —— 这就是 Skills 的优势。

2. 可组合性

Claude 可以自动识别任务所需的技能，并无缝组合使用多个技能。

例如，当你要求”创建一个带导航栏、表单验证和暗黑模式的落地页”时，Claude 会自动识别并组合使用：

• responsive-navbar 技能
• form-validation 技能
• darkmode-toggle 技能

3. 智能加载

这是 Skills 最强大的特性：Claude 只在相关时才加载技能。

你无需：

• ❌ 手动选择技能
• ❌ 告诉 Claude 使用哪个技能
• ❌ 担心性能问题

Claude 会：

• ✅ 自动扫描可用技能
• ✅ 识别当前任务所需内容
• ✅ 仅加载必要的最小信息

这种机制既保证了 Claude 的响应速度，又能在需要时访问你的专业领域知识。

实战演示：创建暗黑模式切换技能

让我通过一个真实项目来展示 Skills 的工作原理。

场景设定

我在 VS Code 中打开了一个基础 Web 项目，包含：

• index.html - 空白页面
• styles.css - 基础样式
• app.js - 空白脚本

要解决的问题

如何为这个网站添加一个专业的暗黑模式切换功能？

不是随便实现一个暗黑模式，而是要符合我的特定标准：

• ✅ 平滑过渡动画
• ✅ localStorage 持久化
• ✅ 语义化 HTML
• ✅ 无障碍访问（Accessibility）合规

传统方式的痛点

在 Claude Skills 出现之前，我需要：

1. 打开 Claude Code
2. 输入一个超长的详细提示：

"在右上角添加一个暗黑模式切换按钮，使用月亮/太阳 emoji。
使用 CSS 自定义属性实现主题切换。
用 localStorage 持久化用户偏好。
添加平滑过渡效果。
确保符合无障碍标准，包含正确的 ARIA 标签..."

3. 即便如此，Claude 可能还会：
   • 遗漏某些细节
   • 以不同于我期望的方式实现
   • 需要多次调整和修正

使用 Skills 的新方式

现在，Claude Skills 让我能够一次性指导 Claude，永久使用。

让我展示如何创建这个可重用的技能。

创建第一个 Skill：分步指南

步骤 1：设置技能结构

打开终端，创建 Skill 文件夹：

mkdir -p ~/.claude/skills/darkmode-toggle
cd ~/.claude/skills/darkmode-toggle

步骤 2：编写 SKILL.md 文件

这是魔法发生的地方。我将精确的实现模式记录在 SKILL.md 文件中。

在 macOS 上，可以使用 TextEdit 或你喜欢的编辑器：

# macOS
open -a TextEdit SKILL.md

# 或使用 VS Code
code SKILL.md

粘贴以下内容：

---
name: Dark Mode Toggle
description: Add professional dark mode toggle to HTML websites with smooth transitions and localStorage persistence
version: 1.0.0
---

# Dark Mode Toggle Skill

## 概述
此技能提供为 HTML 网站添加暗黑模式功能的标准化实现。当用户请求暗黑模式、主题切换或明暗切换功能时使用。

## 使用场景
- 用户要求"添加暗黑模式"
- 用户想要"主题切换"或"明暗开关"
- 用户提到使网站"支持暗黑模式"

## 实现模式

### HTML 结构
在 body 元素中添加切换按钮：

\`\`\`html
<button id="theme-toggle" aria-label="切换暗黑模式">🌙</button>
\`\`\`

### CSS 变量和主题
使用 CSS 自定义属性实现：

\`\`\`css
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --card-bg: #f5f5f5;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --card-bg: #2d2d2d;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 15px;
  border: none;
  border-radius: 50%;
  background: var(--card-bg);
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

#theme-toggle:hover {
  transform: scale(1.1);
}
\`\`\`

### JavaScript 逻辑
实现 localStorage 持久化：

\`\`\`javascript
const themeToggle = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme') || 'light';

// 设置初始主题
document.documentElement.setAttribute('data-theme', currentTheme);
themeToggle.textContent = currentTheme === 'light' ? '🌙' : '☀️';

// 切换功能
themeToggle.addEventListener('click', () => {
  const theme = document.documentElement.getAttribute('data-theme');
  const newTheme = theme === 'light' ? 'dark' : 'light';
  
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
  themeToggle.textContent = newTheme === 'light' ? '🌙' : '☀️';
});
\`\`\`

## 质量检查清单
- ✅ 切换按钮在右上角可见
- ✅ 主题间平滑过渡（0.3 秒）
- ✅ 主题偏好在页面刷新后保持
- ✅ Emoji 图标根据当前主题更新
- ✅ 所有现有元素适配主题变量
- ✅ 支持键盘导航（无障碍访问）

保存文件（Ctrl+S / Cmd+S）并关闭。

验证文件是否创建成功：

# macOS/Linux
cat SKILL.md

# Windows PowerShell
Get-Content SKILL.md

步骤 3：使用技能

现在进入自动化阶段。

1. 回到 VS Code 项目（包含 index.html、styles.css、app.js）
2. 打开 Claude Code
3. 简单地输入：

"为这个网站添加暗黑模式"

幕后发生了什么？

第一步：技能发现

Claude 扫描 ~/.claude/skills/ 文件夹，识别出 darkmode-toggle 技能与此请求相关。

第二步：技能加载

Claude 加载 SKILL.md 文件，读取实现模式。

第三步：智能应用

Claude 分析现有文件并应用技能模式：

• 将切换按钮添加到 HTML
• 将 CSS 变量集成到现有样式中（不破坏任何内容）
• 在 app.js 中实现 JavaScript 逻辑

第四步：执行

几秒钟内，网站就拥有了完全符合规格的暗黑模式切换功能！

Claude 如何检测所需技能？

当我输入”为这个网站添加暗黑模式”时，我没有明确告诉 Claude Code 使用 darkmode-toggle 技能。

智能匹配机制

Claude 的工作流程：

1. 扫描项目文件 - 理解项目上下文
2. 分析用户请求 - 提取关键意图
3. 检查技能描述 - 匹配 YAML frontmatter 中的 description 字段

---
name: Dark Mode Toggle
description: Add professional dark mode toggle to HTML websites 
             with smooth transitions and localStorage persistence
version: 1.0.0
---

我编写的描述 “Add professional dark mode toggle to HTML websites…” 与我的查询完美匹配。

权限确认机制

Claude 会提示确认：“使用技能 ‘darkmode-toggle’？”

这个权限步骤至关重要，特别是当技能包含可执行代码时。你可以选择：

• ✅ 一次性批准 - 仅此次使用
• ✅ 项目级批准 - 整个项目期间使用
• ❌ 拒绝并提供其他指令

这种设计既保证了灵活性，又确保了安全性。

技能实战：精确执行标准

我点击”是”批准技能后，接下来发生的事情令人印象深刻。

Claude Code 立即开始实现暗黑模式功能，但这次不再是即兴发挥，而是严格遵循我的技能规范，像执行蓝图一样精确。

实现细节分析

1. HTML 更新 (index.html)

按照指定方式添加了切换按钮：

<button id="theme-toggle" aria-label="切换暗黑模式">🌙</button>

注意细节：

• ✅ 精确的 ID：theme-toggle
• ✅ 无障碍访问的 ARIA 标签
• ✅ 月亮 emoji（符合技能模式）

2. CSS 更新 (styles.css)

实现了配色方案和定位：

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --card-bg: #f5f5f5;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --card-bg: #2d2d2d;
}

#theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  /* ... 来自技能的精确样式 */
}

精确匹配：

• ✅ 颜色完全符合规范：浅色模式 #ffffff / #000000
• ✅ 深色背景 #1a1a1a
• ✅ 按钮定位：top: 20px; right: 20px
• ✅ 包含定义的悬停效果和过渡动画

3. JavaScript 实现 (app.js)

精确的 localStorage 模式：

const themeToggle = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme') || 'light';

document.documentElement.setAttribute('data-theme', currentTheme);
themeToggle.textContent = currentTheme === 'light' ? '🌙' : '☀️';

关键点：

• ✅ 使用 document.documentElement.setAttribute('data-theme', ...)
• ✅ 不是 body.classList.add('dark-mode') 或其他方法
• ✅ 这是我的标准，Claude 完美遵循

成果总结

最终输出不仅仅是”一个暗黑模式实现”，而是我的暗黑模式实现，遵循了技能中记录的每一个细节：

规范项	实现状态
样式指南中的精确颜色值	✅ 完全匹配
特定的定位要求	✅ 完全匹配
首选的 DOM 操作方法	✅ 完全匹配
定义的无障碍标准	✅ 完全匹配
localStorage 键命名规范	✅ 完全匹配
0.3 秒平滑过渡	✅ 完全匹配

这就是 Claude Skills 的强大之处：

在 Claude Code 工作流程中一次性记录标准，之后无论你还是团队成员请求功能时，Claude Code 都会按照你的方式实现。

技能组合：强大的协同效应

这才是真正精彩的部分！

多技能协作场景

假设我的技能库中还有这些技能：

1. responsive-navbar - 标准导航栏实现
2. form-validation - 客户端验证（包含首选错误样式）
3. api-integration - 团队的 fetch 包装器（含错误处理）

现在我可以告诉 Claude Code：

"创建一个包含导航栏、联系表单和暗黑模式的落地页"

自动技能编排

Claude 会：

1. 识别需求 - 分析出需要 THREE 个技能
2. 加载技能 - 同时加载所有相关技能
3. 智能组合 - 将它们无缝整合在一起

实际效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 响应式导航栏样式 (responsive-navbar) -->
    <!-- 表单验证样式 (form-validation) -->
    <!-- 暗黑模式样式 (darkmode-toggle) -->
</head>
<body>
    <!-- 导航栏组件 -->
    <nav>...</nav>
    
    <!-- 联系表单（带验证） -->
    <form id="contact-form">...</form>
    
    <!-- 暗黑模式切换 -->
    <button id="theme-toggle">🌙</button>
    
    <script>
        // API 集成逻辑 (api-integration)
        // 表单验证逻辑 (form-validation)
        // 主题切换逻辑 (darkmode-toggle)
    </script>
</body>
</html>

结果：三个技能完美协同工作，创建了一个功能完整、符合所有标准的落地页！

最佳实践与建议

1. 识别值得创建技能的场景

适合创建技能的任务：

• ✅ 在多个项目中重复执行
• ✅ 有明确的实现标准
• ✅ 需要保持一致性
• ✅ 包含多个步骤

不适合创建技能的任务：

• ❌ 一次性的独特需求
• ❌ 标准仍在变化中
• ❌ 简单到不需要文档

2. 技能命名规范

推荐格式：

kebab-case (短横线命名法)
示例：
- responsive-navbar
- form-validation
- api-integration
- darkmode-toggle

避免：

• ❌ 使用空格
• ❌ 过长的名称
• ❌ 不清晰的缩写

3. 编写高质量的 SKILL.md

必备元素：

---
name: 技能名称（易读）
description: 清晰的描述，包含关键词
version: 版本号（语义化版本控制）
---

# 技能名称

## 概述
简明扼要的说明

## 使用场景
- 何时使用此技能
- 触发条件

## 实现模式
### 详细步骤
具体的代码示例和说明

## 质量检查清单
- [ ] 验证点 1
- [ ] 验证点 2

4. 技能版本管理

# 为重要版本创建备份
cp -r ~/.claude/skills/my-skill ~/.claude/skills/my-skill-v1.0.0

# 或使用 Git 管理
cd ~/.claude/skills
git init
git add .
git commit -m "Initial skills library"

5. 团队协作

分享技能库：

# 导出技能
cd ~/.claude/skills
tar -czf team-skills.tar.gz *

# 团队成员导入
cd ~/.claude/skills
tar -xzf team-skills.tar.gz

建议：

• 建立团队技能库仓库
• 定期审查和更新技能
• 文档化技能使用指南

快速开始指南

准备好创建你的第一个 Skill 了吗？按照这 5 个步骤开始：

第 1 步：识别最常重复的任务

问自己：

• 🤔 我反复向 Claude 解释什么？
• 🤔 哪些工作流程最耗时？
• 🤔 团队成员经常问的标准是什么？

第 2 步：创建技能文件夹

mkdir -p ~/.claude/skills/your-skill-name
cd ~/.claude/skills/your-skill-name

第 3 步：记录实现模式

创建 SKILL.md 并包含：

• 清晰的使用场景说明
• 分步实现指南
• 代码示例
• 质量检查清单

第 4 步：测试技能

在 Claude Code 中：

1. 打开相关项目
2. 使用自然语言请求功能
3. 观察 Claude 是否正确识别和应用技能

第 5 步：迭代优化

根据实际使用情况：

• 完善文档说明
• 添加边界情况处理
• 更新最佳实践
• 扩展技能库

实用技能库示例

前端开发技能

~/.claude/skills/
├── responsive-navbar/       # 响应式导航栏
├── form-validation/         # 表单验证
├── darkmode-toggle/         # 暗黑模式
├── seo-meta-tags/          # SEO 元标签
└── performance-optimization/ # 性能优化

后端开发技能

~/.claude/skills/
├── rest-api-endpoint/       # RESTful API 端点
├── database-migration/      # 数据库迁移
├── jwt-authentication/      # JWT 认证
├── error-handling/          # 错误处理
└── api-documentation/       # API 文档生成

测试技能

~/.claude/skills/
├── unit-test-setup/         # 单元测试配置
├── integration-test/        # 集成测试
├── e2e-test-cypress/       # E2E 测试（Cypress）
└── test-coverage-report/    # 测试覆盖率报告

常见问题解答

Q1: Skills 是否会影响 Claude 的响应速度？

A: 不会。Claude 只在相关时才加载技能，并且只加载必要的最小信息。智能加载机制确保性能不受影响。

Q2: 我可以修改现有的技能吗？

A: 当然可以。直接编辑 ~/.claude/skills/skill-name/SKILL.md 文件，更改会立即生效。建议在修改前备份。

Q3: 技能是否可以跨团队共享？

A: 是的！技能是标准文件夹结构，可以通过：

• Git 仓库管理
• 压缩包分享
• 云存储同步

Q4: 一个项目可以使用多少个技能？

A: 没有限制。Claude 可以智能组合多个技能。建议将技能模块化，每个技能专注于单一职责。

Q5: Skills 与 Copilot 的代码片段有何不同？

A:

• 代码片段：静态模板，需要手动插入和调整
• Skills：智能指令，Claude 根据上下文动态应用并适配

总结与展望

关键要点回顾

1. 消除重复 - Claude Skills 将重复性解释转化为可重用的指令
2. 标准化工作流 - 确保团队按照统一标准实现功能
3. 智能组合 - 多个技能可以无缝协同工作
4. 跨平台通用 - 一次构建，处处可用
5. 持续改进 - 技能库随经验积累不断完善

立即行动

如果你仍在每次启动项目时手动向 Claude 解释工作模式，那你的工作方式太辛苦了。

今天就开始构建你的技能库，消除 Claude Code 工作流程中的重复任务。

记住持续改进流程：

发现重复任务 → 创建技能 → 测试验证 → 持续优化 → 扩展技能库

未来展望

Claude Skills 只是开始。随着功能的不断完善，我们可以期待：

• 更强大的技能组合能力
• 社区技能市场
• 企业级技能管理平台
• 与更多开发工具的集成

保持学习

想要了解更多关于 Claude Code 的内容和最新功能？

• 📝 关注我的 Medium
• 🎥 订阅我的 YouTube 频道
• 💬 加入 Claude 开发者社区

我会持续测试新功能，分享实用教程，帮助你更快完成实际工作。

---

作者: Joe Njenga
译者: lengleng
原文: How I’m Using Claude Skills (New Feature) To Blow Up My Claude Code Workflows

💡 提示: 本文展示的所有技能示例都可以在实际项目中使用。建议从简单的技能开始，逐步建立你的技能库。

---

相关资源

• Claude Code 官方文档
• Model Context Protocol (MCP) 介绍
• Claude Code 最佳实践指南
• AI 驱动的开发工作流