如果说 MCP 让 AI “接上工具”，那 Skills 就是让 AI “学会流程”。
一个负责手，一个负责脑。

Agent Skills 正在变成 Cursor、Claude Code 这类 AI 编程工具的核心能力。

你可以把 Skill 理解成一份可安装的专业 SOP——通常是一个包含 SKILL.md 的目录，里面写清楚：遇到某类任务时，AI 应该怎么分析、怎么执行、怎么验证、哪些坑不能踩。

比如：

• 修 bug 时，先复现和定位根因，而不是直接乱改
• 写 React 时，遵循性能和组件边界最佳实践
• 做 UI 时，避免"一眼 AI"的紫色渐变大卡片
• 处理 Excel / PDF / Word 时，使用成熟的文档处理流程
• 做正式项目时，先设计、再计划、再 TDD、再审查

不是让 AI 多知道一点，而是让 AI 更像一个有工作习惯的工程师。

---

一、Skills、MCP、Slash Commands 有什么区别？

能力	解决什么问题	调用方式	类比
MCP	连接外部工具、数据库、浏览器、API	工具调用	手
Skills	教 AI 如何完成一类任务	模型自动判断	脑
Slash Commands	固定模板或固定流程入口	用户手动触发	快捷键

MCP 让 AI 能操作世界，Skills 让 AI 知道该怎么操作。

只装 MCP 不装 Skills，AI 可能"能做但做不好"；只装 Skills 不装 MCP，AI 可能"懂流程但缺工具"。两者配合，体验才完整。

---

二、Cursor 和 Claude Code 怎么加载 Skills？

Cursor 会自动扫描以下目录：

项目级：.agents/skills/  .cursor/skills/
用户级：~/.agents/skills/  ~/.cursor/skills/

Cursor 也兼容 Claude / Codex 的目录：

.claude/skills/  .codex/skills/
~/.claude/skills/  ~/.codex/skills/

Claude Code 主要目录：

项目级：.claude/skills/
用户级：~/.claude/skills/

Claude Code 还支持用 /skill-name 手动调用 Skill。更多细节见官方文档：Extend Claude with skills。

---

三、推荐安装方式：npx skills

目前最省事、最通用的方式是 Vercel Labs 开源的 npx skills，支持 Cursor、Claude Code、Codex、OpenCode 等工具。

官方仓库：vercel-labs/skills

安装到 Cursor：

npx skills add <repo> --skill <skill-name> -g -a cursor -y

安装到 Claude Code：

npx skills add <repo> --skill <skill-name> -g -a claude-code -y

两个都装：

npx skills add <repo> --skill <skill-name> -g -a cursor -a claude-code -y

参数	含义
-g	全局安装，所有项目可用
-a cursor	安装到 Cursor
-a claude-code	安装到 Claude Code
--skill	只安装仓库里的指定 Skill
-y	跳过确认

---

四、必装第一位：Superpowers

如果你用 Claude Code，Superpowers 是最值得第一个装的。

它不是单个 Skill，而是一整套软件工程工作流框架（agentic skills framework），核心是让 AI Agent 遵循可靠的开发方法论，而不是上来就写代码。

npx安装命令：

npx skills add https://github.com/obra/superpowers -g -a cursor -a claude-code -y

工作流程：

brainstorming → writing plans → TDD → debugging → code review → verification

能力	解决什么问题
brainstorming	需求不清楚时，先问清楚再设计
writing-plans	把大任务拆成可执行的小步骤
test-driven-development	先写失败测试，再写实现
systematic-debugging	先找根因，不随机打补丁
verification-before-completion	没跑验证，不准说完成
subagent-driven-development	复杂任务拆给子代理并行推进

安装（Claude Code）：

/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

验证和更新：

/help
/plugin update superpowers

官方仓库：obra/superpowers-marketplace
安装文档：Install on Claude Code - Superpowers

建议：Claude Code 用户必装 Superpowers；Cursor 用户优先装下面的通用 Skills。已装 Superpowers 的，不用再单独装 systematic-debugging、test-driven-development 等同源流程 Skill。

---

五、通用必装 Skills：少而精

Skills 不是越多越好，太多反而容易触发混乱。以下 5 个是我认为最值得装的通用组合。

1. Find Skills：发现 Skills 的元技能

帮你发现和选择 Skills 的 Skill。来源是 Vercel Labs 官方。

npx skills add https://github.com/vercel-labs/skills --skill find-skills -g -a cursor -a claude-code -y

适合场景：不知道有没有现成 Skill / 想按任务搜索 / 想让 AI 帮你判断装哪个。

官方页面：find-skills

2. Frontend Design：前端设计防 AI 味

Anthropic 官方 Skill。重点不是"多写 CSS"，而是让 AI 先确定视觉方向，再处理字体、色彩、动效、空间、质感，避免默认模板味。

npx skills add https://github.com/anthropics/skills --skill frontend-design -g -a cursor -a claude-code -y

适合场景：Landing Page / Dashboard / SaaS 页面 / 产品官网 / 组件视觉升级

3. Vercel React Best Practices：React / Next.js 性能规范

Vercel 出品，覆盖数据请求、bundle 优化、服务端性能、重渲染优化等规则。

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices -g -a cursor -a claude-code -y

适合场景：写 React 组件 / 重构前端 / 优化性能 / Review React / Next.js 代码

4. Web App Testing：浏览器自动化测试

Anthropic 官方 Skill，基于 Python Playwright。强调先观察页面、等待动态渲染、识别真实 selector，再执行操作。

npx skills add https://github.com/anthropics/skills --skill webapp-testing -g -a cursor -a claude-code -y

适合场景：本地 Web App 测试 / 表单流程验证 / UI 回归 / 自动截图和交互检查

5. Skill Creator：创建自己的 Skill

社区 Skill 解决通用问题，但真正让 AI 变强的是你自己的工作流——公司代码审查规范、项目发布流程、API 格式约定、数据库 migration 流程等。

npx skills add https://github.com/anthropics/skills --skill skill-creator -g -a cursor -a claude-code -y

适合场景：写团队专属 Skill / 沉淀项目 SOP / 把重复 prompt 变成可复用能力

---

六、按需安装：别全装

以下不是人人必装，但遇到对应场景非常好用。

文档处理：PDF / DOCX / XLSX

经常让 AI 处理 Office 文档、报告、表格、PDF 的话：

npx skills add https://github.com/anthropics/skills --skill pdf -g -a cursor -a claude-code -y
npx skills add https://github.com/anthropics/skills --skill docx -g -a cursor -a claude-code -y
npx skills add https://github.com/anthropics/skills --skill xlsx -g -a cursor -a claude-code -y

Supabase Postgres Best Practices

用 Postgres 或 Supabase 的话，覆盖 SQL 优化、schema 设计、RLS 策略、索引和查询性能：

npx skills add https://github.com/supabase/agent-skills --skill supabase-postgres-best-practices -g -a cursor -a claude-code -y

shadcn/ui

常用 shadcn/ui 的话，覆盖组件添加、主题修改、表单/弹窗/表格组合、Tailwind 设计系统：

npx skills add https://github.com/shadcn/ui --skill shadcn -g -a cursor -a claude-code -y

---

七、五分钟安装清单

Claude Code 用户，先装 Superpowers：

/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

通用 5 件套（Cursor + Claude Code 双装）：

npx skills add https://github.com/vercel-labs/skills --skill find-skills -g -a cursor -a claude-code -y
npx skills add https://github.com/anthropics/skills --skill frontend-design -g -a cursor -a claude-code -y
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices -g -a cursor -a claude-code -y
npx skills add https://github.com/anthropics/skills --skill webapp-testing -g -a cursor -a claude-code -y
npx skills add https://github.com/anthropics/skills --skill skill-creator -g -a cursor -a claude-code -y

只用 Cursor 的话，去掉 -a claude-code：

npx skills add https://github.com/vercel-labs/skills --skill find-skills -g -a cursor -y
npx skills add https://github.com/anthropics/skills --skill frontend-design -g -a cursor -y
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices -g -a cursor -y
npx skills add https://github.com/anthropics/skills --skill webapp-testing -g -a cursor -y
npx skills add https://github.com/anthropics/skills --skill skill-creator -g -a cursor -y

---

八、常用管理命令

# 查看已安装
npx skills list
npx skills list -a cursor
npx skills list -a claude-code

# 搜索
npx skills find react performance
npx skills find playwright testing
npx skills find postgres
npx skills find document

# 查看仓库里有哪些 Skill
npx skills add https://github.com/anthropics/skills --list
npx skills add https://github.com/vercel-labs/agent-skills --list

# 更新
npx skills update

---

九、Cursor 和 Claude Code 怎么分工？

Cursor 更适合：在 IDE 里多文件编辑、快速改前端、结合上下文局部重构、调 UI / 改组件 / 补业务逻辑。

Claude Code 更适合：终端驱动任务、大范围重构、长流程执行、跑测试 / 查日志 / 整理提交、配合 Superpowers 做严格工程流程。

同一批通用 Skills 同时装到两边是合理的。Cursor 负责"在编辑器里精修"，Claude Code 负责"在终端里推进"。

---

十、最后

记住一句话：

Claude Code 先装 Superpowers，Cursor 和 Claude Code 都装 Find Skills、Frontend Design、React Best Practices、Web App Testing、Skill Creator。

不要贪多。Skills 的价值不是数量，而是让 AI 在关键任务上稳定触发正确流程。

AI 编程助手最怕的不是"不聪明"，而是"太聪明但没规矩"。
Skills 做的事情，就是给它补上规矩。