国庆节10月1日
--


介绍我在 Claude Code 中安装和使用的 18 个 Skills,涵盖创意构思、代码审查、前端设计、Vercel 部署优化、系统化调试、并行开发等工作流,来自 Anthropic、Vercel 和 Superpowers 三个来源。

Claude Code Skills 是 Claude Code 的扩展能力系统,通过在 .claude/skills/ 目录下放置 Markdown 文件,可以为 Claude 添加特定领域的工作流程和专业知识。每个 Skill 由一个 SKILL.md 文件定义,包含触发条件、工作流程和详细指南。
| 来源 | 说明 | 安装方式 |
|---|---|---|
| Anthropic 官方 | Claude Code 自带或官方维护 | npx add-skill anthropics/claude-code |
| Vercel 官方 | Vercel 团队维护的部署和前端 Skills | npx add-skill vercel-labs/agent-skills |
| Superpowers | 社区维护的开发工作流 Skills | npx add-skill obra/superpowers |
| 社区/自建 | 第三方或自己创建 | 手动放入 .claude/skills/ 或用 skill-creator 创建 |
| # | Skill 名称 | 来源 | 一句话描述 |
|---|---|---|---|
| 1 | brainstorming | Superpowers | 将创意转化为完整设计方案 |
| 2 | code-reviewer | 社区 | 全面的代码审查,聚焦安全与性能 |
| 3 | deploy-to-vercel | Vercel | 一键部署项目到 Vercel |
| 4 | dispatching-parallel-agents | Superpowers | 调度并行子代理执行任务 |
| 5 | executing-plans | Superpowers | 按计划逐步执行实现 |
| 6 | finishing-a-development-branch | Superpowers | 完成开发分支的收尾流程 |
| 7 | frontend-design | 社区 | 打造独特、有辨识度的视觉设计 |
| 8 | receiving-code-review | Superpowers | 处理收到的代码审查反馈 |
| 9 | skill-creator | Anthropic | 创建和优化自定义 Skills |
| 10 | subagent-driven-development | Superpowers | 子代理驱动的开发模式 |
| 11 | systematic-debugging | Superpowers | 系统化的调试方法论 |
| 12 | ui-ux-pro-max | 社区 | 50+ 样式、161 色板的 UI/UX 知识库 |
| 13 | vercel-composition-patterns | Vercel | 组件组合模式,构建可扩展架构 |
| 14 | vercel-optimize | Vercel | Vercel 性能与成本优化审计 |
| 15 | verification-before-completion | Superpowers | 完成前验证,防止提交半成品 |
| 16 | web-design-guidelines | Vercel | Web 界面设计规范审查 |
| 17 | writing-guidelines | Vercel | 文档写作规范审查 |
| 18 | writing-plans | Superpowers | 编写实现计划 |
来源:Superpowers
在任何创意工作开始之前,通过结构化的对话流程将模糊的想法转化为完整的设计方案。
docs/superpowers/specs/ 目录1/brainstorming来源:awesome-llm-apps | 版本:2.0.0 | 许可证:MIT
专业的代码审查工具,按照优先级从高到低检查代码质量。
| 优先级 | 检查维度 | 具体内容 |
|---|---|---|
| 🔴 CRITICAL | 安全性 | SQL 注入、XSS、认证绕过、硬编码密钥 |
| 🟠 HIGH | 性能 | N+1 查询、缺失索引、低效算法、内存泄漏 |
| 🟠 HIGH | 正确性 | 错误处理、竞态条件、边界情况、空值处理 |
| 🟡 MEDIUM | 可维护性 | 命名规范、类型安全、DRY 原则、单一职责 |
1/code-reviewer来源:社区
以小型设计工作室设计总监的视角,为每个项目打造独特且有辨识度的视觉方案。
1/frontend-design来源:Anthropic 官方 | 许可证:Apache 2.0
创建新的 Claude Code Skills 并迭代优化,包含完整的测试、评估、打包流程。
1想法 → 草稿 → 测试用例 → 运行评估 → 用户评审 → 改进 → 重复 → 打包1/skill-creator来源:社区
超级全面的 UI/UX 设计知识库,内置 Python 搜索脚本。
| 内容 | 数量 |
|---|---|
| 设计风格 | 50+ 种 |
| 色彩方案 | 161 套 |
| 字体搭配 | 57 组 |
| UX 指南 | 99 条 |
| 图表类型 | 25 种 |
1/ui-ux-pro-max以下 8 个 Skills 来自 obra/superpowers,使用
npx add-skill obra/superpowers安装。
当任务可以拆分为多个独立子任务时,调度多个子代理并行执行,大幅提升效率。
1/dispatching-parallel-agents按照 writing-plans 生成的计划逐步执行实现,确保每一步都有明确的输入输出和验证标准。
1/executing-plans开发分支的收尾流程,确保代码质量、测试通过、文档更新后再合并。
1/finishing-a-development-branch收到代码审查反馈后的处理流程:理解反馈、评估建议、实施修改、回复审查者。
1/receiving-code-review使用子代理来执行开发任务,主代理负责规划和协调,子代理负责具体实现。
1/subagent-driven-development结构化的调试方法论,避免盲目试错,用科学方法定位和修复 Bug。
1/systematic-debugging在标记任务完成之前,执行一系列验证检查,确保交付质量。
1/verification-before-completion将设计方案转化为可执行的实现计划,明确每个步骤的具体操作、预期输出和验证标准。
11. 目标描述22. 实现步骤(每步含:操作、输出、验证)33. 依赖关系44. 风险点55. 回滚方案1/writing-plans以下 5 个 Skills 来自 vercel-labs/agent-skills,使用
npx add-skill vercel-labs/agent-skills安装。
版本:3.0.0
一键将项目部署到 Vercel。默认部署为预览环境,除非用户明确要求生产部署。
1/deploy-to-vercel版本:1.0.0 | 许可证:MIT
组件组合模式指南,帮助构建灵活、可维护的组件架构。虽然是 React 示例为主,但组合思想适用于所有组件化框架。
| 优先级 | 类别 | 关键指导 |
|---|---|---|
| 1 | 组件架构 | 避免布尔 Prop 泛滥、使用复合组件 |
| 2 | 状态管理 | 提升状态、共享上下文 |
| 3 | 实现模式 | Render Props、组件组合 |
1/vercel-composition-patterns版本:1.2.0
基于可观测数据的 Vercel 优化审计。先看数据,再给建议。
| 框架 | 支持程度 |
|---|---|
| Next.js App Router | ✅ 完整 |
| SvelteKit | ✅ 完整 |
| Nuxt | ✅ 完整 |
| Astro | ⚠️ 有限 |
1/vercel-optimize版本:1.0.0
审查 UI 代码是否符合 Web Interface Guidelines。每次审查时从源头获取最新规范。
1/web-design-guidelines版本:1.0.0
审查文档/文案是否符合 Writing Guidelines。适合博客、技术文档的写作质量审查。
1/writing-guidelines1brainstorming → writing-plans → executing-plans → frontend-design → verification-before-completion → code-reviewer1vercel-optimize → deploy-to-vercel1systematic-debugging → verification-before-completion → code-reviewer1brainstorming → writing-plans → subagent-driven-development → dispatching-parallel-agents → verification-before-completion1brainstorming → writing-guidelines1executing-plans → finishing-a-development-branch → receiving-code-review1npx add-skill vercel-labs/agent-skills1npx add-skill obra/superpowers将 Skill 文件夹放入项目的 .claude/skills/ 目录:
1mkdir -p .claude/skills2cp -r /path/to/skill .claude/skills/1/skill-creator| 分类 | Skills | 核心价值 |
|---|---|---|
| 创意与规划 | brainstorming, writing-plans | 把想法变成可执行方案 |
| 开发执行 | executing-plans, subagent-driven-development, dispatching-parallel-agents | 高效执行开发任务 |
| 质量保障 | code-reviewer, verification-before-completion, systematic-debugging | 确保代码质量 |
| 设计与 UI | frontend-design, ui-ux-pro-max, web-design-guidelines | 打造优质界面 |
| Git 工作流 | finishing-a-development-branch, receiving-code-review | 规范的分支管理 |
| 部署与优化 | deploy-to-vercel, vercel-optimize, vercel-composition-patterns | Vercel 全链路 |
| 内容与文档 | writing-guidelines, skill-creator | 写作质量和 Skill 创建 |
18 个 Skills 覆盖了从构思到部署的完整开发生命周期。不需要一次全装,按需选择才是正道。
如果你喜欢,那么欢迎来到我的世界!
了解更多暂未播放



"所有的相遇都是久别重逢。"—— 未知


