小編精選 - 技術文章翻譯 · 06月10日

前端領域 30 個值得安裝的 Agent Skills

前端領域 30 個值得安裝的 Agent Skills

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

一、設計 / 視覺類（告別「AI 味」）

#Skill倉庫 / 地址安裝命令1frontend-design（Anthropic 官方, 277K+ 安裝）github.com/anthropics/…claude plugin add anthropic/frontend-design2web-design-guidelines（Vercel Labs, 107K 安裝）github.com/vercel-labs…npx skills add vercel-labs/agent-skills3ui-ux-pro-max（67 種風格、97 配色）github.com/nextlevelbu…npx skills add nextlevelbuilder/ui-ux-pro-max-skill4canvas-design（Anthropic 官方）github.com/anthropics/…npx skills add anthropics/skills5theme-factory（Anthropic 官方主題工廠）github.com/anthropics/…npx skills add anthropics/skills6brand-guidelines（Anthropic 官方品牌規範）github.com/anthropics/…npx skills add anthropics/skills7web-artifacts-builder（Anthropic 官方，HTML artifact）github.com/anthropics/…npx skills add anthropics/skills8fixing-motion-performance（UI Skills 套件之一）github.com/ibelick/ui-…npx skills add ibelick/ui-skills### 二、UI 打磨 / 無障礙

#Skill倉庫 / 地址安裝命令9baseline-ui（去除「agent UI slop」）github.com/ibelick/ui-…npx skills add ibelick/ui-skills10fixing-accessibility（WCAG 自動審查）github.com/ibelick/ui-…npx skills add ibelick/ui-skills11fixing-metadata（SEO / 中繼資料修復）github.com/ibelick/ui-…npx skills add ibelick/ui-skills12a11y-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倉庫 / 地址安裝命令13vercel-react-best-practices（Vercel 工程團隊, 141K 安裝）github.com/vercel-labs…npx skills add vercel-labs/agent-skills14composition-patterns（React 組合模式 / React 19）github.com/vercel-labs…npx skills add vercel-labs/agent-skills15react-best-practices-build（建置 / 打包優化）github.com/vercel-labs…npx skills add vercel-labs/agent-skills16react-view-transitions（View Transition API 動畫）github.com/vercel-labs…npx skills add vercel-labs/agent-skills17vercel-deploy（一鍵部署到 Vercel）github.com/vercel-labs…npx skills add vercel-labs/agent-skills### 四、框架 / 函式庫專項

#Skill倉庫 / 地址安裝命令18vue-best-practicesskills.sh 搜尋 "vue"npx skills add <owner>/vue-best-practices19tailwind-best-practicesskills.sh 搜尋 "tailwind"npx skills add <owner>/tailwind-best-practices20typescript-proskills.sh 搜尋 "typescript"npx skills add <owner>/typescript-pro21remotion-best-practices（用程式碼做影片, 96K 安裝）github.com/remotion-de…npx skills add remotion-dev/skills### 五、測試 / 瀏覽器自動化

#Skill倉庫 / 地址安裝命令22agent-browser（AI 操作瀏覽器, 41K 安裝）skills.shnpx skills add <owner>/agent-browser23playwright-best-practicesgithub.com/microsoft/p… 周邊npx skills add <owner>/playwright-best-practices24test-driven-development（TDD 工作流程）github.com/obra/superp…npx skills add obra/superpowers### 六、效能 / 品質 / 除錯

#Skill倉庫 / 地址安裝命令25repomix（程式碼庫壓縮注入上下文）github.com/yamadashy/r…npx skills add yamadashy/repomix26pr-review-toolkit（6 Agent 精審）github.com/anthropics/…claude plugin add anthropic/pr-review-toolkit27security-guidance（OWASP 風險自動攔截）github.com/anthropics/…claude plugin add anthropic/security-guidance28feature-dev（設計→實作→審查全流程）github.com/anthropics/…claude plugin add anthropic/feature-dev### 七、元技能（工具 + 創作）

#Skill倉庫 / 地址安裝命令29find-skills（Skills 探索入口, 159 萬+ 安裝）github.com/vercel-labs…npx skills add vercel-labs/skills30skill-creator（把個人經驗封裝成 Skill）github.com/anthropics/…npx skills add anthropics/skills---

安裝前置與使用提示

安裝 Node.js 18+（brew install node 或 nodejs.org）。
先裝 find-skills：讓 AI 自動檢索情境對應的 Skill，再批次安裝： ```
bash 體驗AI程式碼助手代碼解讀複製代碼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 等官方／知名倉庫安裝。