海洋随笔

主题

羊村村长2026-06-16 08:59:27
2544
10.1m
0

必备 Skills 推荐 ​

以下是我反复阅读正文后整理的详尽笔记：

AI 编程必备 Skills 推荐：TDD、代码审查与网页自动化实战 ​

一、Superpowers：完整开发流程框架 ​

定位：专为 AI 编程 Agent（Claude Code、Cursor、Codex、OpenCode 等）设计的软件开发工作流框架

核心技能清单 ​

技能名称触发方式核心功能
brainstorming/superpowers:brainstorm苏格拉底式提问理清需求，输出设计文档
using-git-worktrees自动（设计确定后）创建隔离的 Git worktree 分支
writing-plans自动将设计拆解为 2-5 分钟可执行小任务
executing-plans自动（可选）批量执行简单重复任务
test-driven-development自动（代码实现阶段）强制红-绿-重构循环，先写测试再写实现
subagent-driven-development自动（可选）子代理执行 + 两阶段自动审查
code-review自动（任务完成后）双阶段代码审查
systematic-debugging需要时触发四阶段系统化除错
verification-before-completion自动（宣称完成时）强制验证，无证据不能声称完成

安装方式（Claude Code） ​

bash
# 1. 安装 Claude Code（Node.js 18+）
npm install -g @anthropic-ai/claude-code

# 2. 注册插件市场
/plugin marketplace add obra/superpowers-marketplace

# 3. 安装插件
/plugin install superpowers@superpowers-marketplace

安装选项建议 ​

选项作用范围推荐场景
User scope全局生效⭐ 推荐。通用方法论，跨项目可用
Project scope项目成员共有团队统一规范
Local scope仅限当前文件夹临时试用

项目地址：https://github.com/obra/superpowers

二、Everything Claude Code：解决上下文腐化 ​

背景：Anthropic 黑客松冠军作品，8 小时完成一个产品，GitHub 近 4w Star

核心架构 ​

组件类型作用说明
Agents子智能体分工：规划、架构、TDD、代码审查
Skills封装工作流：TDD 方法论、后端开发经验
Hooks自动执行任务：改完代码自动检查遗留调试日志
Rules全局开发规范
Commands斜杠命令：/tdd、 /code-review

实测效果 ​

  • 功能开发速度提升 65%
  • 代码审查发现问题减少 75%
  • PR 平均问题数从 12 个 → 3 个

核心痛点解决：上下文腐化 ​

AI 聊太久会"失忆"，输出质量下降。通过清晰的角色框架保持输出稳定：

  • 每个 Agent 只负责擅长领域，不越界
  • 每个 Skill 有明确触发条件和执行步骤

项目地址：https://github.com/affaan-m/everything-claude-code

三、UI UX Pro Max：专业设计系统生成 ​

定位：专为 AI 编程 Agent 设计的专业 UI/UX 设计 Skill

v2.0 核心能力：Design System Generator ​

根据产品类型、行业特性、目标用户，几秒内自动生成完整设计系统

内置设计知识库 ​

资源类型数量说明
UI 风格67 种Glassmorphism、Neumorphism、Bento Grid、AI-Native UI 等
行业色板161 个带色值的专属配色方案
字体搭配57 种附 Google Fonts 链接
推理规则161 条行业特定的设计系统生成规则
UX 准则99 条最佳实践、反模式、可访问性
支持技术栈13 种React/Next.js + shadcn/ui、Vue/Nuxt、Tailwind、SwiftUI、Flutter 等

工作示例 ​

输入："帮我做一个美容 SPA 的落地页"

推理链：健康养生行业 → Soft UI 风格 → 淡粉 + 鼠尾草绿 + 金色点缀 
       → Cormorant Garamond 字体 → 列出行业反模式（禁用 AI 感紫粉渐变）

安装方式 ​

Claude Code（推荐）：

bash
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Cursor / Windsurf / Continue：

bash
npm install -g uipro-cli
uipro init --ai claude    # 或 cursor、windsurf

轻量替代：frontend-design（Anthropic 官方） ​

  • 专注打破 AI 生成的美学套路
  • 拒绝 Inter/Roboto 泛滥字体、紫白渐变套路配色
  • 鼓励大胆排版和非常规布局

项目地址：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

四、sanyuan-skills：生产级代码审查 ​

定位：面向生产环境的 Claude Code 技能集合，封装资深工程师审查经验

三大核心技能 ​

技能名称核心功能适用场景
Code Review ExpertSOLID 原则、安全性、性能、错误处理、边界条件代码提交前质量把关
Sigma基于 Bloom's 2-Sigma 理论的 1 对 1 AI 导师，苏格拉底式提问学习新技术、深入理解概念
Skill Forge元技能，内置 12 种实战检验技术开发自定义 Skill 的起点

Code Review Expert 审查维度 ​

  • SOLID 原则：单一职责、开闭原则、里氏替换等
  • 安全性：SQL 注入、XSS、敏感信息泄露
  • 性能：算法复杂度、内存泄漏、不必要循环
  • 错误处理：异常捕获、边界条件、空值处理
  • 代码质量：命名规范、注释、可读性

安装与使用 ​

bash
# 安装代码审查专家
npx skills add sanyuan0704/sanyuan-skills --path skills/code-review-expert

# 安装 Sigma 导师
npx skills add sanyuan0704/sanyuan-skills --path skills/sigma

# 安装 Skill Forge
npx skills add sanyuan0704/sanyuan-skills --path skills/skill-forge
bash
/code-review-expert    # 审查当前 git 变更
/sigma <主题>           # 启动学习辅导，如 /sigma React Hooks
/skill-forge           # 创建新技能

项目地址：https://github.com/sanyuan0704/sanyuan-skills

五、Web Access：网页浏览与自动化操作 ​

定位：补齐 Claude Code 的浏览器自动化能力，支持自主浏览、操作动态页面、跨会话积累经验

核心能力对比 ​

能力说明
自动工具选择智能选择 WebSearch / WebFetch / curl / Jina / CDP，可组合
CDP 浏览器操作直连日常 Chrome，自然携带登录态；支持动态页面、交互操作、视频帧捕获
并行分治子 Agent 并行处理多目标，共享 Proxy，Tab 级隔离
站点经验积累按域名存储操作经验（URL 规律、平台特征、已知坑点），跨会话复用
媒体提取DOM 提取图片/视频 URL，截取任意时间点视频帧并分析

v2.4.1 更新 ​

  • 脚本从 bash 迁移到 Node.js，支持 Windows / Linux / macOS
  • 新增 DOM 边界穿透：处理 Shadow DOM、iframe 等选择器无法到达的元素

安装与前置条件 ​

bash
git clone https://github.com/eze-is/web-access ~/.claude/skills/web-access

前置条件：

  • Node.js 22+
  • Chrome 开启远程调试：chrome://inspect/#remote-debugging → 勾选 "Allow remote debugging for this browser instance"

自然语言驱动示例 ​

搜索一下 xxx 的最新进展
帮我去小红书搜一下 xxx 的账号
同时调研这 5 个产品网站，给我一个对比总结

项目地址：https://github.com/eze-is/web-access

六、skill-creator：官方 Skill 开发工具 ​

定位：Anthropic 官方元技能，用于创建、修改和优化 Skill

开发工作流 ​

阶段工作内容
意图捕获明确 Skill 边界和目标
起草 SKILL.md编写核心指令文件（frontmatter + 指令内容）
测试验证创建测试用例，运行对比实验（有 Skill vs 无 Skill）
迭代优化根据反馈持续改进指令
描述优化优化 description，提高触发准确性

内置评估系统 ​

  • 生成可视化评测报告
  • 对比"使用 Skill"和"不使用 Skill"的输出差异
  • 支持多轮迭代优化

项目地址：https://github.com/anthropics/skills/tree/main/skills/skill-creator

七、场景速查表 ​

场景推荐 Skill一句话说明
完整开发流程SuperpowersTDD + Code Review + 自动计划，装完直接用
多角色协作Everything Claude Code子 Agent 分工，解决上下文腐化
UI 设计UI UX Pro Max / frontend-design前者完整设计系统，后者轻量设计指导
代码审查sanyuan-skillsSOLID + 安全 + 性能多维度审查
网页浏览与操作Web AccessCDP 浏览器自动化 + 站点经验积累
自制 Skillskill-creatorAnthropic 官方的 Skill 开发工具

新手入门建议 ​

从 Superpowers + sanyuan-skills 入手

  • 前者管开发流程（TDD、计划、验证）
  • 后者管代码质量（审查、学习、造工具）
  • 覆盖最常见的开发需求，无需全装

附录：Claude Code 核心命令详解（关联内容） ​

命令体系分层 ​

层级示例特性
Commands（硬编码）/clear, /compact, /model, /cost, /help, /review直接终端交互，不消耗 Token，执行快
Bundled Skills（捆绑技能）/simplify, /batch, /debug, /loop, /claude-api基于 Prompt，调用时载入 Markdown 指令集，消耗 Token

关键命令对比 ​

命令核心功能与相关命令的区别
/simplify自动改代码：并行 3 个 Agent（Code Reuse / Quality / Efficiency），直接修复vs /review：simplify 直接改，review 只列建议
/review正确性审查：分级报告（Critical/High/Medium/Low），不改代码vs /simplify：关注 Bug 而非重构；vs /security-review：通用 vs 安全专项；vs /ultrareview：本地 vs 云端深度多 Agent
/loop定时任务 + 自主迭代：Cron 模式定时执行，或 Agentic Loop 自动试错直到完成三种调度：Cloud 任务（云端可靠）、Desktop 任务（本地文件）、/loop（临时快速，需保持会话）
/batch多任务并行编排：自动拆解为独立 Unit，多 Worker 并行执行，各用独立 Git Worktree适合边界清晰的大任务；不适合强耦合核心链路
/debug排查 Claude Code 自身问题：MCP 连接、工具调用失败、权限规则等非业务代码 debug；建议 claude --debug 启动以捕获完整日志

推荐工作流组合 ​

1. /context        → 检查上下文健康
2. /permissions    → 收紧高风险权限
3. /batch          → 拆解大需求为独立任务
4. /loop           → 处理需反复验证的复杂任务
5. /simplify       → 清理冗余代码和技术债
6. /review          → 正确性审查
7. /security-review → 敏感模块安全兜底（登录/支付/权限/上传/Webhook）
8. /diff           → 人工确认改动
9. 测试 → 提交 PR

上下文管理关键 ​

命令用途使用时机
/context查看上下文占用情况长任务变慢、变飘时
/compact总结并压缩上下文大任务中途续命，必须指定保留范围

接入国内模型 ​

  • MiniMax / GLM：标准 OpenAI 兼容接口
  • 推荐工具：CC Switch（https://github.com/farion1231/cc-switch）
  • 验证清单：stream 输出、Bash/Read/Edit/Write 调用、subagent、长上下文处理、MCP 工具调用、完整开发闭环
最近更新