我们在使用Claude Code等AI编程工具时，是不是MCP/Skills安装的越多越好？当然不是，一般大模型都存在有限的上下文窗口，安装太多的插件通常会挤占项目上下文空间，降低上下文的使用效率。

所以，理想的配置应遵循按需精选策略：针对具体项目类型和开发阶段，只保留核心必需的工具，确保每个工具都有明确的使用场景。

为了保证Claude Code的任务执行效率，这里汇总了一些常用MCP和Skills，按需使用。

1、Codex — 自动化文档生成

文档是开发者永远的痛。Codex 能自动为你的代码生成 README、API 文档、架构图说明，甚至能反向工程不规范的代码库，生成清晰的“代码库地图”。

安装方法：

# 在项目根目录执行
claude mcp add codex -- npx @anthropic/mcp-codex

配置 .claude/mcp.json：

{
  "mcpServers": {
    "codex": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-codex"]
    }
  }
}

使用示例：

> 用 Codex 帮我生成这个项目的 README

> 扫描 src/ 目录，更新 API 文档

2、Context7 — 第三方库即时上下文

写代码时频繁切到浏览器查文档，是效率杀手。Context7 让你直接在对话中获取任何主流库的最新文档和示例，支持 React、Next.js、Prisma、Tailwind CSS 等上万个项目。

安装方法：

claude mcp add context7 -- npx @upstash/context7-mcp

配置 .claude/mcp.json：

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    }
  }
}

使用示例：

> 用 Context7 查看 Next.js 14 的 Server Actions 最新写法

> 在对话中手动触发或在claude.md文档加入提示词：/context7 查询内容。

3、GitHub CLI Skill — 仓库智能管理

用自然语言管理 GitHub Issues、PR、代码审查，不用离开终端。这个 Skill 让你用对话方式完成创建 Issue、提交 PR、查看 Code Review 反馈等操作。

安装方法：

# 先确保安装了 gh CLI 并登录
gh auth login
# 安装 Skill
claude mcp add github -- npx @anthropic/mcp-github

配置 .claude/mcp.json：

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-github"],
      "env": {
        "GITHUB_TOKEN": "${GITHUB_TOKEN}"
      }
    }
  }
}

使用示例：

> 根据最近的 commits 创建一个 PR

> 查看我分配到的 Issues

4、WebFetch — 网页内容智能抓取

开发时经常需要参考文档、博客、技术文章。WebFetch 能直接把网页内容喂给 Claude，实现“边读边写”。

安装方法：

claude mcp add webfetch -- npx @anthropic/mcp-webfetch

配置 .claude/mcp.json：

{
  "mcpServers": {
    "webfetch": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-webfetch"]
    }
  }
}

使用示例：

> 抓取这个技术博客，然后按照它的模式写一篇类似的

> 获取 React 官方文档中关于 useMemo 的部分，帮我优化现有代码

5、Playwright MCP — 浏览器自动化测试

前端开发离不开 E2E 测试。Playwright Skill 能用自然语言编写和执行浏览器测试，自动截图、录屏，帮你验证 UI 功能。

安装方法：

claude mcp add playwright -- npx @anthropic/mcp-playwright

配置 .claude/mcp.json：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-playwright"]
    }
  }
}

使用示例：

> 打开登录页面，输入测试账号，点击登录，然后截图

> 为这个结账流程生成 Playwright 测试脚本

6、Filesystem — 高级文件操作

虽然 Claude Code 本身就能读写文件，但 Filesystem Skill 提供了更安全的文件操作——支持批量重命名、项目结构重组、跨目录搜索替换等高级功能。

安装方法：

claude mcp add filesystem -- npx @anthropic/mcp-filesystem

配置 .claude/mcp.json（限制访问范围更安全）：

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-filesystem", "/path/to/project"]
    }
  }
}
7、SQLite / PostgreSQL — 数据库直连

后端开发中，直接在对话里查询数据库、分析表结构、生成迁移脚本，比来回切换数据库客户端高效得多。

安装方法：

# sqlite
claude mcp add sqlite -- npx @anthropic/mcp-sqlite
# PostgreSQL
claude mcp add postgres -- npx @anthropic/mcp-postgres

配置 .claude/mcp.json：

{
  "mcpServers": {
    "sqlite": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-sqlite", "database.db"]
    }
  }
}
{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-postgres", "$DATABASE_URL"]
    }
  }
}
8、Docker MCP — 容器管理

如果你用 Docker 做开发环境，这个 Skill 让你用对话管理容器、镜像、日志查看，省去背命令的烦恼。

安装方法：

claude mcp add docker -- npx @anthropic/mcp-docker

配置 .claude/mcp.json：

{
  "mcpServers": {
    "docker": {
      "command": "npx",
      "args": ["-y", "@anthropic/mcp-docker"]
    }
  }
}
9、Custom Slash Commands — 自定义命令

压轴推荐： 虽然不是传统意义上的 Skill，但自定义 Slash Command 能把你常用的提示词和工作流封装成命令，相当于“自己造技能”。

创建方法：

在项目根目录创建 .claude/commands/ 文件夹：mkdir -p .claude/commands，然后添加 Markdown 文件：.claude/commands/review.md

请对当前分支的变更进行代码审查，重点检查：
1. 安全漏洞
2. 性能问题
3. 代码规范
4. 测试覆盖
输出格式化的审查报告。

使用示例：

> /review

10、Superpowers

Superpowers 是Claude Code生态中最热门的AI辅助开发框架，由GitHub联合创始人之一Jesse Vincent发起，目前GitHub星标已超16万。主要用途让 AI 不能凭感觉乱来，必须按规矩办事！Superpowers 让 AI 助手从"聪明但随意"变成"聪明且靠谱"。

安装方法：

GitHub：https://github.com/obra/superpowers

# 安装
/plugin install superpowers@claude-plugins-official
11、Everything Claude Code（ECC）

一个让 Claude Code 从"好用"变成"超级好用"的完整配置包，由 Anthropic 黑客松冠军开源分享。ECC 提供了 13 个专家级 Agent、40+ 个按需加载的 Skill、32 个快捷命令，以及一套持续学习系统。核心理念是：Claude Code 不只是聊天工具，而是一个可以深度定制的 AI Agent 编排平台。

安装方法：

GitHub：https://github.com/affaan-m/everything-claude-code

# Add marketplace
/plugin marketplace add https://github.com/affaan-m/everything-claude-code

# Install plugin
/plugin install everything-claude-code@everything-claude-code
12、oh my claudecode（同类型oh my codex）

给 Claude Code 装上一个"多 AI 指挥中心"，让 Claude、Gemini、Codex 三个 AI 同时干活，你只需要说人话。普通用 Claude Code，就像你一个人干所有活——写代码、测试、架构设计、写文档……轮流切换，慢且累。 装了 Oh My Claude Code，就像你突然有了一个团队：

Claude — 项目指挥官，分解任务、统筹协调

Gemini — 设计评审 + 大文件分析（100万 Token 超大上下文）

Codex — 架构审查 + 安全分析 + 代码审查

三个 AI 同时在不同的终端窗口里并行干活，Claude 负责把结果汇总给你。

针对不同场景的多种策略有不同的执行模式，32 个专业智能体 涵盖架构、研究、设计、测试、数据科学，每次都会选择最合适的智能体。

安装方法：

Github：https://github.com/Yeachan-Heo/oh-my-claudecode
13、UI UX Pro Max

AI生成的界面，有一个通病，就是出来的东西虽然功能能用，但视觉上就是廉价感：千篇一律的紫色渐变、字体随便、配色怪异、布局没有设计感？这个 Skill 就是专门解决这个问题的，GitHub 上已有 68,900 颗星，非常受欢迎。这个sdkill包含了67 种 UI 风格、161 条行业规则、57 种字体搭配、99 条 UX 准则、25 种图表类型。装上这个 Skill，AI 自带设计师思维，就帮你做出好看又专业的界面，再也不用为UI设计发愁了。

安装方法：

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

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
14、Frontend Design

Anthropic 官方内置的设计 Skill，专门防止 AI 做出"AI 味"的界面。这个 Skill 的核心使命就是：让 Claude 做出来的界面，看起来像真正的设计师做的。和UI UX Pro Max的目标相似，但侧重不同，这两个搭配用效果最佳：

Frontend Design — 给 AI 装上艺术家直觉，做出有个性的作品

UI UX Pro Max — 给 AI 装上行业手册，做出符合规范的专业界面

安装方法：

/plugin install frontend-design@anthropics/skills
15、agent-browser

让 AI Agent 自动操控浏览器的工具。你可以把它想象成——给 AI 配了一双手和一双眼睛，让它能自己打开网页、点按钮、填表单、抓数据。和任何 AI Agent 配合，包括 Cursor、Claude Code、Codex、Windsurf 等 skills，相当于给这些 AI 编程工具装上了"会开浏览器"的能力。

比如你让 Cursor 里的 AI 帮你"去竞品官网截图所有定价页面" → AI 调用 agent-browser → 自动打开浏览器、逐页访问、截图、整理返回给你。

Github：https://github.com/vercel-labs/agent-browser

安装：npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browser