前端领域 30 个值得安装的 Agent Skills

以下基于 skills.sh 排行榜和 Claude Code Frontend Design Toolkit 等社区精选整理（2026 年 6 月）。通用安装命令格式：npx skills add <owner/repo>，需要 Node 18+。

#	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`

#	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

#	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，再批量安装：
bash 复制代码
```
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 等官方/知名仓库安装。