我的 CC Skills 技能清单

这篇文章记录了我日常安装和使用的 Claude Code (CC) Skills。这些技能按照作用范围主要分为 Plugin（全局插件级） 和 项目级 两类。其中，Plugin 是全局生效的，而项目级则是专门针对特定项目环境配置的。

1. 安装方式说明

Claude Code Skills 有两种安装方式：

推荐使用 Plugin 方式，因为它是 Claude Code 原生支持的，后续更新更方便。支持 /plugin list 查看已安装插件，/plugin update 更新全部。

提示：表格中的 /plugin 为 Claude Code 交互终端内的命令；下文具体技能中出现的 claude plugin ... 为系统终端执行的命令，两者作用等价，可互换使用。

如何同步 Skills 更新？

• Plugin 方式：执行 /plugin update 或重新 install 即可
• npx 方式：重新执行当初的 npx skills add ... 命令（npx 默认拉取最新版本）

2. Plugin（全局插件级）

1. Superpowers

规范开发流程，防止 Claude 出现 “乱来” 的情况。它的核心作用是将 Claude 从一个缺乏规划的 “莽夫” 转变为按规矩办事、逻辑严密的 “工程师”。

包含的技能：

1
2
3
4
5
6

# 推荐安装方式（obra 专用 marketplace，更稳定）
claude plugin marketplace add obra/superpowers-marketplace
claude plugin install superpowers@superpowers-marketplace

# 备选（官方 marketplace）
# /plugin install superpowers@claude-plugins-official

GitHub: https://github.com/obra/superpowers
推荐 marketplace: https://github.com/obra/superpowers-marketplace

2. planning-with-files

主要用于解决 Claude “短期记忆不靠谱” 的痛点。它能强制将计划、进度、发现和决策等关键信息写入 Markdown 文件中，让任务进度有迹可循，不再只活在短暂的聊天上下文里。

包含的技能（存在多语言版本，通常只需保留中英文即可）：

1
2
3
4
5
6

# planning-with-files 暂无官方 Plugin marketplace，npx 是目前最可靠的方式
# 更新：重新执行此命令即可，npx 默认拉取最新版本
npx skills add OthmanAdi/planning-with-files --skill planning-with-files -g

claude plugin marketplace add OthmanAdi/planning-with-files
claude plugin install planning-with-files   # 注意：不要加 @planning-with-files

GitHub: https://github.com/OthmanAdi/planning-with-files

3. andrej-karpathy-skills（CLAUDE.md）

引入类似大神 Andrej Karpathy 的硬核编程习惯与最佳实践。通常用于规范 AI 的代码输出风格，使其更倾向于极简、高效、无冗余依赖且底层逻辑清晰的实现方式。

1
2
3
4
5
6

# 推荐方式（Plugin，由 forrestchang 封装适配）
claude plugin marketplace add forrestchang/andrej-karpathy-skills
claude plugin install andrej-karpathy-skills@karpathy-skills

# 备选方式（npx，使用 multica-ai 的原版仓库）
npx skills add https://github.com/multica-ai/andrej-karpathy-skills

原版仓库: https://github.com/multica-ai/andrej-karpathy-skills
Plugin 适配版: https://github.com/forrestchang/andrej-karpathy-skills

4. Claude Mem

致力于解决 AI 的长期记忆问题。它能自动捕获 Claude 在开发过程中的关键操作、观察结果和技术决策，将其压缩为可检索的记忆结构，并在后续的会话中重新注入，保持上下文连贯。

1
2
3
4
5
6
7
8

# 为什么用 npx 而不是 Plugin？
# claude-mem 自带 CLI 安装器，npx claude-mem install 会自动完成 hooks 注册、.claude_mem/ 目录初始化等额外配置，比单纯装一个 Plugin 更完整。
# 更新时直接重新执行同一命令即可（npx 会自动拉取最新版本）。
npx claude-mem install

# 备选：Plugin 方式（仅安装提示词部分，不含 CLI 初始化逻辑）
claude plugin marketplace add thedotmack/claude-mem
claude plugin install claude-mem

GitHub: https://github.com/thedotmack/claude-mem
提示：Claude Mem 会在项目中写入隐藏文件（如 .claude_mem/）来存储记忆，建议在 .gitignore 中忽略该目录，避免将个人记忆文件提交到仓库。

5. Context7

专门解决 “文档过期” 问题。它能将最新的、特定版本的官方文档与代码示例直接拉入上下文中，避免 Claude 仅依赖训练数据中过时的老旧记忆来编写代码，大幅提高 API 调用的准确率。

安装方式（Plugin + MCP Server 配合）：

• Plugin 负责告诉 Claude “何时去查文档”
• MCP Server 负责实际拉取最新文档（核心能力）

1
2
3
4
5
6
7
8
9
10
11
12
13

# 1. 安装 Plugin（提示词）
claude plugin marketplace add upstash/context7
claude plugin install context7-plugin@context7-marketplace

# 2. 配置 MCP Server（在项目根目录的 .mcp.json 或全局 Claude 配置中添加）
# {
#   "mcpServers": {
#     "context7": {
#       "command": "npx",
#       "args": ["-y", "@upstash/context7-mcp"]
#     }
#   }
# }

Docs: https://context7.com/docs/clients/claude-code

6. skill-creator

用于将日常开发经验沉淀为专属的 Skill。该插件能一步步引导我们定义 Skill 的触发时机、执行步骤、输出格式以及效果测试方法，是打造个性化 AI 助手的利器。现已包含 evals/benchmark 功能，可以量化测试 Skill 的效果。

1
2
3
4
5
6
7
8

# 方式一：Plugin 安装（如果可用）
claude plugin install skill-creator

# 方式二：npx 安装（官方仓库推荐，更稳定）
npx skills add https://github.com/anthropics/skills --skill skill-creator

# 统一添加 Anthropics 官方 marketplace（可选，一次性获取多个官方技能）
# /plugin marketplace add anthropics/skills

GitHub: https://github.com/anthropics/skills/tree/main/skills/skill-creator

7. Playwright

让 Claude 具备浏览器自动化能力。可以控制浏览器进行网页操作、截图、表单填写、点击等，适合做端到端测试、网页爬取、自动化任务等场景。

主要功能：

安装方式（推荐使用 MCP Server，更稳定）：

在项目根目录的 .mcp.json 或全局 Claude 配置中添加：

1
2
3
4
5
6
7
8

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

备选方式（官方 Skill 提示词）：

1
2
3
4

npx skills add https://github.com/anthropics/skills --skill playwright

# 统一添加 Anthropics 官方 marketplace（可选，一次性获取多个官方技能）
# /plugin marketplace add anthropics/skills

GitHub: https://github.com/anthropics/skills/tree/main/skills/playwright

8. MCP Builder（可选）

用于构建真正可用的 MCP (Model Context Protocol) Server，而不仅仅是写个 Demo。它将复杂的构建过程科学地拆分为几个阶段：理解 API -> 设计工具接口 -> 具体实现 -> 测试验证。适合需要将公司内部 API、第三方 SaaS、数据库、业务系统接入 Claude 的场景。

1
2
3
4
5
6
7
8

# 方式一：Plugin 安装
claude plugin install mcp-builder

# 方式二：npx 安装（官方推荐）
npx skills add https://github.com/anthropics/skills --skill mcp-builder

# 统一添加 Anthropics 官方 marketplace（可选，一次性获取多个官方技能）
# /plugin marketplace add anthropics/skills

GitHub: https://github.com/anthropics/skills/tree/main/skills/mcp-builder

3. 项目级

说明：这里的 “项目级” 是指这些 Skill 通常针对特定前端/代码审查场景设计，而非严格限定只能在单个项目中使用。实际安装时，claude plugin install 默认安装到全局；如需真正做到项目隔离，请在项目根目录使用 claude plugin install --project <plugin> 或手动管理 .claude/skills/ 文件夹。

1. ui-ux-pro-max

大幅提升前端界面的 UI/UX 设计质量。它为 Claude 补充了丰富的设计常识（如配色、字体、布局、图表、交互及设计风格），避免每次都生成 “AI 感拉满” 的死板页面。

包含的技能：

1
2

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

GitHub: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

2. web-design-guidelines

堪称前端上线前的 “严格检查员”。它会严格按照主流 Web 设计规范审查 UI，细节覆盖可访问性、响应式设计、焦点状态、表单、动画、图片、性能、导航状态、暗黑模式及触摸交互等方方面面。

1

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

GitHub: https://github.com/vercel-labs/agent-skills

3. code-review-and-quality

专注代码质量把控。像一位严格的资深工程师一样，从正确性、可读性、架构、安全和性能等多个维度对代码进行 Code Review，把关当前的 Diff 是否有资格合入主分支。

1

npx skills add https://github.com/addyosmani/agent-skills --skill code-review-and-quality

GitHub: https://github.com/addyosmani/agent-skills/blob/main/skills/code-review-and-quality/SKILL.md

4. 小结一览

维护建议：Claude Code 迭代较快，建议每 1-2 个月执行 /plugin update 并检查各 GitHub 仓库的最新 README。