尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

Superpowers 使用指南

Superpowers 使用指南 Superpowers 使用指南Claude Code 工作流增强插件完整使用手册目录概述核心理念可用 Skills 分类典型工作流最佳实践常见问题 FAQ实战案例概述什么是 SuperpowersSuperpowers 是 Claude Code 的官方工作流增强插件包含一系列专业化的Skills技能帮助你更系统、更高效地完成开发任务。为什么需要 Superpowers没有 Superpowers 的问题❌ 直接开始编码需求理解不充分❌ 测试失败后盲目修改缺乏系统性排查❌ 代码写完自认为完成实际未验证❌ 重构时没有计划容易遗漏场景使用 Superpowers 的优势✅ 强制性的需求探索brainstorming✅ 测试驱动开发TDD✅ 系统化的调试流程systematic-debugging✅ 完成前强制验证verification-before-completion✅ 规范的代码审查流程安装方法# 在 Claude Code 中执行/plugininstallsuperpowersclaude-plugins-official# 重新加载插件/reload-plugins核心理念Skill-First 工作流黄金法则在执行任何操作前先检查是否有相关的 skill 可用。即使只有 1% 的可能性相关也应该调用检查。用户请求 → 检查 Skills → 调用 Skill → 按流程执行 → 完成任务 ↑ 这一步不能跳过何时必须使用 Skill场景对应 Skill触发条件开发新功能/组件brainstorming任何创建性工作前实现功能/修复 bugtest-driven-development写代码前遇到 bug/测试失败systematic-debugging出现意外行为时声称完成verification-before-completion提交/创建 PR前多步骤任务writing-plans需要修改 3 文件时常见的合理化陷阱当你产生以下想法时立即停止你正在合理化跳过 skill❌ 错误想法✅ 正确做法“这只是个简单问题”简单任务更需要规范流程“我需要先看看代码”Skill 会告诉你怎么看“先收集信息再说”Skill 会指导你收集什么“我记得这个 skill”Skills 会更新必须读最新版“让我先试试这个方法”无纪律的行动浪费时间可用 Skills 分类必用类刚性流程这些 skills 提供严格的流程必须完整遵循不能裁剪或跳过步骤。1.brainstorming用途任何创建性工作前探索需求和设计触发开发新功能、修改行为、添加组件示例“帮我开发一个用户登录功能”2.test-driven-development用途测试驱动开发流程触发实现任何功能或修复 bug 前流程写测试 → 测试失败 → 写代码 → 测试通过 → 重构3.systematic-debugging用途系统化诊断 bug触发测试失败、意外行为、错误报告流程重现 bug → 收集证据 → 提出假设 → 验证 → 修复4.verification-before-completion用途完成前强制验证触发声称完成、提交代码、创建 PR 前要求运行验证命令确认输出禁止我觉得应该没问题规划类用于拆解和执行复杂任务。5.writing-plans用途为多步骤任务编写实施计划触发有明确需求规格需要修改 3 文件输出结构化的实施计划文档6.executing-plans用途在独立会话中执行计划特点带检查点可暂停审查7.subagent-driven-development用途在当前会话中并行执行计划中的独立任务触发计划中有可并行的独立模块协作类代码审查相关流程。8.requesting-code-review用途完成任务后请求代码审查触发完成功能实现、准备合并前9.receiving-code-review用途接收并处理代码审查反馈触发收到审查意见实施建议前要求技术严谨性验证反馈不能盲目接受10.finishing-a-development-branch用途决定如何整合完成的工作触发实现完成测试通过需要决定合并/PR/清理工具类提供特定场景的工具支持。11.dispatching-parallel-agents用途2 个无依赖的独立任务可并行时示例同时查询多个服务状态、并行构建多个模块12.using-git-worktrees用途创建隔离的 git worktree触发用户明确说worktree或需要执行计划时13.writing-skills用途创建、编辑、验证自定义 skills触发开发新 skill 或修改现有 skill典型工作流工作流 1开发新功能用户请求开发用户登录功能 Step 1: brainstorming ├── 探索需求密码加密方式JWTsession ├── 设计方案技术选型、架构设计 └── 输出明确的实施方案 Step 2: writing-plans如果复杂 ├── 拆解任务路由 → 控制器 → 数据库 → 测试 ├── 识别依赖哪些可以并行 └── 输出step-by-step 计划 Step 3: test-driven-development ├── 为每个模块写测试 ├── 运行测试失败 ├── 编写实现代码 ├── 运行测试通过 └── 重构 Step 4: verification-before-completion ├── 运行所有测试 ├── 运行 linter ├── 验证功能完整性 └── 确认无遗留问题 Step 5: requesting-code-review ├── 总结变更 ├── 列出测试覆盖 └── 请求审查工作流 2修复 Bug用户报告登录接口返回 500 错误 Step 1: systematic-debugging ├── 重现 bug具体的重现步骤 ├── 收集证据日志、错误堆栈、请求数据 ├── 提出假设可能的原因列表 ├── 验证假设逐个排除 └── 定位根因 Step 2: test-driven-development ├── 编写能重现 bug 的测试 ├── 运行测试失败证明 bug 存在 ├── 修复代码 ├── 运行测试通过 └── 确认其他测试未破坏 Step 3: verification-before-completion ├── 运行完整测试套件 ├── 验证修复有效 └── 确认无副作用 Step 4: requesting-code-review └── 提交修复工作流 3重构代码用户请求重构用户模块提取公共逻辑 Step 1: brainstorming ├── 分析当前问题重复代码在哪 ├── 设计重构方案提取哪些函数 └── 评估风险影响范围 Step 2: writing-plans ├── 列出需要修改的文件 ├── 确定重构步骤 └── 识别需要更新的测试 Step 3: test-driven-development ├── 先运行现有测试基线 ├── 执行重构 ├── 持续运行测试确保行为不变 └── 如有测试失败 → systematic-debugging Step 4: verification-before-completion ├── 所有测试通过 ├── 代码质量检查 └── 性能无劣化 Step 5: requesting-code-review └── 审查重构质量最佳实践1. Skill 调用时机❌ 错误用户帮我开发一个登录功能 Claude好的我先看看现有代码... [直接开始读文件]✅ 正确用户帮我开发一个登录功能 Claude[调用 brainstorming skill] Claude使用 brainstorming skill 来探索需求...2. 多个 Skills 的优先级当多个 skills 都适用时优先级顺序流程类优先brainstorming, debugging - 决定 HOW如何做实施类其次TDD, 具体实现 - 执行 WHAT做什么示例用户修复登录 bug 正确顺序systematic-debugging → test-driven-development → 实现修复3. 与 CLAUDE.md 规则的关系优先级用户明确指令CLAUDE.md、直接要求— 最高优先级Superpowers Skills— 覆盖默认系统行为默认系统提示— 最低优先级示例冲突处理如果 CLAUDE.md 说## 基本规则 编写代码前请先描述你的方案并等待批准。而test-driven-developmentskill 说先写测试✅遵守 CLAUDE.md先描述方案获批准后再按 TDD 流程执行❌ 不要盲目执行 skill 违反用户规则4. 判断是否应该使用 Skill决策树是否涉及任何行动 ├─ 否 → 可能不需要 skill纯咨询性问题 └─ 是 → 检查是否有匹配的 skill ├─ 有 → 必须使用 └─ 不确定 → 调用检查1% 原则实际示例用户请求是否需要 Skill使用哪个“这个函数是做什么的”❌ 可能不需要直接回答如果简单“帮我优化这个函数”✅ 需要brainstorming → TDD“测试失败了”✅ 需要systematic-debugging“代码写完了可以提交吗”✅ 需要verification-before-completion常见问题 FAQQ1: 每个任务都要用 Skills 吗A:不是所有任务但涉及行动的任务必须检查。✅ 需要开发、修复、重构、验证❌ 不需要简单咨询、解释概念、查看代码Q2: Skill 太繁琐能跳过某些步骤吗A:刚性 skillsTDD、debugging不能裁剪。这些流程经过验证跳过步骤会导致测试覆盖不足Bug 未彻底修复代码质量下降Q3: 如果 Skill 不适合我的场景怎么办A:调用后如果确实不适合可以不使用。Skill 加载后你会看到完整内容如果确实不匹配说明判断即可。但必须先调用检查不能主观臆断。Q4: 我的 CLAUDE.md 和 Skill 冲突怎么办A:CLAUDE.md优先级最高。示例CLAUDE.md“超过3个文件先拆分”Skill 建议直接实施遵守 CLAUDE.md先拆分任务Q5: 为什么调用 Skill 后还要宣布A:让用户知道你在使用哪个流程。✅ 好的做法 使用 brainstorming skill 来探索登录功能的需求和设计... ❌ 不好的做法 [静默调用 skill用户不知道发生了什么]Q6: 如何知道有哪些 Skills 可用A:系统会在会话中提示可用的 skills。也可以查看本文档的可用 Skills 分类章节。实战案例案例开发用户管理 REST API背景为一个 Node.js Express 项目开发用户管理功能包含用户注册POST /api/users/register用户登录POST /api/users/login获取用户信息GET /api/users/:id更新用户信息PUT /api/users/:id技术栈Node.js ExpressMongoDB MongooseJWT 认证Jest 测试框架完整工作流演示用户“帮我开发用户管理的 REST API”Step 1: 使用 brainstorming skillClaude: 使用 brainstorming skill 来探索需求... [调用 Skill tool: brainstorming] 探索问题 1. 密码存储方式 - 使用 bcrypt 加密 - Salt rounds: 10 2. 认证方式 - JWT token - 过期时间24小时 3. 数据验证 - 邮箱格式验证 - 密码强度至少8位包含数字和字母 4. 错误处理 - 统一错误响应格式 - HTTP 状态码规范 设计方案 - 路由层routes/users.js - 控制器层controllers/userController.js - 模型层models/User.js - 中间件middleware/auth.jsJWT 验证 - 工具函数utils/validation.js 是否确认这个设计用户“确认开始实施”Step 2: 使用 writing-plans skillClaude: 使用 writing-plans skill 来制定实施计划... [调用 Skill tool: writing-plans] 实施计划 Task 1: 创建用户模型 - 文件models/User.js - 内容Schema 定义、密码加密方法、token 生成方法 Task 2: 创建认证中间件 - 文件middleware/auth.js - 内容JWT 验证逻辑 Task 3: 创建验证工具 - 文件utils/validation.js - 内容邮箱、密码验证函数 Task 4: 实现用户控制器 - 文件controllers/userController.js - 内容register, login, getUser, updateUser 方法 Task 5: 配置路由 - 文件routes/users.js - 内容绑定路由到控制器 Task 6: 编写测试 - 文件tests/users.test.js - 内容每个 API 的测试用例 依赖关系 - Task 1, 2, 3 可以并行 - Task 4 依赖 Task 1, 2, 3 - Task 5 依赖 Task 4 - Task 6 贯穿始终TDD 开始执行用户“开始”Step 3: 使用 test-driven-development skillClaude: 使用 test-driven-development skill 实施 Task 1... [调用 Skill tool: test-driven-development] 3.1 编写测试tests/models/User.test.jsconstUserrequire(../../models/User);describe(User Model,(){test(should hash password before saving,async(){constusernewUser({email:testexample.com,password:password123});awaituser.save();expect(user.password).not.toBe(password123);});test(should generate valid JWT token,(){constusernewUser({_id:123,email:testexample.com});consttokenuser.generateAuthToken();expect(token).toBeDefined();});});3.2 运行测试预期失败npmtesttests/models/User.test.js FAIL tests/models/User.test.js ✕ shouldhashpassword before saving(5ms)✕ should generate valid JWT token(2ms)Tests:2failed,2total3.3 实现代码models/User.jsconstmongooserequire(mongoose);constbcryptrequire(bcrypt);constjwtrequire(jsonwebtoken);constuserSchemanewmongoose.Schema({email:{type:String,required:true,unique:true,lowercase:true},password:{type:String,required:true}},{timestamps:true});// 保存前加密密码userSchema.pre(save,asyncfunction(next){if(!this.isModified(password))returnnext();this.passwordawaitbcrypt.hash(this.password,10);next();});// 生成 JWT tokenuserSchema.methods.generateAuthTokenfunction(){returnjwt.sign({_id:this._id,email:this.email},process.env.JWT_SECRET,{expiresIn:24h});};module.exportsmongoose.model(User,userSchema);3.4 运行测试通过npmtesttests/models/User.test.js PASS tests/models/User.test.js ✓ shouldhashpassword before saving(245ms)✓ should generate valid JWT token(12ms)Tests:2passed,2totalStep 4: 继续实施其他 TasksClaude: Task 2 - 创建认证中间件 [继续使用 TDD 流程] 先写测试 → 运行失败→ 写代码 → 运行通过 Task 3 - 创建验证工具 [同上] Task 4 - 实现用户控制器 [同上这里会写 API 集成测试]Step 5: 遇到测试失败使用 systematic-debugging skillClaude: 运行测试时发现 login API 返回 500 错误 [调用 Skill tool: systematic-debugging] 5.1 重现 bugnpmtest-- tests/users.test.js-tshould login with valid credentialsFAIL tests/users.test.js ✕ should login with valid credentials(156ms)Expected:200Received:5005.2 收集证据 - 错误日志TypeError: Cannot read property compare of undefined - 请求数据{ email: testexample.com, password: password123 } - 数据库状态用户已存在 5.3 提出假设 Hypothesis 1: 密码比较方法未定义 Hypothesis 2: 用户查询返回 null Hypothesis 3: bcrypt 未正确引入 5.4 验证假设 [检查 userController.js]// 发现问题忘记在 User schema 中定义 comparePassword 方法constuserawaitUser.findOne({email});constisMatchawaituser.comparePassword(password);// ← comparePassword 未定义5.5 修复 在 models/User.js 中添加userSchema.methods.comparePasswordasyncfunction(candidatePassword){returnawaitbcrypt.compare(candidatePassword,this.password);};5.6 验证修复npmtest-- tests/users.test.js-tshould login with valid credentialsPASS tests/users.test.js ✓ should login with valid credentials(187ms)Step 6: 所有功能完成使用 verification-before-completion skillClaude: 使用 verification-before-completion skill 进行最终验证... [调用 Skill tool: verification-before-completion] 验证清单 ✅ 运行完整测试套件npmtestPASS tests/models/User.test.js PASS tests/middleware/auth.test.js PASS tests/controllers/userController.test.js PASS tests/routes/users.test.js Tests:24passed,24total Coverage:95.6%✅ 运行 Linternpmrun lint ✔ No linting errors found✅ 手动验证关键路径# 启动服务器npmstart# 测试注册curl-XPOST http://localhost:3000/api/users/register\-HContent-Type: application/json\-d{email:testexample.com,password:password123}# Response: 201 Created, { token: eyJhbGc... }# 测试登录curl-XPOST http://localhost:3000/api/users/login\-HContent-Type: application/json\-d{email:testexample.com,password:password123}# Response: 200 OK, { token: eyJhbGc... }# 测试获取用户信息curlhttp://localhost:3000/api/users/123\-HAuthorization: Bearer eyJhbGc...# Response: 200 OK, { _id: 123, email: testexample.com }✅ 检查错误处理 - ✓ 邮箱格式错误返回 400 - ✓ 密码过短返回 400 - ✓ 用户已存在返回 409 - ✓ 凭据错误返回 401 - ✓ Token 过期返回 401 ✅ 确认文档更新 - ✓ API 文档已添加到 docs/api.md - ✓ README.md 中添加使用说明 所有验证通过可以提交Step 7: 使用 requesting-code-review skillClaude: 使用 requesting-code-review skill 请求审查... [调用 Skill tool: requesting-code-review] 代码审查请求 变更摘要 - 新增用户管理 REST API注册、登录、获取、更新 - 实现 JWT 认证中间件 - 完整的单元和集成测试 文件变更 - 新增models/User.js用户模型 - 新增controllers/userController.js控制器 - 新增routes/users.js路由 - 新增middleware/auth.js认证中间件 - 新增utils/validation.js验证工具 - 新增tests/所有测试文件 - 修改app.js注册路由 测试覆盖 - 单元测试24 个 - 覆盖率95.6% - 所有测试通过 安全考虑 - 密码使用 bcrypt 加密 - JWT secret 存储在环境变量 - 输入验证防止注入攻击 请审查以下方面 1. API 设计是否合理 2. 错误处理是否充分 3. 安全性是否有遗漏 4. 测试覆盖是否足够案例总结使用的 Skills✅brainstorming- 探索需求和设计✅writing-plans- 拆解任务✅test-driven-development- TDD 实施✅systematic-debugging- 修复测试失败✅verification-before-completion- 完成前验证✅requesting-code-review- 请求审查工作成果✅ 功能完整的用户管理 API✅ 95.6% 测试覆盖率✅ 所有测试通过✅ 代码质量检查通过✅ 安全性考虑周全✅ 文档完整时间对比无 Superpowers有 Superpowers直接开始编码 → 需求理解不足 → 返工brainstorming → 需求明确 → 一次性完成写完代码再补测试 → 覆盖率低TDD → 测试先行 → 高覆盖率盲目调试 → 浪费时间systematic-debugging → 快速定位自认为完成 → 遗留 bugverification → 完整验证 → 质量保证预计节省时间40-50%结语Superpowers 不是增加工作量而是让工作更系统化、更高效。初期可能觉得流程繁琐但长期收益巨大✅ 更少的返工✅ 更高的代码质量✅ 更快的问题定位✅ 更强的团队协作建议从小任务开始练习使用 skills逐步养成 skill-first 的工作习惯遇到问题先问有没有对应的 skill不要合理化跳过流程记住黄金法则即使只有 1% 的可能性相关也要调用检查。附录快速参考表任务类型使用 Skill关键点开发新功能brainstorming → writing-plans → TDD需求先行修复 bugsystematic-debugging → TDD重现 bug写测试重构代码brainstorming → writing-plans → TDD保持测试通过准备提交verification-before-completion验证所有测试请求审查requesting-code-review总结变更并行任务dispatching-parallel-agents确保独立性
返回列表