前端开发通用 Claude Skills 集合（含 MCP 服务器自动配置）
| Skill | 描述 | 适用场景 |
|---|---|---|
agentation |
可视化反馈工具栏 | 在 React 项目中添加元素标注工具，生成结构化反馈给 AI |
frontend-code-review |
前端代码全面审查 | PR 审查、代码质量检查、性能审计 |
skill-creator |
Skill 创建指南 | 创建新的 Claude Skills |
ui-ux-pro-max |
UI/UX 设计智能助手 | UI 设计、样式选择、配色方案、字体搭配、响应式布局 |
# 使用 pnpm（推荐）
pnpm add -D claude-skills-frontend
# 使用 npm
npm install --save-dev claude-skills-frontend
# 使用 yarn
yarn add -D claude-skills-frontend安装包后，会自动执行以下操作：
- Skills 安装：Skills 会自动复制到项目的
.claude/skills/目录 - MCP 服务器配置：自动配置以下 MCP 服务器到
~/.claude.json：memory- 知识图谱记忆系统sequential-thinking- 顺序思考工具context7- 文档查询工具chrome-devtools- Chrome 调试工具playwright- 浏览器自动化工具fetch- HTTP 请求工具（需要先安装 uv：brew install uv）
如果需要手动安装，可以运行：
npx install-claude-skills注意：
- MCP 服务器配置是全局的，会影响所有项目
- 如果已经配置过，安装脚本会跳过，不会覆盖现有配置
- 配置完成后需要重启 Claude Code 使配置生效
在 Claude Code 对话中提及 Skill 名称即可使用：
你: 请使用 frontend-code-review 审查 src/components/Button.tsx
安装包时会自动配置以下 MCP 服务器，提升 Claude Code 的能力：
| 服务器 | 功能 | 依赖 |
|---|---|---|
| memory | 知识图谱记忆系统，让 AI 记住对话中的重要信息 | Node.js |
| sequential-thinking | 顺序思考工具，帮助 AI 将复杂问题分解为多个步骤 | Node.js |
| context7 | 文档查询工具，提供最新的库文档和代码示例 | Node.js |
| chrome-devtools | Chrome 调试工具，自动化调试和性能分析 | Node.js |
| playwright | 浏览器自动化工具，控制浏览器执行操作 | Node.js |
| fetch | HTTP 请求工具，发送请求和抓取网页数据 | Python (uv) |
如果想使用 fetch MCP 服务器，需要先安装 uv：
# macOS/Linux
brew install uv
# 或使用官方安装脚本
curl -LsSf https://astral.sh/uv/install.sh | sh如果自动配置失败，可以手动编辑 ~/.claude.json：
{
"mcpServers": {
"memory": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-memory"],
"type": "stdio"
},
"context7": {
"command": "npx",
"args": ["-y", "@upstash/context7-mcp"],
"type": "stdio"
}
}
}安装完成后，可以验证 MCP 服务器是否正常运行：
claude mcp list应该看到类似输出：
Checking MCP server health...
memory: npx -y @modelcontextprotocol/server-memory - ✓ Connected
sequential-thinking: npx -y @modelcontextprotocol/server-sequential-thinking - ✓ Connected
context7: npx -y @upstash/context7-mcp - ✓ Connected
chrome-devtools: npx -y chrome-devtools-mcp@latest - ✓ Connected
playwright: npx -y @executeautomation/playwright-mcp-server - ✓ Connected
fetch: uvx mcp-server-fetch - ✓ Connected
功能：在 React 项目中添加可视化元素标注工具栏
核心能力：
- 在网页上直接点击元素进行标注
- 自动捕获 CSS 类名、选择器路径和位置信息
- 生成结构化的 Markdown 格式反馈
- 与 Claude Code、Cursor 等 AI 工具无缝集成
工作流程：
- 在运行的应用中发现问题或需要改进的地方
- 使用 Agentation 工具栏标注相关元素
- 添加反馈说明（如 "按钮文字不清晰"）
- 复制生成的 Markdown 输出
- 粘贴给 AI 助手，AI 可以通过选择器精确定位代码
支持的项目类型：
- Next.js App Router / Pages Router
- Vite + React
- Create React App
- 任何 React 18+ 项目
前置要求：
- React 18+
- 仅在开发环境下加载
使用方式：
在 Claude Code 对话中提及 agentation，AI 会自动检测项目类型并配置工具栏。
功能：对前端代码进行全面审查
审查维度：
- 代码质量（命名、结构、重复代码）
- 功能实现（业务逻辑、错误处理）
- 性能优化（渲染优化、资源优化）
- 安全性（XSS、输入验证、敏感数据）
- 可访问性（语义化 HTML、ARIA、键盘导航）
- 框架特定（React Hooks、Vue Composition API、TypeScript）
输出格式：
- ✅ 优秀实践
⚠️ 需要改进的问题（含严重程度）- 📊 代码评分（0-10 分，S/A/B/C/D/F 等级）
- 📝 改进建议
支持框架：
- React 16/17/18/19
- Vue 2/3
- Angular
- 原生 JavaScript/TypeScript
功能：指导用户创建新的 Claude Skills
提供内容：
- Skills 的核心概念和原则
- Skill 文件结构和格式
- 最佳实践和注意事项
- 示例和模板
适用场景：
- 创建新的 Skill
- 更新现有 Skill
- 学习 Skill 开发
功能：UI/UX 设计智能助手，提供全面的设计指导和最佳实践
核心能力：
- 50+ UI 设计风格（玻璃态、新拟态、极简主义、野蛮主义等）
- 21 种配色方案（按产品类型分类）
- 50 种字体搭配（含 Google Fonts 导入）
- 20 种图表类型推荐
- 8 种技术栈支持（React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind）
设计维度：
- 产品类型推荐（SaaS、电商、作品集、仪表板等）
- 样式指南（颜色、效果、框架）
- 排版设计（字体搭配、Google Fonts）
- 配色方案（主色、辅色、CTA、背景、文本、边框）
- 页面结构（落地页、英雄区、定价、社交证明）
- UX 最佳实践（动画、无障碍、交互反馈）
支持技术栈：
html-tailwind（默认）：Tailwind 工具类、响应式、无障碍react：状态管理、Hooks、性能优化nextjs：SSR、路由、图片优化vue：Composition API、Pinia、Vue Routersvelte：Runes、Stores、SvelteKitswiftui：视图、状态、导航、动画react-native：组件、导航、列表flutter：Widgets、状态、布局、主题
使用方式： 通过 Python 脚本搜索设计知识库，获取针对性的设计建议和代码实现指南。
前置要求： 需要安装 Python 3（macOS/Linux/Windows 均支持）
当 Skills 有新版本时，更新包即可：
# 更新到最新版本
pnpm update claude-skills-frontend
# 重新安装 Skills
npx install-claude-skills如果只想安装特定的 Skills，可以手动复制：
# 只安装前端代码审查 Skill
cp -r node_modules/claude-skills-frontend/skills/frontend-code-review .claude/skills/默认情况下，安装脚本不会覆盖已存在的 Skills。如果需要强制覆盖：
# 删除旧的 Skills
rm -rf .claude/skills/frontend-code-review
# 重新安装
npx install-claude-skills安装后，你的项目结构如下：
your-project/
├── .claude/
│ └── skills/
│ ├── frontend-code-review/
│ │ ├── SKILL.md
│ │ └── references/
│ │ └── checklist.md
│ ├── security-review/
│ │ └── SKILL.md
│ └── api-doc-generator/
│ └── SKILL.md
├── node_modules/
│ └── claude-skills-frontend/
├── package.json
└── CLAUDE.md # 项目级配置（需要自己创建）
Skills 会自动继承项目的 CLAUDE.md 配置。
推荐配置：
# CLAUDE.md
## 项目信息
- 项目名称: TestPilot
- 技术栈: Next.js 16 + React 19 + TypeScript
- UI 框架: Tailwind CSS + Shadcn/ui
## 编码规范
- 使用 TypeScript 严格模式
- 遵循 ESLint 规则
- 组件使用函数式组件 + Hooks
- 状态管理使用 Zustand
## 代码风格
- 使用 Prettier 格式化
- 命名规范: camelCase（变量/函数）、PascalCase（组件/类型）
- 注释: 只添加必要的注释，避免过度注释建议每月更新一次 Skills 包，获取最新的审查规则和最佳实践：
pnpm update claude-skills-frontend在团队中使用时，将包添加到 package.json 的 devDependencies：
{
"devDependencies": {
"claude-skills-frontend": "^1.0.0"
}
}团队成员执行 pnpm install 后，Skills 会自动安装。
在 CI/CD 流程中使用 Skills 进行自动化审查：
# .github/workflows/code-review.yml
name: Code Review
on: [pull_request]
jobs:
review:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
- run: pnpm install
- run: npx install-claude-skills
# 使用 Claude Code CLI 进行审查
- run: claude code review- 主版本号（Major）：不兼容的 API 变更
- 次版本号（Minor）：向下兼容的功能新增
- 修订号（Patch）：向下兼容的问题修复
如果需要锁定特定版本：
{
"devDependencies": {
"claude-skills-frontend": "1.0.0"
}
}如果遇到问题或有建议，欢迎：
- 提交 Issue: https://github.com/bamzc/claude-skills-frontend/issues
- 提交 PR: https://github.com/bamzc/claude-skills-frontend/pulls
MIT © Bamzc
感谢 Claude Code 团队提供的强大工具！
作者: Bamzc 最后更新: 2026-01-06