vibe Coding-- 走进Skill

AI技能系统SkillsHarness 七层框架中Skill 是其中的第三层也是最重要的一层它把专业知识变成 cc 在需要时按需调用的外接大脑。大模型再聪明也不可能把所有领域的最佳实践都塞进训练数据。但有了 Skill你可以——这正是它如此重要的原因。4.1 什么是AI技能Skill4.1.1 Skill 的定义Skill技能是一个封装了特定能力的可复用指令集。Skill 就是 把一个复杂的任务标准化、流程化让AI每次都能按照固定的高质量标准执行。Skill vs 单次 Prompt维度单次 PromptSkill性质一次性指令可复用的标准流程一致性每次输出可能不同每次按照同样的标准执行效率每次重新写一遍一键触发维护用完即弃可版本管理、持续优化比喻口头交代任务书面的标准操作手册SOP4.1.2 Skill 的核心价值一致性确保AI每次执行都遵循相同标准不会这次用Tab缩进下次用空格效率复杂流程一键触发无需每次重写Prompt可复用跨项目、跨团队共享最佳实践可迭代持续优化和升级越用越好4.1.3 Skill 的组成结构一个完整的 Skill 是一个目录可以包含多种类型的文件就像一个能力包。打个比方如果把 Skill 比作一本食谱那么SKILL.md就是食谱本身菜名、步骤、注意事项scripts/就是配套的厨房小工具削皮刀、量杯 —— 封装好的辅助脚本resources/就是附赠的食材包和调料配比表模板、示例数据、配置references/就是食谱末尾的参考书目营养学标准、食品安全规范 —— AI 可随时查阅的参考资料标准 Skill 目录结构skill-xxx/ # Skill 根目录命名规范小写短横线 ├── SKILL.md # 核心技能描述文件必选 ├── scripts/ # 辅助脚本目录可选 │ ├── helper.py # Python 辅助脚本 │ └── utils.js # JavaScript 工具函数 ├── resources/ # 配套资源目录可选 │ ├── template/ # 模板文件如代码模板、报告模板 │ ├── examples/ # 示例文件如输入/输出示例数据 │ └── config/ # 配置文件如规则定义、默认参数 ├── references/ # 参考文档目录可选 │ ├── best-practices.md # 最佳实践文档 │ ├── api-docs.md # API 参考文档 │ └── standards.md # 行业/团队编码规范 └── requirements.txt # 依赖声明可选列出脚本需要的第三方包提示Skill 的核心是SKILL.md其余文件均为辅助。如果你的 Skill 只需要一份指令说明只放一个SKILL.md就够了。但当 Skill 涉及复杂逻辑如数据处理、格式转换时配上scripts/、resources/和references/会大幅提升 Skill 的能力和可维护性。各组成部分详解1. SKILL.md必选—— 技能的说明书这是 Skill 的核心载体。它包含两部分头部的元数据Frontmatter和正文的具体指令。--- # 元数据FrontmatterYAML 格式 name: react-component-generator # 技能名称唯一标识 version: 1.0 # 技能版本 description: 根据需求生成符合项目规范的 React 组件文件集 # 技能简介 trigger: [创建组件, 新建React组件, 生成组件] # 触发关键词 tools: [typescript, react] # 依赖工具 author: your-name # 技能作者 --- # React 组件生成器 ## 执行步骤 1. 确认组件名称和功能需求 2. 在 src/components/{componentName}/ 目录下创建文件 3. 按照 resources/template/ 中的模板生成代码 4. 运行 scripts/validate.js 验证组件结构 ## 输出规范 - 所有文件创建完成后报告创建的文件列表 - 给出组件的使用示例代码 ## 错误处理 - 如果目录已存在提示用户确认是否覆盖 - 如果缺少依赖包提示安装命令 ## 示例 给一个完整的输入→输出示例。注意Frontmatter元数据是可选的很多简单的 Skill 可以省略它。但如果你的 Skill 需要被 Agent 系统自动发现和匹配Frontmatter 中的trigger和description就非常重要 ——Agent 启动时只读取元数据只有当用户任务匹配触发条件时才会加载完整指令。这种渐进式披露的设计可以节省上下文窗口空间。2. scripts/可选—— 辅助脚本当 Skill 需要执行复杂逻辑时如数据预处理、文件批量操作、格式验证把这些逻辑封装到脚本中比写在 SKILL.md 里更清晰# scripts/helper.py —— 辅助脚本示例 def fill_missing_value(df, column, strategymean): 缺失值填充把复杂逻辑封装成函数SKILL.md 中只需调用即可 if strategy mean: df[column].fillna(df[column].mean(), inplaceTrue) elif strategy empty: df[column].fillna(, inplaceTrue) return df3. resources/可选—— 配套资源template/存放代码模板、文档模板。例如 React 组件的标准结构模板AI 可以基于模板快速生成代码examples/存放输入/输出示例。帮助 AI 理解好的输出长什么样config/存放配置文件JSON/YAML定义规则和参数避免在 SKILL.md 中硬编码4. references/可选—— 参考文档与resources/不同references/存放的不是模板和配置而是AI 执行任务时可以查阅的知识性文档。比如编码规范文档团队的代码风格指南安全审计标准如 OWASP Top 10 清单API 文档第三方服务的接口说明技术选型文档为什么用 A 不用 B 的决策记录提示references/和resources/的区别可以这样理解 ——resources/是生产材料模板、配置直接用于生成输出references/是参考书规范、标准、文档用于指导 AI 做出正确决策。5. requirements.txt可选—— 依赖声明如果scripts/中的脚本依赖第三方库在这里声明方便部署时一键安装pandas2.0.0 openpyxl3.1.0简单 vs 完整 Skill 的选择场景推荐结构说明简单的编码规范只需 SKILL.md如 Git 提交规范、命名约定代码生成类SKILL.md resources/template/模板驱动保证生成代码的一致性数据处理类SKILL.md scripts/ resources/config/复杂逻辑封装到脚本配置外部化质量审查类SKILL.md references/参考文档驱动确保审查有据可依完整工程流程全套目录如项目初始化、CI/CD 配置等复杂流程4.1.4 Skill 的类型分类类型描述示例代码生成类按模板生成代码React组件生成器、API端点生成器工程流程类执行标准化流程项目初始化、CI/CD配置质量保障类代码审查与测试安全审计Skill、代码审查Skill文档生成类自动生成文档API文档生成、变更日志生成调试修复类排查和修复问题错误诊断Skill、性能调优Skill4.2 官方与社区 Skill 资源4.2.1 Anthropic 官方 Skill 库仓库地址https://github.com/anthropics/skills这是 Anthropic 官方维护的 Skill 库质量最高、最值得优先使用。官方对 Skill 的定义是Skills are folders of instructions, scripts, and resources that Claude loads dynamically to improve performance on specialized tasks.Skill 是由指令、脚本和资源组成的文件夹Claude 会动态加载它们以提升在专业任务上的表现。官方 Skill 分类总览类别Skill 示例说明文档处理docx、pdf、pptx、xlsx生成和处理 Office 文档、PDF生产级质量创意设计algorithmic-art、canvas-design、slack-gif-creator生成算法艺术、设计画布、动图开发技术frontend-design、mcp-builder、webapp-testing、artifacts-builder前端设计、MCP Server 生成、Web 应用测试企业沟通brand-guidelines、internal-comms品牌规范、内部沟通模板工具skill-creator用 AI 创建新 Skill 的 Skill元技能安装方式使用 Vercel Skills CLI# 安装 Anthropic 官方全部 Skill全局安装 $ npx skills add anthropics/skills -g # 只安装指定 Skill推荐按需安装 $ npx skills add anthropics/skillsfrontend-design -g $ npx skills add anthropics/skillsmcp-builder -g $ npx skills add anthropics/skillsskill-creator -g提示skill-creator是一个非常有趣的元技能 —— 它的功能是帮你创建新的 Skill。如果你刚开始学习 Skill 编写可以先安装它然后告诉 AI帮我创建一个 XXX Skill它会按照标准规范帮你生成 SKILL.md 和目录结构。手动安装不使用 CLI如果你不想用npx skills命令也可以手动操作# 克隆官方仓库到本地 $ git clone https://github.com/anthropics/skills.git # 将需要的 Skill 目录复制到你的项目中 $ cp -r skills/skills/frontend-design .claude/skills/4.2.2 Vercel 官方 Skill 库仓库地址https://github.com/vercel-labs/skillsVercelNext.js 的母公司维护的 Skill 库专注于React、Next.js、AI SDK、部署等前端生态。如果你用 Next.js 技术栈开发这个库非常有价值。Vercel Skill 分类类别覆盖内容React / Next.jsReact 最佳实践、Next.js App Router、性能优化AI SDKVercel AI SDK 集成、AI 应用开发设计与 UI无障碍设计、高性能 UI 组件浏览器自动化浏览器交互自动化测试部署Vercel 平台部署流程商业电商和支付体验工作流持久化、弹性工作流通用工具find-skills搜索发现新 Skill安装方式# 安装 Vercel 全部 Skill $ npx skills add vercel-labs/skills -g # 安装 find-skills推荐首先安装用于搜索发现其他 Skill $ npx skills add vercel-labs/skillsfind-skills -g -y提示find-skills是一个技能发现者 Skill —— 当你需要完成某个任务但不知道有没有现成的 Skill 时它会自动帮你搜索并推荐最合适的 Skill。强烈建议首先安装它。4.2.3 Vercel Skills CLISkill 的包管理器Vercel 还提供了一个命令行工具npx skills可以把它理解为Skill 世界的 npm—— 用来搜索、安装、管理各种 Skill。基本用法# 搜索 Skill按关键词 $ npx skills find react testing # 安装 Skill从 GitHub 仓库 $ npx skills add owner/repo # 安装仓库中的全部 Skill $ npx skills add owner/reponame # 安装指定 Skill $ npx skills add owner/repo -g # 全局安装所有项目可用 # 列出已安装的 Skill $ npx skills list # 初始化在当前项目创建 Skill 目录 $ npx skills init支持的 AI 工具Claude Code、GitHub Copilot、Cursor、Qoder、OpenAI Codex、Cline、Windsurf 等多种 AI 编程工具。具体支持范围会随 CLI 版本变化安装前以项目 README 为准。4.2.4 社区 Skill 库除了官方库社区贡献了大量 Skill 资源精选 GitHub 仓库仓库Skill 数量特色ComposioHQ/awesome-claude-skills12710大分类含59个SaaS应用集成Skillalirezarezvani/claude-skills2359大领域含25个POWERFUL级高级Skilltravisvn/awesome-claude-skills持续更新精选列表社区投票排名glebis/claude-skills专项专注特定工作流的高质量Skillalirezarezvani/claude-skills 领域覆盖235 Skill工程核心37架构、前端、后端、QA、DevOps、安全、AI/ML 高级工程45Agent设计器、RAG架构师、数据库设计、CI/CD构建器、MCP构建器 产品16产品经理、UX研究员、UI设计、落地页、SaaS脚手架 营销44内容、SEO、CRO、渠道、增长、情报、销售 项目管理9Scrum Master、Jira集成、Confluence集成 C-Level顾问34全套C-Suite角色CTO、CFO等 合规与质量14ISO 13485、GDPR、FDA合规 商业与增长5客户成功、销售工程师、收入运营 财务4财务分析、SaaS指标教练安装社区 Skill# 从社区仓库安装 $ npx skills add alirezarezvani/claude-skills -g $ npx skills add ComposioHQ/awesome-claude-skills -g # 手动安装克隆后复制需要的目录 $ git clone https://github.com/alirezarezvani/claude-skills.git $ cp -r claude-skills/engineering-team/frontend .claude/skills/国内大厂 Skill 库 国内用户推荐国内头部科技公司也在积极拥抱 Skill 生态维护了多个高质量的 Skill 库厂商仓库/平台特色 Skill说明字节跳动/火山引擎GitHub: bytedance/agentkit-samples联网搜索、文本转语音TTS、图像理解基于火山引擎 API企业级 AgentKit 示例科大讯飞GitHub: iflytek/iFly-Skills语音合成TTS、语音转写、PDF/图片OCR、发票OCR、机器翻译、文本校对讯飞 AI 能力的 Skill 封装语音和 OCR 最强科大讯飞GitHub: iflytek/skillhub企业级 Skill 注册中心私有部署的 Skill 商店支持团队协作管理阿里巴巴/通义灵码通义灵码内置代码审查、日志分析、API 文档生成支持 SKILL.md 格式可在~/.lingma/skills/自定义腾讯/CodeBuddyCodeBuddy Agent 平台自定义 Skill 构建支持 Skill 创建和集成与腾讯云生态打通安装国内大厂 Skill 示例# 科大讯飞 iFly-Skills语音、OCR、翻译等 AI 能力 $ git clone https://github.com/iflytek/iFly-Skills.git $ cp -r iFly-Skills/ifly-pdf-image-ocr .claude/skills/ # 注意需要在讯飞开放平台申请 API Key配置 XFEI_APP_ID 等环境变量 # 字节跳动 AgentKit Samples $ git clone https://github.com/bytedance/agentkit-samples.git $ cp -r agentkit-samples/skills/byted-web-search .claude/skills/ # 注意需要火山引擎 API Key提示国内大厂的 Skill 大多基于各自的云服务 API使用前需要注册对应平台并获取 API Key。但它们在中文处理、语音识别、OCR等方面的能力远超海外同类 Skill非常适合国内开发者。4.2.5 Skill 聚合平台如果觉得逐个找仓库太麻烦还有专门的 Skill 聚合搜索平台平台地址Skill 数量特色skills.shhttps://skills.sh48,000Vercel 官方推荐的发现平台SkillsMPhttps://skillsmp.com/zh900,000最大的 Skill 市场支持中文界面AgentSkills.iohttps://agentskills.io开放标准Agent Skills 开放标准定义在这些平台上你可以按分类浏览、按关键词搜索找到需要的 Skill 后一键安装。提示SkillsMP 从 GitHub 上自动索引包含 SKILL.md 的仓库所以你在 GitHub 上发布的 Skill 也可能被收录进去。4.2.6 Cursor 规则库Cursor 使用 Rules 作为项目级 AI 行为规范。旧版常见.cursorrules新版更推荐.cursor/rules/*.mdc。它和 Skill 不完全相同但都属于“把经验写成可复用上下文”的做法。社区贡献了大量现成模板资源地址说明cursor.directoryhttps://cursor.directory/按技术栈分类的规则模板集合cursorrules.orghttps://cursorrules.org/可参考旧版规则写法再迁移到.cursor/rules/*.mdcawesome-cursorrulesGitHub: PatrickJS/awesome-cursorrules社区精选规则合集4.2.7 使用第三方 Skill 的安全评估Skill 本质上是给 AI 的操作指令某些恶意 Skill 可能包含危险操作。在使用任何第三方 Skill 之前必须进行安全评估维度检查项举例安全性是否包含危险命令是否会泄露敏感信息检查有无rm -rf、curl发送数据到外部维护状态最近更新时间作者是否活跃超过6个月未更新的慎用文档完整性SKILL.md 是否清晰有无使用说明和示例缺少文档的 Skill 质量可能不高兼容性是否与你使用的工具版本兼容检查 Frontmatter 中的 tools 字段来源可信度是官方/知名组织还是个人Star 数优先选用官方库和高 Star 仓库安全检查的最佳实践# 1. 安装前先浏览 Skill 内容不要盲目安装 # 在 GitHub 上直接阅读 SKILL.md # 2. 检查 scripts/ 目录中的脚本如果有的话 # 确保没有网络请求、文件删除等危险操作 # 3. 在测试项目中先试用确认安全后再用于正式项目注意永远不要盲目使用来历不明的 Skill。安装前至少通读一遍 SKILL.md 的内容和 scripts/ 目录中的脚本代码确保没有危险操作。官方库Anthropic、Vercel优先社区高 Star 仓库其次个人仓库最后。4.2.8 经典 Skill 实操体验案例一用 skill-creator 让 AI 帮你创建 Skillskill-creator是 Anthropic 官方提供的一个元技能 —— 它的功能就是帮你创建新的 Skill。这相当于请了一位 Skill 专家替你写操作手册。# Step 1安装 skill-creator $ npx skills add anthropics/skillsskill-creator -g安装后在 Claude Code 中输入 用 skill-creator 帮我创建一个名为 weekly-report-generator 的技能。 功能每周自动扫描本周的 Git 提交记录和 TODO 变更 生成一份结构化的周报 Markdown 文件。 需要的工具Read、Glob、Bash用于 git log。Claude 会按照 skill-creator 的规范自动帮你生成完整的 Skill 目录预期输出 ~/.claude/skills/weekly-report-generator/ ├── SKILL.md # 包含 Frontmatter 和详细执行步骤 ├── scripts/ │ └── collect-commits.sh # 收集本周提交的脚本 └── resources/ └── template/ └── weekly-report.md # 周报模板提示skill-creator 会交互式地询问你一些问题技能名称、触发词、执行步骤等然后生成符合规范的 SKILL.md。初学者强烈建议先用 skill-creator 生成 Skill再根据需要手动调整比从零开始写效率高得多。4.3 构建自己的 Skill4.3.1 识别 Skill 化的机会观察你日常使用AI时的重复行为你是否经常给AI写类似的Prompt→ 把它变成Skill你的项目是否有固定的开发模式→ 把它变成Skill你是否有标准化的审查流程→ 把它变成Skill提示DRY原则Dont Repeat Yourself不仅适用于代码也适用于Prompt。如果你发现自己连续3次写了类似的Prompt就是时候把它Skill化了。4.3.2 实战创建一个 React 组件生成 Skill需求每次创建新的React组件时需要遵循统一的文件结构和编码规范。我们来创建一个包含模板和验证脚本的完整 Skill 包。Step 1创建 Skill 目录结构在项目根目录下创建如下结构# 一次性创建完整的 Skill 目录 $ mkdir -p .claude/skills/react-component/scripts $ mkdir -p .claude/skills/react-component/resources/template $ mkdir -p .claude/skills/react-component/resources/examples创建后的目录结构.claude/skills/react-component/ # Skill 根目录 ├── SKILL.md # 核心指令文件 ├── scripts/ # 辅助脚本 │ └── validate.js # 组件结构验证脚本 └── resources/ # 配套资源 ├── template/ # 代码模板 │ ├── component.tsx.tpl # 组件主文件模板 │ └── test.tsx.tpl # 测试文件模板 └── examples/ # 示例 └── BookmarkCard-example/ # 一个完整的示例组件供参考Step 2编写 SKILL.md核心指令创建.claude/skills/react-component/SKILL.md--- name: react-component-generator version: 1.0 description: 根据组件名称和功能描述生成符合项目规范的 React 组件文件集 trigger: [创建组件, 新建React组件, 生成组件] tools: [typescript, react, tailwindcss] author: your-name --- # React 组件生成器 ## 触发条件 当用户要求创建新的 React 组件时使用此 Skill。 ## 输入参数 - componentName必填组件名称使用 PascalCase 格式 - description必填组件功能描述 - hasProps可选默认true是否需要 Props 类型定义 - hasState可选默认false是否需要状态管理 ## 执行步骤 1. 在 src/components/ 目录下创建组件文件夹 src/components/{componentName}/ 2. 参考 resources/template/ 中的模板文件创建以下文件 - index.tsx - 组件主文件参考 component.tsx.tpl - types.ts - TypeScript 类型定义如果 hasPropstrue - {componentName}.test.tsx - 测试文件参考 test.tsx.tpl 3. 组件代码规范 - 使用函数式组件 TypeScript - Props 使用 interface 定义命名为 {componentName}Props - 使用 Tailwind CSS 处理样式 - 导出使用 named export - 添加 JSDoc 注释说明组件功能 4. 测试代码规范 - 使用 testing-library/react - 至少包含渲染测试、Props 传递测试 5. 创建完成后可运行 scripts/validate.js 验证组件结构完整性。 ## 输出规范 - 所有文件创建完成后报告创建的文件列表 - 给出组件的使用示例代码 ## 参考示例 参见 resources/examples/BookmarkCard-example/ 中的完整示例。 ## 示例 输入 - componentName: BookmarkCard - description: 展示单个书签的卡片组件显示标题、URL和标签 - hasProps: true - hasState: false 预期输出文件 - src/components/BookmarkCard/index.tsx - src/components/BookmarkCard/types.ts - src/components/BookmarkCard/BookmarkCard.test.tsxStep 3创建辅助脚本scripts/创建.claude/skills/react-component/scripts/validate.js// scripts/validate.js —— 验证组件目录结构是否完整 // AI 在执行 Skill 后可以运行此脚本进行自检 const fs require(fs); const path require(path); function validateComponent(componentName) { const dir path.join(src/components, componentName); const requiredFiles [index.tsx, types.ts]; const missing []; requiredFiles.forEach(file { if (!fs.existsSync(path.join(dir, file))) { missing.push(file); } }); if (missing.length 0) { console.error( 组件 ${componentName} 缺少文件: ${missing.join(, )}); return false; } console.log( 组件 ${componentName} 结构验证通过); return true; } // 从命令行参数获取组件名 const componentName process.argv[2]; if (!componentName) { console.error(用法: node validate.js ComponentName); process.exit(1); } validateComponent(componentName);Step 4创建代码模板resources/template/创建.claude/skills/react-component/resources/template/component.tsx.tpl// resources/template/component.tsx.tpl —— 组件代码模板 // AI 生成代码时参考此模板结构 /** * {componentName} 组件 * {description} */ import { {componentName}Props } from ./types; export function {componentName}({ ...props }: {componentName}Props) { return ( div className... {/* 组件内容 */} /div ); }提示resources/template/中的模板文件不是让 AI 原样复制的而是给 AI 一个参考样式。AI 会根据模板的结构和风格结合用户需求生成实际代码。这比纯文字描述更直观生成质量也更高。Step 5在 CLAUDE.md 中引用此 Skill在你的 CLAUDE.md 文件中添加## 可用 Skills - 创建 React 组件时请读取 .claude/skills/react-component/SKILL.md 并严格遵循其中的规范Step 6使用 Skill在 Claude Code 中输入 请按照 React 组件生成器 Skill 的规范创建一个 BookmarkCard 组件。 组件功能展示单个书签的卡片显示标题、URL、描述和标签列表。 需要 Props不需要状态管理。Claude Code 会按照 Skill 定义的规范参考模板文件自动创建所有文件。完成后你还可以运行验证脚本确认结构$ node .claude/skills/react-component/scripts/validate.js BookmarkCard 组件 BookmarkCard 结构验证通过4.4 Skill 与 AI 工具的集成4.4.1 在 Claude Code 中集成方法一通过 CLAUDE.md 引用推荐在 CLAUDE.md 中添加 Skill 引用## 项目 Skills 以下 Skill 定义了标准化的开发流程每个 Skill 是一个目录核心指令在 SKILL.md 中 - .claude/skills/react-component/ - React 组件生成规范 - .claude/skills/api-endpoint/ - API 端点生成规范 - .claude/skills/git-commit/ - Git 提交规范 - .claude/skills/security-audit/ - 代码安全审计 执行相关任务时请先阅读对应 Skill 目录下的 SKILL.md 并严格遵循。 如 Skill 中包含 scripts/、resources/ 或 references/请一并参考。方法二通过自定义 slash commands将 Skill 的触发文件放在.claude/commands/目录下即可通过/skill名称直接触发# 文件结构 .claude/ ├── commands/ │ ├── new-component.md # 触发方式/new-component引用 skills 中的规范 │ └── security-check.md # 触发方式/security-check └── skills/ ├── react-component/ # 完整 Skill 包SKILL.md scripts resources │ ├── SKILL.md │ ├── scripts/ │ └── resources/ ├── api-endpoint/ # 中等 Skill 包SKILL.md resources/config │ ├── SKILL.md │ └── resources/ ├── security-audit/ # 参考文档型SKILL.md references resources/examples │ ├── SKILL.md │ ├── references/ │ └── resources/ └── git-commit/ # 简单 Skill仅 SKILL.md └── SKILL.md4.4.2 在 Cursor 中集成将 Skill 的核心规则写入 Cursor Rules推荐.cursor/rules/*.mdc旧项目可用.cursorrulesWhen creating new React components: - Follow the structure defined in .claude/skills/react-component/SKILL.md - Reference templates in .claude/skills/react-component/resources/template/ - Always create types.ts for Props definitions - Always include basic test file4.5 Skill 的迭代与版本管理4.5.1 持续优化Skill 不是写完就不管了。每次使用后记录AI 哪些地方做得好→ 保持AI 哪些地方做得不好→ 在 Skill 中加入更明确的指令有没有遗漏的边界情况→ 补充到错误处理部分4.5.2 版本管理用 Git 管理你的 Skill 目录就像管理代码一样# 提交整个 Skill 包包括 SKILL.md、scripts、resources 等 $ git add .claude/skills/react-component/ $ git commit -m feat(skills): 新增 React 组件生成 Skill v1.0 # 更新 Skill 后修改 SKILL.md 中的版本号并提交 $ git add .claude/skills/react-component/SKILL.md $ git commit -m chore(skills): 升级 React 组件 Skill 至 v1.1优化模板4.6 Superpowers 插件Superpowers 是 Claude Code 生态中的一类社区增强插件 / Skills 集合。它不是“必装”的但思路值得学习把成熟工作流封装成可复用能力让 AI 不只是会写代码还会按固定方法做事。4.6.1 什么是 SuperpowersSuperpowers 本质是一套工作方法论集合通常会封装成多个可复用 Skill。安装后AI 可以在合适的任务中调用这些方法论。安装前后对比没装 Superpowers装了 Superpowers你“加个批量导出功能”你“加个批量导出功能”AI“好的我来实现...”直接写代码AI“在开始前我需要确认1.导出格式2.数据量多大3.需要异步吗”→给出 2-3 个方案确认后再动手4.6.2 核心 Skills 一览Skill功能触发时机头脑风暴 (brainstorming)需求分析→设计规格先想清楚再动手新需求/新功能开始时编写计划 (writing-plans)把规格拆成可执行的实施步骤确认设计后执行计划 (executing-plans)按计划逐步实施每步验证开发过程中测试驱动开发 (TDD)严格 TDD先写测试再写代码开发核心逻辑时系统化调试 (debugging)四阶段调试法定位→分析→假设→修复遇到 Bug 时代码审查 (code-review)派遣审查 agent 检查代码质量功能完成后完成前验证 (verification)声称完成前必须跑验证任务结束前4.6.3 安装方法方式一npx 一键安装推荐# 进入你的项目目录重要不要在主目录 ~ 下运行 $ cd /your/project # 英文版原版 $ npx superpowers # 中文增强版推荐国内用户包含 6 个中国特色 Skill $ npx superpowers-zh安装后会在项目下生成.claude/skills/目录包含所有 Skill 文件。方式二手动安装备选# 克隆仓库 git clone https://github.com/jnMetaCode/superpowers-zh.git # 复制 skills 到项目 cp -r superpowers-zh/skills /your/project/.claude/skills注意手动安装只复制了 Skills 文件不会配置自动触发钩子。推荐使用 npx 方式一键安装。4.6.4 是否必须安装不是必须的。Superpowers 是一个“锦上添花”的增强插件初学者建议先不装熟悉 Claude Code 基本操作后再考虑日常开发强烈推荐安装能显著提升代码质量和开发流程规范性团队项目强烈推荐安装统一团队的 AI 工作方法论~/.claude/ └── commands/ ← 你的全局 Skills ├── review.md ← 代码审查 Skill ├── refactor.md ← 重构优化 Skill └── test.md ← 测试生成 Skill 项目根目录/ └── .claude/ ├── commands/ ← 项目级 Skills │ ├── deploy.md ← 部署流程 Skill │ └── migrate.md ← 数据库迁移 Skill ├── settings.json ← 项目配置 └── CLAUDE.md ← 项目规则文件图Superpowers Skills 目录结构 —— 全局Skills对所有项目生效项目级Skills仅对当前项目生效4.7 MCPModel Context Protocol简介MCP 是 Anthropic 推出的一个标准化协议让 AI 工具可以连接外部服务和数据源。你可以把 MCP 理解为给 AI 装插件或扩展能力。MCP 的概念AI 工具Claude Code │ ├── 内置能力读写文件、运行命令 │ └── MCP 扩展能力 ├── GitHub MCP Server → 操作 GitHub创建PR、管理Issue ├── Database MCP Server → 直接查询数据库 ├── Browser MCP Server → 浏览器自动化测试 └── 更多第三方 MCP Server...