claude-skills-frontend
Advanced tools
前端开发通用 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
安装包后，会自动执行以下操作：
.claude/skills/ 目录~/.claude.json：
memory - 知识图谱记忆系统sequential-thinking - 顺序思考工具context7 - 文档查询工具chrome-devtools - Chrome 调试工具playwright - 浏览器自动化工具fetch - HTTP 请求工具（需要先安装 uv：brew install uv）如果需要手动安装，可以运行：
npx install-claude-skills
注意：
在 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 项目中添加可视化元素标注工具栏
核心能力：
工作流程：
支持的项目类型：
前置要求：
使用方式：
在 Claude Code 对话中提及 agentation，AI 会自动检测项目类型并配置工具栏。
功能：对前端代码进行全面审查
审查维度：
输出格式：
支持框架：
功能：指导用户创建新的 Claude Skills
提供内容：
适用场景：
功能：UI/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
如果需要锁定特定版本：
{
"devDependencies": {
"claude-skills-frontend": "1.0.0"
}
}
如果遇到问题或有建议，欢迎：
MIT © Bamzc
感谢 Claude Code 团队提供的强大工具！
作者: Bamzc 最后更新: 2026-01-06
FAQs
前端开发通用 Claude Skills 集合（含 MCP 服务器自动配置）
We found that claude-skills-frontend demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.
Security News
/Research
Widespread GitHub phishing campaign uses fake Visual Studio Code security alerts in Discussions to trick developers into visiting malicious website.