一套AI全栈的Skill 工具包

之前聊执行层 MCP 的时候，我说过一句话：MCP 给 AI 一双手，让它能碰真实系统。

但光有手还不够。

手会干活是一回事，干得符不符合你的标准、踩不踩你过去踩过的坑，是另一回事。一个 AI 能操作浏览器、能提交代码、能查数据库，但它在写一个 Controller 的时候知不知道业务逻辑应该放在 Service 层而不是堆在 Controller 里？它改完一个页面之后会不会自己去验证一下 UI 效果？它看到一个报错是直接猜一个原因开始乱改，还是按流程排查？

这些问题，模型本身回答不了。

Skill 解决的就是这个问题——把"这个 Agent 应该怎么干活"固化下来，而不是每次重新教一遍。

最近 Skills 的生态也慢慢起来了。npx skills 现在可以给 Claude Code、Codex、Cursor、OpenCode 等多种 Coding Agent 安装 Skill。如果你做全栈开发，我会优先装流程型 + 前端质量 + 测试验证 + Debug + 部署这几类，而不是单纯堆某个框架的语法知识。

下面是我比较推荐的一套组合。

前端质量：防住"AI 味"的 UI

frontend-design —— 强烈推荐

这是 Anthropic 官方 Skill，专门解决 AI 写前端时那个很普遍的问题：功能没问题，但一眼 AI 味。

AI 写 UI 的时候有个通病。布局规整但平庸，配色不丑但毫无性格，间距、字体、视觉层级都像套了一个默认模板。如果你见过 AI 生成的 Dashboard 和登录页，大概知道我在说什么——所有东西都在该在的位置，但就是没有生命力。

这个 Skill 会要求 Agent 在布局、排版、字体、视觉层级、动效等方面主动做设计判断，而不是默认给一套 Bootstrap 风的模板。

适合 Vue / React 页面、Dashboard、后台管理系统、登录页、Landing Page、UI 重构。你经常搞 Vibe Coding UI 的话，这个属于必装。

vercel-react-best-practices

如果做 React / Next.js，这个几乎不用解释。

Vercel Engineering 官方维护，目前涵盖几十条针对 Agent 的规则：Async Waterfall、Bundle Size、SSR、Data Fetching、Re-render、Rendering、JavaScript Performance。最大价值不是"告诉你怎么写 React"，而是防止 AI 写出能跑但性能结构一塌糊涂的 React 代码。

安装很简单：

npx skills add vercel-labs/agent-skills

composition-patterns

也是 Vercel 官方 Skill。专门解决组件越写越难维护的问题：boolean props 爆炸、props drilling、巨型组件、组件职责混乱、复用能力差。引导 Agent 使用 Compound Components、State Lifting、Composition 等模式。

如果长期 Vibe Coding，一个很常见的问题是第一版很爽，写到第 30 个页面时开始发现维护困难。这种 Skill 就是在防这个。

测试验证：让 AI 自己证明"能跑"

webapp-testing —— 全栈开发必装

Anthropic 官方 Skill，通过 Playwright 真正运行你的 Web 应用，而不是"代码看起来应该能跑"。它可以管理本地服务、打开页面、操作 UI、查看浏览器日志并验证实际行为。

最理想的工作方式就是：

写代码 → 启动前后端 → 打开浏览器 → 登录 → 操作功能 → 检查结果 → 有问题继续修

和我们之前聊的执行层 MCP 思想完全一致——AI 自己完成"实现—运行—观察—验证"的闭环。

test-driven-development

来自 obra/superpowers。要求 Agent 严格遵循：RED 先写失败测试 → GREEN 最小实现 → REFACTOR 重构。而不是代码写了一大坨以后再补几个"为了覆盖率存在"的测试。

不一定所有项目都要严格 TDD，但对于核心 Service、权限逻辑、支付、状态机、数据转换、Bug Fix，这套流程非常好用。

Debug：别再让 AI 瞎猜了

systematic-debugging —— 我非常推荐

来自 obra/superpowers。它解决 Coding Agent 特别常见的一个坏毛病：看到一个报错，直接猜一个原因，然后开始乱改。

这个 Skill 强制 Agent 走一套标准流程：

收集错误 → 稳定复现 → 检查最近变化 → 找到故障边界 → 提出假设 → 最小验证 → 找到 Root Cause → 修改

核心原则就一条：不找到根因就不开始瞎修。

对大型 Java/Spring 项目尤其有用。那种几十个 Module、调用链深不见底的项目，AI 如果靠猜，能把整个工程改得面目全非。

verification-before-completion —— 防 AI 嘴硬

也是 Superpowers 里面我非常喜欢的一类。

AI 经常说"已经修复完成"，结果 npm build 没跑、mvn test 没跑、页面没打开、接口没请求。这个 Skill 的核心思想就是：没有证据，就不能宣布完成。

最终工作流应该变成：

修改完成 → compile → unit test → integration test → browser test → build → 才允许说 Done

我觉得这个甚至比很多 MCP 都有价值。它解决的不是 AI 能不能做的问题，而是 AI 有没有验证习惯的问题。

流程和协作：从个人 Vibe 到工程化

requesting-code-review

写完以后不要马上宣布完成，而是自动进入一次 Review。可以让 Agent 检查：Correctness、Security、Performance、Readability、Testability、Edge Cases、Breaking Changes。

对 Vibe Coding 很重要。AI 最大的问题往往不是写不出来，而是一次写太快，没有第二次审视。人写代码会下意识回头看一眼，AI 不会，除非你要求它。

writing-plans + executing-plans

这个特别适合大需求。不要一上来就"好的！开始疯狂写代码"，而是走一套更可控的流程：

Requirement → Explore Codebase → Design → Implementation Plan → Task 1 → Verify → Task 2 → Verify

Superpowers 已经提供了这两个 Skill，还有 subagent-driven-development、dispatching-parallel-agents 做进一步的 Agent 协作。

using-git-worktrees

如果已经开始多 Agent 并行开发，这个非常有价值。三个 Agent 可以在不同的 worktree 里分别干登录、支付、UI 优化，不会在同一个工作目录里疯狂互相覆盖。

造轮子：MCP 和 Skill 的元能力

mcp-builder

Anthropic 官方提供的 MCP Server 开发 Skill，用于指导 Agent 设计高质量 MCP，包括 Tool Schema、接口设计以及 Node/TypeScript、Python/FastMCP 实现。

如果你开始做 GitHub MCP、Database MCP、企业内部 MCP、MCP Gateway、Execution MCP，很值得装。

skill-creator

最后一个反而是我认为长期最重要的。

Anthropic 官方的 Skill Creator 不只是帮你生成 SKILL.md，现在已经开始强调一套完整的迭代流程：

创建 Skill → 构造测试 Prompt → 测试没有 Skill 时的表现 → 测试有 Skill 后的表现 → Eval → 修改 Skill

也就是 Skill 本身也需要评测。这和写代码要写测试是一个道理——你怎么知道这个 Skill 真的有效？靠跑 eval。

真正适合全栈开发的，我建议你自己再造几颗 Skill

现成 Skill 更多是通用能力。真正有价值的是把自己的工程经验固化进去。

例如我会给一个全栈 Coding Agent 配成这样：

.agents/skills/
 
├── frontend-design
├── frontend-engineering
├── backend-engineering
├── database-design
├── api-design
├── systematic-debugging
├── security-review
├── code-review
├── webapp-testing
├── deployment
├── production-troubleshooting
└── verification-before-completion

其中你自己维护的 backend-engineering 可以规定：Controller 不写业务逻辑、DTO/VO/DO 边界、事务使用原则、异常规范、日志规范、Feign 调用规范、Redis Key 规范、分页规范、幂等设计、接口鉴权。

database-design：表命名、字段类型、索引规范、唯一索引、联合索引、TEXT 使用原则、逻辑删除、时间字段、EXPLAIN 验证、禁止 SELECT *、Migration 规则。

deployment：

build → test → docker build → health check → deploy dev → smoke test → deploy production → verify → rollback strategy

这时候就已经不是"Claude 很会写代码"了，而是 "Claude 会按照我的工程方法写代码"。

OpenAI 对 Codex Skills 的定位现在其实也是这个方向：把团队标准、Workflow、资源和脚本打包成 Skills，让 Codex 在不同任务中稳定复用；Skills 还可以直接跟着 Repository 一起提交，让整个团队共享。

如果只让我选 8 个

我会配：

frontend-design
systematic-debugging
verification-before-completion
webapp-testing
code-review
writing-plans
database-design       ← 自己写
backend-engineering   ← 自己写

再组合之前聊的执行层 MCP：

Skills
    │
    ├─ 告诉 Agent「应该怎么做」
    │
Agent
    │
    ├─ Shell ─────── 本地执行
    │
    └─ MCP ───────── 外部执行
                         │
                   Browser / GitHub
                   DB / K8s / CI

我觉得这套才是目前全栈 Vibe Coding 最舒服的形态：MCP 给手脚，Skills 给经验和规矩，模型负责推理。

相比继续搜几十个社区 Skill，我更建议下一步直接自己做一个 fullstack-engineering Skill 套件，把前端、后端、数据库、Debug、测试、部署拆成 6～8 个 Skill。这样 Claude Code 和 Codex 都能吃，同一套规范也能直接放 GitHub。

这可能是 AI 时代比"找到最强的模型"更值得投入的事情。