按角色选Claude Code配置：前端/后端/全栈各自必装Skills ​

裸用Claude Code是一种浪费：8个亲测Skills + 8个MCP，配置完开发效率翻倍。

Skills vs MCP：两套完全不同的机制 ​

最香的点：绝大多数Skills会自动触发。你说「帮我写个README」自动激活technical-writer；「帮我做个Dashboard」自动激活frontend-design。

按角色选最小配置 ​

🎨 前端开发者（3个必装） ​

⚙️ 后端开发者（3个必装） ​

🚀 全栈开发者（3个起步） ​

统一安装命令格式 ​

# 基础安装（技能名替换即可）
npx skills add frontend-design -y -g
npx skills add technical-writer -y -g
npx skills add find-skills -y -g

# Vercel官方技能（完整包名）
npx skills add vercel-labs/agent-skills@vercel-react-best-practices -y -g

# 查看已安装列表
npx skills list -g

⚠️ 两个高频坑：

1. 安装必须加 -g 全局参数，否则Claude Code识别不到
2. 安装完成后必须完全退出再重新打开Claude Code，不是刷新，是重启

8个MCP服务器 ​

mcp.json配置示例 ​

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/your/project/path"]
    },
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

MCP服务器一览 ​

避坑全指南：4个高频问题 ​

Q1：安装完技能，Claude Code没反应？ ​

按顺序排查：

1. 确认加了 -g 参数
2. 完全退出重启Claude Code（不是刷新）
3. 用 npx skills list -g 确认安装成功

Q2：MCP配置完，工具列表里不显示？ ​

1. 用在线JSON校验器检查mcp.json格式
2. 确认配置文件路径正确
3. 完全重启Claude Code

Q3：装了技能之后响应变慢了？ ​

技能装太多会增加大模型上下文负担。建议按角色保留3-5个常用技能，卸载不常用的：

npx skills remove <技能名> -g

Q4：Windows系统能用吗？ ​

完全可以。命令格式相同，mcp.json路径改用Windows路径分隔符（反斜杠）即可。

可以明天就做的三件事 ​

1. 装find-skills ​

相当于给Claude Code装了应用商店：

npx skills add find-skills -y -g

2. 装角色对应的3个核心技能 ​

• 前端：frontend-design + canvas-design + vercel-react-best-practices
• 后端：technical-writer + code-review + git-workflow

3. 配filesystem MCP ​

让Claude Code能读写本地项目文件：

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/你的项目路径"]
    }
  }
}

总结 ​

两套机制搭配，才能把Claude Code从「只会补代码的助手」变成「能帮你搞定全流程的开发搭档」。

关键词：Claude Code Skills, 前端配置, 后端配置, MCP服务器, frontend-design, technical-writer