claude-skills-frontend

v1.4.0

Published

a month ago

前端开发通用 Claude Skills 集合（含 MCP 服务器自动配置）

0High
0Medium
0Low

bamzc

claude claude-code skills frontend code-review agentation

claude-skills-frontend

前端开发通用 Claude Skills 集合（含 MCP 服务器自动配置）

📦 包含的 Skills

| 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 服务器配置

安装包时会自动配置以下 MCP 服务器，提升 Claude Code 的能力：

已配置的 MCP 服务器

| 服务器 | 功能 | 依赖 | |--------|------|------| | memory | 知识图谱记忆系统，让 AI 记住对话中的重要信息 | Node.js | | sequential-thinking | 顺序思考工具，帮助 AI 将复杂问题分解为多个步骤 | Node.js | | context7 | 文档查询工具，提供最新的库文档和代码示例 | Node.js | | chrome-devtools | Chrome 调试工具，自动化调试和性能分析 | Node.js | | playwright | 浏览器自动化工具，控制浏览器执行操作 | Node.js | | fetch | HTTP 请求工具，发送请求和抓取网页数据 | Python (uv) |

安装 uv（可选）

如果想使用 fetch MCP 服务器，需要先安装 uv：

# macOS/Linux
brew install uv

# 或使用官方安装脚本
curl -LsSf https://astral.sh/uv/install.sh | sh

手动配置 MCP 服务器

如果自动配置失败，可以手动编辑 ~/.claude.json：

{
  "mcpServers": {
    "memory": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-memory"],
      "type": "stdio"
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"],
      "type": "stdio"
    }
  }
}

验证 MCP 配置

安装完成后，可以验证 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

📚 Skills 详细说明

agentation

功能：在 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 会自动检测项目类型并配置工具栏。

frontend-code-review

功能：对前端代码进行全面审查

审查维度：

代码质量（命名、结构、重复代码）
功能实现（业务逻辑、错误处理）
性能优化（渲染优化、资源优化）
安全性（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

skill-creator

功能：指导用户创建新的 Claude Skills

提供内容：

Skills 的核心概念和原则
Skill 文件结构和格式
最佳实践和注意事项
示例和模板

适用场景：

创建新的 Skill
更新现有 Skill
学习 Skill 开发

ui-ux-pro-max

功能：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 Router
svelte：Runes、Stores、SvelteKit
swiftui：视图、状态、导航、动画
react-native：组件、导航、列表
flutter：Widgets、状态、布局、主题

使用方式：通过 Python 脚本搜索设计知识库，获取针对性的设计建议和代码实现指南。

前置要求：需要安装 Python 3（macOS/Linux/Windows 均支持）

🔄 更新 Skills

当 Skills 有新版本时，更新包即可：

# 更新到最新版本
pnpm update claude-skills-frontend

# 重新安装 Skills
npx install-claude-skills

🛠️ 自定义配置

选择性安装 Skills

如果只想安装特定的 Skills，可以手动复制：

# 只安装前端代码审查 Skill
cp -r node_modules/claude-skills-frontend/skills/frontend-code-review .claude/skills/

覆盖已有 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  # 项目级配置（需要自己创建）

🤝 配合 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（组件/类型）
- 注释: 只添加必要的注释，避免过度注释

🌟 最佳实践

1. 定期更新

建议每月更新一次 Skills 包，获取最新的审查规则和最佳实践：

pnpm update claude-skills-frontend

2. 团队共享

在团队中使用时，将包添加到 package.json 的 devDependencies：

{
  "devDependencies": {
    "claude-skills-frontend": "^1.0.0"
  }
}

团队成员执行 pnpm install 后，Skills 会自动安装。

3. CI/CD 集成

在 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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

claude-skills-frontend

📦 包含的 Skills

🚀 快速开始

安装

自动安装

使用

🔌 MCP 服务器配置

已配置的 MCP 服务器

安装 uv（可选）

手动配置 MCP 服务器

验证 MCP 配置

📚 Skills 详细说明

agentation

frontend-code-review

skill-creator

ui-ux-pro-max

🔄 更新 Skills

🛠️ 自定义配置

选择性安装 Skills

覆盖已有 Skills

📁 项目结构

🤝 配合 CLAUDE.md 使用

🌟 最佳实践

1. 定期更新

2. 团队共享

3. CI/CD 集成

📝 版本管理

语义化版本

版本锁定

🐛 问题反馈

📄 许可证

🙏 致谢