AI 工具
Vibe Coding 必學的 24 個 Skill
2026年9月20日 trytrycan.ai
24 個全部用 GitHub API 確認過 repo 和 SKILL.md 存在,查證於 2026-09-19
大部分外掛都在官方市集,先加一次,之後只要換名字:
/plugin marketplace add anthropics/claude-plugins-officialVercel 那組走另一條,一行裝三個:
npx skills add vercel-labs/agent-skills必裝
| Skill | 做什麼 | 怎麼裝 |
|---|---|---|
superpowers | 整套開發流程,從釐清需求到審查 | /plugin install superpowers@claude-plugins-official |
skill-creator | 把你自己的做法包成 skill | /plugin install skill-creator@claude-plugins-official |
frontend-design | 產出不像 AI 做的介面 | /plugin install frontend-design@claude-plugins-official |
code-review | 寫完先幫你抓 bug | /plugin install code-review@claude-plugins-official |
hyperframes | 寫 HTML 產出影片 | /plugin install hyperframes@claude-plugins-official |
ponytail | 逼它別過度設計,一行寫得完不寫十行 | /plugin marketplace add DietrichGebert/ponytail 之後 /plugin install ponytail@ponytail |
caveman | 壓縮輸出,官方量測砍掉約 65% token | /plugin marketplace add JuliusBrussee/caveman 之後 /plugin install caveman@caveman |
humanizer | 去掉 AI 味 | npx skills add blader/humanizer --global |
⚠️ caveman 有兩個撞名的,上面裝的是 JuliusBrussee 那個。code-review 也有三個同名的,我列的是官方版
必學
裝了不會自己生效,要照著流程走。前四個是一條完整的前置鏈:探需求 → 逼你講清楚 → 轉成計畫 → 照計畫跑
| Skill | 做什麼 | 來源 |
|---|---|---|
brainstorming | 動手前先把需求問清楚 | 隨 superpowers 一起進來 |
grill-me | 反過來拷問你,把講不清楚的逼出來 | /plugin marketplace add mattpocock/skills |
writing-plans | 需求轉成執行計畫 | 隨 superpowers |
executing-plans | 照計畫一步步跑完 | 隨 superpowers |
systematic-debugging | 抓 bug 不靠猜 | 隨 superpowers |
test-driven-development | 先寫測試再寫實作 | 隨 superpowers |
superpowers 是唯一被 Anthropic 官方市集收錄的第三方 skill。但社群也有負評,有人嫌它錯更多、來回太多很燒錢,自己評估
建議
看你的技術棧
| Skill | 做什麼 | 怎麼裝 |
|---|---|---|
web-design-guidelines | 逐行檢查 UI 程式碼,含無障礙 | npx skills add vercel-labs/agent-skills |
react-best-practices | React/Next.js 效能準則,出自 Vercel | 同上 |
deploy-to-vercel | 部署與預覽環境 | 同上 |
canva | 在對話裡做圖、改圖、調尺寸 | /plugin install canva@claude-plugins-official |
playwright | 瀏覽器自動化與端對端測試 | /plugin install playwright@claude-plugins-official |
webapp-testing | 開瀏覽器實測你的網站 | /plugin marketplace add anthropics/skills |
⚠️ react-best-practices 的註冊名是 vercel-react-best-practices,呼叫要用後者
可以學
| Skill | 做什麼 | 怎麼裝 |
|---|---|---|
wayfinder | 大工程拆成決策地圖,一次解一個 | 隨 mattpocock/skills 進來 |
karpathy-guidelines | Karpathy 的四條行為準則 | /plugin marketplace add forrestchang/andrej-karpathy-skills |
ui-ux-pro-max | 161 組配色與 57 組字體搭配 | /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill |
agent-browser | 自動操作瀏覽器,填表、截圖、抓資料 | npx skills add vercel-labs/agent-browser |
為什麼不排名
本來要做「最多人用的 Skill」,查完發現這件事查不到:
- 某個安裝榜的 24 小時趨勢,前五名有三個 repo 只有 2 星、0 星、6 星,其中兩個還把自己取名叫
superpowers蹭原版 - 同一個
frontend-design,一個榜標 34,900 次安裝,另一個標 253 次 - 同一個站列著 16 個
mattpocock/skills倉庫裡根本不存在的 skill,還標著幾十萬安裝 - 連 GitHub 星數都不能用,
obra/superpowers建立 11 個月就超過 React
所以改成按推薦強度分四級,那是我的判斷,不假裝是數據
榜單常推,但我沒收的
next-best-practices已被 Vercel 下架,對方 README 白紙黑字寫no longer a skill,某個榜還排第 6supermemory多份榜單都有,GitHub 搜不到對應 repocode-reviewer來自 agensi,沒有 repo、沒有作者標示,只能下載 zip
另外 agent-browser 我一開始以為只是 CLI 所以排除,後來查到它有完整的 SKILL.md,是我看錯,已經收進名單
最後補一個不用裝的:/goal 是 Claude Code 內建指令,設一個條件之後每回合結束會自動檢查有沒有達成,沒達成就繼續跑