⚡ Claude Code 进阶完全指南（五）：MCP 与 Agent Skills 完整详解写在前面这一期我们要介绍

写在前面

这一期我们要介绍 Claude Code 的两大核心功能——MCP（Model Context Protocol） 和 Agent Skills！MCP 让 Claude Code 可以连接各种外部工具和服务，Skills 则让 AI 在特定领域变得更强！

这不是简单的功能罗列，而是一份真正能上手使用的完整指南。读完本篇，你将知道：

MCP 和 Skills 有什么区别？我该用哪个？
如何配置 MCP 服务器？三种传输方式怎么选？
如何安装和管理 Skills？Personal 和 Project 作用域有什么区别？
2026 年最新热门 Skills 和 MCP 服务器推荐
从零开始配置 MCP 和 Skills 的完整步骤

数据更新

本文数据基于 2026 年 4 月最新信息。Skills 生态正在快速发展，安装量数据可能持续变化。

🎯 一、概念澄清：MCP vs Skills

在深入使用之前，先理解这两个概念的区别至关重要。很多新手会混淆它们，或者试图用 MCP 解决 Skills 该解决的问题。

核心区别

维度	MCP	Skills
本质	外部工具连接协议	AI 能力扩展包
工作方式	实时调用外部服务	加载预设知识/流程
典型场景	连接 GitHub、数据库、Figma	优化 React、性能调试、头脑风暴
配置复杂度	需要配置服务器、认证、环境变量	安装即用，零配置
执行方式	实时请求外部 API	内置指令指导 AI 行为
生态规模	4,000+ MCP 服务器	2,000+ Skills

什么时候用 MCP？

当你需要 Claude Code 访问外部工具或服务 时：

查询数据库（PostgreSQL、Supabase）
操作 GitHub（PR 审查、Issue 管理）
浏览器自动化测试（Playwright）
监控错误追踪（Sentry）
设计工具集成（Figma）
搜索网络（Brave Search）
发送消息（Slack）

什么时候用 Skills？

当你需要 Claude Code 在特定领域表现更好 时：

写代码时遵循最佳实践（React 优化）
调试时有系统化方法论
写文档时有固定格式
做设计时有审美标准
头脑风暴时有结构化流程

两者可以同时使用吗？

完全可以！它们解决不同问题：

┌─────────────────────────────────────────────────────────┐
│                    你的请求                               │
│  "帮我优化这个 React 页面，检查性能问题"                  │
├────────────────────┬────────────────────────────────────┤
│     MCP            │         Skills                      │
│  → 访问数据库验证   │  → 加载 React 性能优化知识          │
│  → 调用 GitHub API │  → 加载调试方法论                   │
│  → 查看 Sentry 错误│  → 输出符合最佳实践                 │
└────────────────────┴────────────────────────────────────┘

实战案例：当你让 Claude Code "修复这个 bug" 时：

MCP 帮助你从 Sentry 获取最近的错误日志
Skills 指导 Claude 使用系统化调试方法论
最终输出更加精准和高效

🔌 二、MCP 深度详解

2.1 什么是 MCP？

MCP（Model Context Protocol） 是一个开放标准协议，让 Claude Code 可以连接外部工具和数据源。

截至 2026 年 4 月，MCP 生态已发展至：

4,000+ MCP 服务器
97M+ 每月 SDK 下载量
232% 半年增长率

你可以把 MCP 理解为"AI 世界的 USB 接口"——有了统一的协议，不同厂商的工具都可以轻松接入：

没有 MCP：
Claude Code → 只能用自己的内置工具
   ↓
有 MCP：
Claude Code ←→ MCP 服务器 ←→ 各种外部服务
                    ↑
               (GitHub、数据库、Figma、Sentry...)

2.2 MCP 核心概念：传输类型

MCP 服务器与 Claude Code 通信有三种方式：

方式一：stdio（本地进程）

适用场景：需要直接访问本地系统资源的工具

# 工作原理：Claude Code 启动一个本地子进程，通过标准输入输出通信

# 示例：添加本地文件系统 MCP（需要指定允许的目录）
claude mcp add --transport stdio -- /path/to/npx @modelcontextprotocol/server-filesystem /allowed/directory

# 带环境变量
claude mcp add --transport stdio --env API_KEY=xxx my-server -- npx -y some-mcp-server

# 优点：配置简单，适合本地工具
# 缺点：需要 Claude Code 能找到 npx/node

典型用例：本地文件系统、SQLite 数据库、本地 Puppeteer

方式二：HTTP（远程服务器）- 推荐

适用场景：连接云端服务、生产环境使用

# 工作原理：通过 HTTP API 调用远程 MCP 服务器
claude mcp add --transport http github https://api.githubcopilot.com/mcp/

# 带自定义 headers（用于认证）
claude mcp add --transport http my-api "https://api.example.com/mcp" \
  --header "Authorization: Bearer YOUR_TOKEN"

# 优点：稳定可靠，支持 OAuth 认证，不需要本地环境配置
# 缺点：需要网络连接

典型用例：GitHub、Sentry、Notion、Supabase 等云服务

方式三：SSE（Server-Sent Events）- 已废弃

SSE 是早期的远程传输方式，现在不推荐使用，已被 HTTP 方式取代。

2.3 MCP 配置作用域详解

MCP 配置有三个作用域层级，理解它们对于团队协作至关重要：

作用域层级图

┌─────────────────────────────────────────────────────┐
│                 User (用户级)                         │
│           存储位置: ~/.claude.json                  │
│           作用域: 所有项目都可用                      │
│           典型场景: 个人常用工具 (Notion、Linear)     │
├─────────────────────────────────────────────────────┤
│                 Project (项目级)                      │
│           存储位置: .mcp.json                        │
│           作用域: 当前项目可用，可提交到 Git          │
│           典型场景: 团队共享工具 (Sentry、项目数据库) │
├─────────────────────────────────────────────────────┤
│                 Local (本地覆盖)                      │
│           存储位置: ~/.claude.json (按项目路径隔离)   │
│           作用域: 仅当前项目可见                      │
│           典型场景: 测试新工具、覆盖团队配置          │
└─────────────────────────────────────────────────────┘

实际配置示例

# 添加到本地作用域（默认）- 只有你自己能用
claude mcp add --transport http stripe https://mcp.stripe.com

# 添加到项目作用域 - 团队成员都能用（通过 .mcp.json）
claude mcp add --transport http sentry --scope project https://mcp.sentry.dev/mcp

# 添加到用户作用域 - 所有项目都能用
claude mcp add --transport http notion --scope user https://mcp.notion.com/mcp

配置优先级

Local > Project > User

这意味着：

团队在 .mcp.json 配置了共享的 Sentry 服务器
你可以自己在 ~/.claude.json 中添加本地覆盖（不同的认证令牌）
实际生效的是你的本地配置，但服务器名称保持一致

2.4 配置文件详解

用户级配置 (~/.claude.json)

{
  "mcpServers": {
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp/"
    },
    "brave-search": {
      "type": "http", 
      "url": "https://mcp-brave-search.vertскard.workers.dev/sse",
      "env": {
        "BRAVE_API_KEY": "your-api-key"
      }
    }
  },
  "env": {
    "ENABLE_TOOL_SEARCH": "auto"
  }
}

项目级配置 (.mcp.json)

{
  "mcpServers": {
    "sentry": {
      "type": "http", 
      "url": "https://mcp.sentry.dev/mcp"
    },
    "database": {
      "type": "http",
      "url": "https://my-project-mcp.internal/mcp",
      "headers": {
        "X-API-Key": "${DB_API_KEY}"
      }
    },
    "filesystem": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/you/project/src"]
    }
  }
}

安全提示

使用 ${VAR} 语法引用环境变量，避免将密钥提交到 Git！
不要在 .mcp.json 中存储真实 API 密钥
项目级配置会提交到 Git，确保不包含敏感信息

2.5 实用 MCP 服务器推荐（按功能分类）

以下是经过验证的实用 MCP 服务器，按功能分类推荐：

⭐ 代码与仓库管理（必装）

服务器	功能	推荐指数	安装难度
GitHub	PR 审查、Issue 管理、代码搜索	⭐⭐⭐⭐⭐	简单
GitLab	MR 审查、项目管理	⭐⭐⭐⭐	简单
Linear	项目管理、Issue 跟踪	⭐⭐⭐⭐	中等

💾 数据库（推荐）

服务器	功能	推荐指数	安装难度
PostgreSQL	通用 SQL 数据库访问	⭐⭐⭐⭐⭐	简单
Supabase	PostgreSQL + 实时订阅 + 存储	⭐⭐⭐⭐⭐	简单
Neon	Serverless PostgreSQL	⭐⭐⭐⭐	简单
SQLite	本地轻量数据库	⭐⭐⭐	简单

🐛 监控与错误追踪（推荐）

服务器	功能	推荐指数	安装难度
Sentry	错误监控、堆栈追踪	⭐⭐⭐⭐⭐	简单
Datadog	监控指标、日志	⭐⭐⭐⭐	中等

🎨 设计与原型

服务器	功能	推荐指数	安装难度
Figma	设计稿读取、代码生成	⭐⭐⭐⭐⭐	简单
Excalidraw	白板草图	⭐⭐⭐	简单

🌐 搜索与爬虫

服务器	功能	推荐指数	安装难度
Brave Search	Web 搜索	⭐⭐⭐⭐⭐	需 API Key
Fetch	HTTP 请求	⭐⭐⭐⭐⭐	简单
Puppeteer	浏览器自动化	⭐⭐⭐⭐	中等
Playwright	端到端测试	⭐⭐⭐⭐⭐	中等

💬 通讯工具

服务器	功能	推荐指数	安装难度
Slack	消息发送、频道管理	⭐⭐⭐⭐	中等
Gmail	邮件发送	⭐⭐⭐	需 OAuth

🧠 增强类

服务器	功能	推荐指数	安装难度
Memory	跨会话持久化记忆	⭐⭐⭐⭐	简单
Sequential Thinking	结构化推理	⭐⭐⭐⭐⭐	简单

2.6 第一个 MCP 服务器：GitHub 实战

让我们从零开始配置 GitHub MCP 服务器：

步骤 1：执行安装命令

claude mcp add --transport http github https://api.githubcopilot.com/mcp/

步骤 2：认证授权

在 Claude Code 中运行：

/mcp

这会打开浏览器窗口，按照提示完成 GitHub OAuth 授权。

步骤 3：验证安装

claude mcp list

应该看到：

✅ github - 已连接 (http)

步骤 4：实际使用

安装完成后，你可以直接让 Claude Code：

"帮我审查 PR #456 并提出改进建议"
"创建个 Issue 报告这个 bug"
"搜索仓库中 useCallback 的用法"
"列出最近一周合并的所有 PR"

2.7 更多 MCP 实战配置

配置 PostgreSQL

# 需要先安装
npm install -g @modelcontextprotocol/server-postgres

# 添加到 Claude Code
claude mcp add --transport stdio postgres -- npx -y @modelcontextprotocol/server-postgres "postgresql://user:password@localhost:5432/mydb"

配置 Brave Search

# 获取 API Key: https://brave.com/search/api/
# 环境变量方式
claude mcp add --transport http brave-search "https://mcp-brave-search.vertскard.workers.dev/sse" \
  --env BRAVE_API_KEY=your-api-key

配置 Filesystem

# 限制访问目录
claude mcp add --transport stdio filesystem -- npx -y @modelcontextprotocol/server-filesystem /path/to/allowed/directory

2.8 Tool Search：解决上下文膨胀问题

当你连接多个 MCP 服务器时，每个服务器都会暴露多个工具。10 个服务器可能带来 50+ 个工具定义，这会消耗大量上下文令牌。

Tool Search 是 Claude Code 内置的优化功能：

指标	无 Tool Search	有 Tool Search
工具定义消耗	~72,000 tokens	~8,700 tokens
节省比例	-	85%
工具选择准确率	49%	74%

启用方式

Tool Search 默认在 Sonnet 4 或 Opus 4 及以上模型中自动启用。

手动配置：

# 自动模式（默认）- 当工具定义超过上下文 10% 时激活
ENABLE_TOOL_SEARCH=auto claude

# 自定义阈值 - 5% 时激活
ENABLE_TOOL_SEARCH=auto:5 claude

# 始终启用
ENABLE_TOOL_SEARCH=true claude

# 禁用（不推荐）
ENABLE_TOOL_SEARCH=false claude

或在 ~/.claude.json 中配置：

{
  "env": {
    "ENABLE_TOOL_SEARCH": "auto"
  }
}

建议

如果你连接了多个 MCP 服务器，务必开启 Tool Search！这是让多服务器配置变得实用的关键功能。

2.9 MCP 常见问题与解决

问题一："Connection closed" 错误

原因：PATH 或环境变量问题

解决方案：

# 方案 1：使用绝对路径
which node  # 找到路径，例如 /Users/you/.nvm/versions/node/v20.11.0/bin/node
claude mcp add --transport stdio my-server -- /Users/you/.nvm/versions/node/v20.11.0/bin/node /path/to/server.js

# 方案 2：Windows 系统使用 cmd /c 包装
claude mcp add --transport stdio my-server -- cmd /c npx -y @some/package

问题二：服务器超时

原因：SSE 传输不稳定

解决方案：切换到 HTTP 传输

# 错误方式（已废弃）
claude mcp add --transport sse some-server url

# 正确方式
claude mcp add --transport http some-server https://server-url/mcp

问题三："Command not found"

原因：npm bin 目录不在 PATH 中

解决方案：

# 在 ~/.zshrc 或 ~/.bashrc 中添加
export PATH="$(npm config get prefix)/bin:$PATH"

# 或者直接在命令中使用 npx
claude mcp add --transport stdio my-server -- npx -y some-package

问题四：JSON 配置语法错误

原因：JSON 不允许尾随逗号

错误示例：

{
  "mcpServers": {
    "server1": {}
  },  // ❌ 尾随逗号，JSON 不允许
}

正确示例：

{
  "mcpServers": {
    "server1": {}
  }
}

验证方法：

# 使用 JSON 验证工具
cat ~/.claude.json | python3 -m json.tool

问题五：macOS 权限提示

原因：首次运行时的系统权限请求

解决方案：在系统偏好设置中允许 Terminal 访问，然后重试。

2.10 MCP 命令速查表

命令	功能
`claude mcp list`	列出所有已配置的 MCP 服务器
`claude mcp add <name> <url>`	添加 MCP 服务器
`claude mcp remove <name>`	移除 MCP 服务器
`claude mcp add-from-claude-desktop`	从 Claude Desktop 导入配置
`claude mcp add-json <name> '<json>'`	从 JSON 字符串添加
`claude mcp add --transport stdio <name> -- <command>`	添加本地 stdio 服务器
`/mcp`	在 Claude Code 交互式管理

🛠️ 三、Skills 深度详解

3.1 什么是 Skills？

Skills 是扩展 Claude Code 能力的"技能包"。每个 Skill 包含：

SKILL.md：核心定义文件（必需），包含 YAML frontmatter 和指令
references/ ：参考文档目录
patterns/ ：代码模式目录
examples/ ：示例代码目录

Skills 工作原理

1️⃣ 你发出请求
   "优化这个 React 组件的性能"

2️⃣ Claude Code 启动时
   → 扫描所有 Skills
   → 读取每个 Skill 的 name 和 description（~100 tokens）

3️⃣ 请求匹配
   → 检测到 React 相关
   → 加载 vercel-react-best-practices

4️⃣ 应用技能知识
   → 使用 React 最佳实践
   → 遵循官方规范

5️⃣ 输出优化结果
   → 性能优化建议
   → 高质量代码

3.2 Skills 的两种类型

理解这一点对于选择和使用 Skills 至关重要：

类型一：能力增强型 (Capability Uplift)

定义：赋予 Claude 原本没有的能力

技能	原本能力	获得能力
`pdf`	不能创建 PDF	可以创建、编辑 PDF、提取内容
`browser-use`	不能控制浏览器	可以自动化浏览器操作
`docx`	不能操作 Word	可以创建、编辑 Word 文档
`xlsx`	不能操作 Excel	可以创建、编辑 Excel 表格
`firecrawl`	爬虫能力有限	可靠的网络数据获取
`pptx`	不能创建 PPT	可以创建 PowerPoint 演示

类型二：偏好编码型 (Encoded Preference)

定义：让 Claude 按照你团队的方式执行已有任务

技能	原本能做	学会后怎么做
`frontend-design`	能写 CSS	按照特定设计规范写，跳过 AI 风格
`systematic-debugging`	能调试	用系统化方法论调试，不是凭感觉
`vercel-react-best-practices`	能写 React	按照 Vercel 标准写，不是通用写法
`brainstorming`	能提问	按结构化流程头脑风暴，不是随意聊
`web-design-guidelines`	能检查代码	按照 WCAG 规范检查，不是随意看看

3.3 安装 Skills

安装方式一：命令行安装（推荐）

# 安装单个技能（最新语法）
npx skills add @vercel-labs/agent-skills/react-best-practices

# 或使用完整语法
npx skills add vercel-labs/agent-skills@vercel-react-best-practices

# 全局安装（所有项目可用）
npx skills add <owner/repo@skill> -g -y

# 安装到当前项目（.claude/skills/）
npx skills add <owner/repo@skill>

安装方式二：搜索安装

# 搜索技能
npx skills find react

# 输出示例：
# ✓ @vercel-labs/agent-skills/react-best-practices (18.3万安装)
# ✓ @vercel-labs/agent-skills/next-best-practices (2.1万安装)
# ✓ @anthropics/skills/react-components (9800安装)

安装方式三：从 Claude Code 中直接安装

$ claude "帮我安装 React 性能优化相关的技能"

✅ 正在搜索相关技能...
✅ 找到：vercel-react-best-practices
✅ 安装完成！

现在我可以帮你优化 React 代码了！

安装方式四：使用插件页面

访问 claude.com/plugins 点击安装。

安装方式五：npm 包方式（新增）

# 直接从 npm 包安装技能
npx skills add npm:@some-org/some-skill

3.4 Skills 作用域：Personal vs Project

Personal Scope（个人技能）

存储位置：~/.claude/skills/
适用：个人工作流、偏好设置
团队共享：❌ 不共享

Project Scope（项目技能）

存储位置：.claude/skills/
适用：团队规范、项目特定配置
团队共享：✅ 提交到 Git 后团队可见

3.5 热门 Skills 推荐榜（2026 年 4 月更新）

根据最新数据，按功能分类推荐：

🌟 必装技能（强烈推荐）

技能	类型	用途	推荐理由
`find-skills`	能力增强	发现更多技能	帮你发现更多有用的技能
`vercel-react-best-practices`	偏好编码	React 性能优化	Vercel 内部使用的 57 条规则
`systematic-debugging`	偏好编码	系统调试方法论	专业调试流程，不是凭感觉
`brainstorming`	偏好编码	结构化头脑风暴	把模糊想法变成可执行计划
`test-driven-development`	偏好编码	TDD 开发流程	先写测试，再写代码

🎨 前端设计类

技能	用途	推荐理由
`frontend-design`	前端 UI/UX 设计	跳过 AI 通用风格，做出独特设计
`web-design-guidelines`	Web 设计规范	100+ 条 WCAG 规范检查
`composition-patterns`	组件组合模式	告别 boolean prop hell
`tailwind-design-system`	Tailwind CSS	规范的 Tailwind 写法
`shadcn`	shadcn/ui 组件	正确使用 shadcn 组件库

🤖 AI 与自动化类

技能	用途	推荐理由
`browser-use`	浏览器自动化	控制浏览器执行复杂操作
`agent-browser`	AI 浏览器控制	更高级的浏览器自动化
`firecrawl`	Web 数据抓取	可靠的网页数据获取
`mcp-builder`	MCP 服务器构建	自己构建 MCP 服务器

📄 文档处理类（能力增强型）

技能	用途
`pdf`	PDF 创建、编辑、提取
`docx`	Word 文档操作
`xlsx`	Excel 表格操作
`pptx`	PowerPoint 制作

🛡️ 安全与测试类

技能	用途
`security-audit`	安全审计
`webapp-testing`	端到端测试
`seo-audit`	SEO 审计

📹 媒体类

技能	用途
`remotion-best-practices`	程序化视频制作
`ai-image-generation`	AI 图像生成

🏢 团队协作类

技能	用途
`skill-creator`	创建自定义技能
`superpowers`	完整开发工作流框架
`writing-plans`	写作规划

3.6 实战案例

案例一：React 性能优化

$ claude "优化这个 React 组件的性能"

🤖 [vercel-react-best-practices 已加载]
✅ 技能已激活

📋 优化建议：

1. 使用 React.memo() 避免不必要的重渲染
   → 当前：每次父组件渲染都会重新渲染
   → 优化后：props 不变时不重新渲染
   → 优先级：高

2. 使用 useMemo() 缓存计算结果
   → 当前：每次渲染都重新计算 expensiveValue
   → 优化后：依赖不变时使用缓存
   → 优先级：高

3. 使用 useCallback() 缓存回调
   → 当前：每次渲染都创建新函数 handleClick
   → 优化后：依赖不变时使用缓存函数
   → 优先级：中

4. 消除请求瀑布
   → 当前：串行请求多个 API
   → 优化后：使用 Promise.all 并行请求
   → 优先级：最高（性能影响最大）

案例二：系统调试

$ claude "我的程序出错了，请帮我调试"

🤖 [systematic-debugging 已加载]
✅ 技能已激活

🔍 调试步骤：

第一步：复现问题
→ 请提供完整的错误信息和复现步骤
→ 错误信息最好包含：错误类型、堆栈跟踪、触发条件

第二步：分析错误类型
→ 语法错误 - 代码不符合语言规范
→ 运行时错误 - 执行时崩溃
→ 逻辑错误 - 结果不符合预期
→ 性能问题 - 运行太慢或内存泄漏

第三步：定位问题
→ 最小复现 - 创建最小可复现示例
→ 打印日志 - 添加 console/print 语句
→ 断点调试 - 使用 debugger 逐步执行

第四步：修复验证
→ 单元测试 - 编写测试验证修复
→ 集成测试 - 确保不影响其他功能

案例三：前端设计

$ claude "帮我设计一个登录页面"

🤖 [frontend-design 已加载]
✅ 技能已激活

🎨 设计方向探讨：

为了避免 AI 通用风格，我需要了解：
1. 品牌风格方向？（简约/大胆/复古/未来感）
2. 主要用户群体？（年轻/商务/大众）
3. 色调偏好？（冷色/暖色/中性）
4. 特殊要求？（无障碍/深色模式）

请选择一个方向，或者告诉我你的偏好：
- 简约现代 - 大量留白，精细排版
- 大胆醒目 - 强对比，动态效果
- 温暖亲和 - 柔和色调，圆润边角

案例四：使用 superpowers 进行完整开发

$ claude /brainstorm

🤖 [brainstorming 已加载]
✅ 技能已激活

💡 让我们开始结构化头脑风暴！

请描述你想要构建或解决的问题：

然后 Claude 会通过一系列结构化问题帮助你：

明确目标 - 你想实现什么？
约束条件 - 有什么限制？（时间、技术栈、预算）
用户画像 - 谁会使用这个功能？
成功标准 - 如何衡量成功？
风险评估 - 有什么潜在问题？

最终生成一个设计文档，可以直接用于后续开发。

案例五：文档生成

$ claude "帮我生成一份 Q1 运营报告 PDF"

🤖 [pdf 已加载]
✅ 技能已激活

📄 正在生成 PDF 报告...

报告包含：
- 封面页（标题、日期、公司 logo 占位）
- 执行摘要（关键指标一览）
- 数据分析（图表和数据）
- 问题与建议
- 附录（详细数据）

请提供：
1. Q1 关键数据（收入、用户数、转化率等）
2. 分析要点
3. 是否有特定模板或品牌要求？

3.7 Skills 命令速查表

CLI 命令

# 安装技能
npx skills add <owner/repo@skill>

# 全局安装
npx skills add <owner/repo@skill> -g -y

# 查看已安装
npx skills check

# 更新所有技能
npx skills update

# 搜索技能
npx skills find <keyword>

# 初始化新技能
npx skills init <skill-name>

# 从 npm 安装
npx skills add npm:@some-org/some-skill

Claude Code 内命令

命令	功能
`/skills`	查看已安装的 Skills 列表
`/skills add`	安装新 Skill

🏆 四、必装推荐清单

根据不同使用场景，给出推荐配置：

4.1 入门者必装（5 个）

# 1. 发现更多技能（第一个安装！）
npx skills add @vercel-labs/skills/find-skills -g -y

# 2. React 最佳实践（前端开发者）
npx skills add @vercel-labs/agent-skills/react-best-practices -g -y

# 3. 系统调试（所有开发者）
npx skills add @obra/superpowers/systematic-debugging -g -y

# 4. 头脑风暴（规划阶段）
npx skills add @obra/superpowers/brainstorming -g -y

# 5. TDD 开发（质量优先）
npx skills add @obra/superpowers/test-driven-development -g -y

4.2 前端开发者进阶（8 个）

# 基础 5 个 + 以下 3 个

# 6. 前端设计规范
npx skills add @anthropics/skills/frontend-design -g -y

# 7. Web 设计指南
npx skills add @vercel-labs/agent-skills/web-design-guidelines -g -y

# 8. 组件组合模式
npx skills add @vercel-labs/agent-skills/composition-patterns -g -y

4.3 全栈开发者（10+ 个）

# 前端 8 个 + 以下

# 9. 浏览器自动化测试
npx skills add @anthropics/skills/webapp-testing -g -y

# 10. PDF 处理
npx skills add @anthropics/skills/pdf -g -y

# 11. Word 文档
npx skills add @anthropics/skills/docx -g -y

4.4 MCP 服务器推荐配置

# GitHub（代码管理）- 必须
claude mcp add --transport http github https://api.githubcopilot.com/mcp/

# Sentry（错误监控）- 推荐
claude mcp add --transport http sentry --scope project https://mcp.sentry.dev/mcp

# Supabase（数据库）- 根据需要
claude mcp add --transport http supabase https://mcp.supabase.com/mcp

# Figma（设计）- 根据需要
claude mcp add --transport http figma https://mcp.figma.com/mcp

# Brave Search（搜索）- 研究必备
claude mcp add --transport http brave-search "https://mcp-brave-search.vertскard.workers.dev/sse" \
  --env BRAVE_API_KEY=your-key

4.5 按工作场景推荐组合

场景一：日常代码开发

MCP: GitHub + Filesystem + PostgreSQL
Skills: vercel-react-best-practices + systematic-debugging + composition-patterns

场景二：前端 UI 开发

MCP: Figma + Brave Search
Skills: frontend-design + web-design-guidelines + tailwind-design-system

场景三：后端服务开发

MCP: PostgreSQL + Sentry + Slack
Skills: systematic-debugging + test-driven-development

场景四：研究调研

MCP: Brave Search + Fetch + Puppeteer
Skills: firecrawl + seo-audit

📊 五、效果对比

场景	无 Skills/MCP	有 Skills/MCP
写 React 代码	通用建议，可能有性能问题	遵循 Vercel 最佳实践，性能优化
调试 bug	逐行排查，效率低	系统化方法论，快速定位
访问 GitHub	只能手动操作	直接在终端完成 PR 审查、Issue 管理
数据库查询	需要外部工具	直接用自然语言查询
创建 PDF	无此能力	可以直接生成文件
前端设计	AI 通用风格，可能"长得一样"	独特设计，符合品牌规范
网页数据获取	简单抓取，容易失败	可靠抓取，JavaScript 渲染支持
团队协作	每次都要说明规范	自动遵循团队约定

🔧 六、工作原理进阶

Skills 自动加载机制详解

┌─────────────────────────────────────────────────────────┐
│                  Claude Code 启动                        │
│  ↓                                                       │
│  扫描 ~/.claude/skills/ 和 .claude/skills/              │
│  ↓                                                       │
│  对每个 Skill，读取 YAML frontmatter 中的：             │
│  - name（技能名称）                                       │
│  - description（约 100 tokens）                          │
│  ↓                                                       │
│  存储在内存中（不消耗上下文）                              │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│                  用户发出请求                             │
│  ↓                                                       │
│  Claude 分析请求内容                                      │
│  ↓                                                       │
│  匹配 Skills（description 相似度）                      │
│  ↓                                                       │
│  加载匹配的 Skill（只加载需要的部分）                     │
│  ↓                                                       │
│  应用 Skill 指令执行任务                                  │
└─────────────────────────────────────────────────────────┘

Skill 文件结构详解

vercel-react-best-practices/
├── SKILL.md                    # 必须：技能定义文件
│   ├── ---
│   │   name: vercel-react-best-practices
│   │   description: >
│   │       Applies 57 performance rules
│   │       to React and Next.js code...
│   │   ---
│   │   # 技能指令内容（Markdown 格式）
│   │
├── references/                 # 可选：参考文档
│   ├── performance-rules.md
│   └── bundle-optimization.md
│
├── patterns/                   # 可选：代码模式
│   ├── suspense-boundaries.tsx
│   └── useMemo-usage.tsx
│
└── examples/                   # 可选：示例代码
    └── before-after/
        ├── bad.tsx
        └── good.tsx

v2.1+ 新特性：Skills 热重载

新增功能

Claude Code 支持 Skills 热重载！修改 ~/.claude/skills 目录下的 Skills 会立即生效，无需重启 Claude Code。

创建自定义 Skill（剧透）

剧透

下一期我们将详细讲解如何创建自定义 Skills，包括：

SKILL.md 的编写规范
YAML frontmatter 格式
让 Claude 按照你的方式工作

📝 七、常见问题

Q1：可以同时安装多个 Skills 吗？

A：当然可以！Claude Code 会根据任务自动选择最合适的 Skills。多个 Skills 可以同时加载，它们不会冲突。

Q2：Skills 占用空间大吗？

A：每个 Skill 通常只有几 KB 到几百 KB，完全不用担心。所有 Skills 总共也只占用几 MB。

Q3：可以自定义 Skills 吗？

A：可以！使用 skill-creator 技能或直接创建 SKILL.md 文件。参考文档：skills.sh

Q4：Skills 会更新吗？

A：会的，使用 npx skills update 可以更新所有技能。

Q5：如何查看已安装的 Skills？

A：使用 /skills 命令或 npx skills check 查看。

Q6：MCP 和 Skills 哪个更重要？

A：它们解决不同问题，都很重要。 MCP 给你连接外部世界的能力，Skills 让 AI 在特定领域表现更好。两者可以互补使用。

Q7：为什么我安装了 Skills 但感觉没效果？

A：Skills 需要在任务匹配时才会加载。确保你的请求描述清楚你想做什么，例如"帮我优化 React 性能"而不是"帮我看看这个代码"。也可以直接说"使用 React 最佳实践来优化这个组件"。

Q8：Personal 和 Project 作用域怎么选？

A：

Personal：个人偏好、工作流、只有你自己用的工具
Project：团队规范、共享配置、所有人都需要的能力

Q9：MCP 服务器安全吗？

A：MCP 服务器安全性参差不齐。建议：

只安装来自可信来源的服务器
限制文件系统访问的目录范围
使用只读数据库连接（除非需要写入）
定期检查和更新服务器版本
参考 SkillsIndex 的安全评分

Q10：如何选择 MCP 服务器？

A：根据日常工作流程选择：

写代码 → GitHub + Filesystem
管数据 → PostgreSQL + Fetch
做研究 → Brave Search + Puppeteer
团队协作 → Slack + GitHub + Memory

🎉 总结

内容	重点
MCP	连接外部工具和服务的协议，让 Claude 能访问 GitHub、数据库、Figma 等
Skills	给 AI 安装"技能包"，让它在特定领域表现更好（优化、调试、设计等）
Skills 官网	skills.sh
MCP 生态	4,000+ 服务器，持续增长中
安装 Skills	`npx skills add <skill>`
安装 MCP	`claude mcp add --transport http <name> <url>`
使用方式	AI 自动识别加载，无需手动触发

[!success]>
下期预告

第六篇我们将带来 项目实战案例，手把手教你用 Claude Code 完成完整项目！

敬请期待！