前端领域 30 个值得安装的 Agent Skills
以下基于 skills.sh 排行榜 和 Claude Code Frontend Design Toolkit 等社区精选整理（2026 年 6 月）。通用安装命令格式：
npx skills add <owner/repo>，需要 Node 18+。
一、设计 / 视觉类（告别"AI 味儿"）
| # | Skill | 仓库 / 地址 | 安装命令 |
|---|---|---|---|
| 1 | frontend-design（Anthropic 官方, 277K+ 安装） | github.com/anthropics/… | claude plugin add anthropic/frontend-design |
| 2 | web-design-guidelines（Vercel Labs, 107K 安装） | github.com/vercel-labs… | npx skills add vercel-labs/agent-skills |
| 3 | ui-ux-pro-max（67 种风格、97 配色） | github.com/nextlevelbu… | npx skills add nextlevelbuilder/ui-ux-pro-max-skill |
| 4 | canvas-design（Anthropic 官方） | github.com/anthropics/… | npx skills add anthropics/skills |
| 5 | theme-factory（Anthropic 官方主题工厂） | github.com/anthropics/… | npx skills add anthropics/skills |
| 6 | brand-guidelines（Anthropic 官方品牌规范） | github.com/anthropics/… | npx skills add anthropics/skills |
| 7 | web-artifacts-builder（Anthropic 官方，HTML artifact） | github.com/anthropics/… | npx skills add anthropics/skills |
| 8 | fixing-motion-performance（UI Skills 套件之一） | github.com/ibelick/ui-… | npx skills add ibelick/ui-skills |
二、UI 打磨 / 可访问性
| # | Skill | 仓库 / 地址 | 安装命令 |
|---|---|---|---|
| 9 | baseline-ui（去除"agent UI slop"） | github.com/ibelick/ui-… | npx skills add ibelick/ui-skills |
| 10 | fixing-accessibility（WCAG 自动审查） | github.com/ibelick/ui-… | npx skills add ibelick/ui-skills |
| 11 | fixing-metadata（SEO/元数据修复） | github.com/ibelick/ui-… | npx skills add ibelick/ui-skills |
| 12 | a11y-agent-team（无障碍 Agent 团队，22 个子 Agent） | github.com/Community-A… | curl -fsSL https://raw.githubusercontent.com/taylorarndt/a11y-agent-team/main/install.sh | bash |
三、React / Next.js 最佳实践
| # | Skill | 仓库 / 地址 | 安装命令 |
|---|---|---|---|
| 13 | vercel-react-best-practices（Vercel 工程团队, 141K 安装） | github.com/vercel-labs… | npx skills add vercel-labs/agent-skills |
| 14 | composition-patterns（React 组合模式 / React 19） | github.com/vercel-labs… | npx skills add vercel-labs/agent-skills |
| 15 | react-best-practices-build（构建/打包优化） | github.com/vercel-labs… | npx skills add vercel-labs/agent-skills |
| 16 | react-view-transitions（View Transition API 动画） | github.com/vercel-labs… | npx skills add vercel-labs/agent-skills |
| 17 | vercel-deploy（一键部署到 Vercel） | github.com/vercel-labs… | npx skills add vercel-labs/agent-skills |
四、框架 / 库专项
| # | Skill | 仓库 / 地址 | 安装命令 |
|---|---|---|---|
| 18 | vue-best-practices | skills.sh 搜索 "vue" | npx skills add <owner>/vue-best-practices |
| 19 | tailwind-best-practices | skills.sh 搜索 "tailwind" | npx skills add <owner>/tailwind-best-practices |
| 20 | typescript-pro | skills.sh 搜索 "typescript" | npx skills add <owner>/typescript-pro |
| 21 | remotion-best-practices（用代码做视频, 96K 安装） | github.com/remotion-de… | npx skills add remotion-dev/skills |
五、测试 / 浏览器自动化
| # | Skill | 仓库 / 地址 | 安装命令 |
|---|---|---|---|
| 22 | agent-browser（AI 操作浏览器, 41K 安装） | skills.sh | npx skills add <owner>/agent-browser |
| 23 | playwright-best-practices | github.com/microsoft/p… 周边 | npx skills add <owner>/playwright-best-practices |
| 24 | test-driven-development（TDD 工作流） | github.com/obra/superp… | npx skills add obra/superpowers |
六、性能 / 质量 / 调试
| # | Skill | 仓库 / 地址 | 安装命令 |
|---|---|---|---|
| 25 | repomix（代码库压缩注入上下文） | github.com/yamadashy/r… | npx skills add yamadashy/repomix |
| 26 | pr-review-toolkit（6 Agent 精审） | github.com/anthropics/… | claude plugin add anthropic/pr-review-toolkit |
| 27 | security-guidance（OWASP 风险自动拦截） | github.com/anthropics/… | claude plugin add anthropic/security-guidance |
| 28 | feature-dev（设计→实现→评审全流程） | github.com/anthropics/… | claude plugin add anthropic/feature-dev |
七、元技能（工具 + 创作）
| # | Skill | 仓库 / 地址 | 安装命令 |
|---|---|---|---|
| 29 | find-skills（Skills 探索入口, 159 万+ 安装） | github.com/vercel-labs… | npx skills add vercel-labs/skills |
| 30 | skill-creator（把个人经验封装成 Skill） | github.com/anthropics/… | npx skills add anthropics/skills |
安装前置与使用提示
- 安装 Node.js 18+（
brew install node或 nodejs.org）。 - 先装
find-skills：让 AI 自动检索场景对应的 Skill，再批量安装：npx skills add vercel-labs/skills - 技能存放位置（手动安装时）：
- 全局：
~/.claude/skills/<name>/SKILL.md - 项目级：
.claude/skills/<name>/SKILL.md
- 全局：
- 使用方式：在 Claude Code / Cursor / Codex 等工具中输入
/，即可看到已装 Skill 的斜杠命令，例如/frontend-design、/baseline-ui。 - 多平台兼容：以上命令在 Claude Code、Cursor、GitHub Copilot、Codex、Gemini CLI、Windsurf、Trae 等 16+ AI 代理上通用。
- 安全提示：Skill 可执行 Python 脚本，建议只从 Anthropic、Vercel Labs、Remotion、Supabase 等官方/知名仓库安装。
推荐组合（按角色）
- 独立前端 / 全栈：
frontend-design+vercel-react-best-practices+baseline-ui+fixing-accessibility+find-skills - 设计驱动前端：
frontend-design+web-design-guidelines+ui-ux-pro-max+theme-factory+brand-guidelines - 大型项目维护：
repomix+vercel-react-best-practices+composition-patterns+pr-review-toolkit+security-guidance - 视频/动效方向：
remotion-best-practices+react-view-transitions+fixing-motion-performance
社区:
