最近開始接觸 Claude Code 和 Copilot Agent，但老實說我的感想是「原生的 Agent，比想像中還要普通？」。
聊天是沒問題的。也會產生程式碼。但總覺得…不是「生產等級」的感覺。
例如像這樣：
- 會寫程式碼，但設計模式亂七八糟
- 會回答問題，但不知道實務上的最佳實務
- 能生成 UI，但看起來像設計外行做的
總之就像是買了智慧型手機卻沒裝任何應用程式。作業系統有了，卻不知道要拿來做什麼。
Skills 是什麼？
Skills 跟外掛程式（plugin）有點不一樣。它是把「產業的最佳實務」、「實際專案的經驗值」、「工程上的約束規則」、「結構化的思考框架」注入到 Agent 裡面。
也就是說，讓 Agent 的「基本判斷力」被提升的一種機制。
這次要介紹的 20 個 Skills 中，先把前五個裝上去試試看，體感會完全不一樣。
在 skills.sh（https://skills.sh/）上，這五個也是安裝次數排行前幾名。
導入 Skills 時的安全注意事項（重要）
最近有報告指出，針對 Agent 的 Skills 出現了「惡意程式碼混入（所謂的『Skill 污染 / 供應鏈攻擊』）」。特別是透過 npx 執行時，會有「取得遠端程式碼並直接執行」的行為，這會成為攻擊向量。
例如在 :contentReference[oaicite:0]{index=0} 中提到的「Toxic Skills」，指出透過外部倉庫可能會執行非預期行為（例如傳送資訊、濫用權限等）的風險。
最低限度的檢查重點：
- 不要只看 skills.sh 的列表（人氣 ≠ 安全）
- 一定要檢查倉庫內容（實作程式碼、相依關係）
- 在執行 npx 前，弄清楚會執行什麼
- 不明的腳本請在沙盒環境驗證，而不是直接在本機執行
作為參考範例，下面這類 Skill 使用前也請「務必檢查內容」：
1. find-skills
第一個要裝的 Skills 就是這個。讓 Agent 能自己搜尋、發現並推薦其他 Skills。可以把它想成是讓 Agent 擁有自己的「Skill App Store」。
npx skills add https://github.com/vercel-labs/skills --skill find-skills
2. vercel-react-best-practices
針對 React / Next.js 的效能優化而設計，內建 64 條規則，分成 8 個類別。從消除瀑布式流程到 Server Components 的最佳化，覆蓋了常踩的效能地雷。
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
3. frontend-design
Agent 生成的 UI 說實話常有「明顯 AI 做出來的味道」。裝了這個 Skills 後，配色、版面、動畫的品質會明顯提升，能產出不那麼模板化、看起來比較專業的 UI。
npx skills add https://github.com/anthropics/skills --skill frontend-design
4. web-design-guidelines
非常適合用來輔助程式碼審查。內含超過 100 條的網頁可及性、使用者體驗、效能規則，能幫你避免基本的 UX 錯誤。當 PR 審查時有這個會省很多事。
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
5. remotion-best-practices
Remotion（用 React 製作短影片）的最佳實務彙整。涵蓋動畫、匯出、效能優化等，讓沒有影片製作經驗的人也能快速產出高品質的短影片。
npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices
6. brainstorming
基於 Superpowers 框架，讓 Agent 做結構化的腦力激盪（brainstorming）、TDD、工作流程設計。不是「先亂丟一些想法」，而是會產出「有整理、有層次的輸出」。
npx skills add https://github.com/obra/superpowers --skill brainstorming
7. agent-browser
實現瀏覽器自動操作的 Skills。可以讓 Agent 瀏覽網頁、表單自動填寫、擷取截圖等，把那些手動很麻煩的工作交給 Agent 處理。
npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browser
8. browser-use
另一個強大的瀏覽器操作 Skills。以 Rust 實作、執行速度快。與 agent-browser 組合使用時，即使是複雜的自動化任務也能穩定運行。
npx skills add https://github.com/browser-use/browser-use --skill browser-use
9. supabase-postgres-best-practices
Supabase + PostgreSQL 的資料庫優化指南。收錄避免 SQL 反模式並提升效能的規則。如果不想在資料庫問題上陷太深，這個幾乎是必備。
npx skills add https://github.com/supabase/agent-skills --skill supabase-postgres-best-practices
10. azure-cost-optimization
Azure 成本優化規則集。有沒有看過雲端帳單時想說「咦，竟然這麼貴？」的經驗？裝了這個 Skills 可以在帳單變得嚴重前先做調整。
npx skills add https://github.com/microsoft/github-copilot-for-azure --skill azure-cost-optimization
11. cloudflare/skills
Cloudflare Workers 與邊緣運算的最佳實務。最近很熱門，感覺有不少從 Vercel 轉過來的使用者。如果想把東西放到邊緣運算執行，這個很適合。
npx skills add cloudflare/skills
12. redis/agent-skills
Redis 的進階模式與反模式彙整。從快取、向量搜尋到串流處理都有涵蓋。能把 Redis 從「只是快取」升級成更完整的解決方案。
npx skills add redis/agent-skills
13. vercel-composition-patterns
專注於 React 的組合（composition）模式最佳實務。和前面提到的 vercel-react-best-practices 搭配使用，能讓元件設計更上一層樓。
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns
14. vercel-react-native-skills
React Native 官方的最佳實務集。若你在開發行動應用，裝了這個不會吃虧。
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills
15. sleek-design-mobile-apps
現代且洗鍊的行動應用設計指南。能大幅提升 Agent 生成的 app UI 質感，跟那些「土味」介面說再見。
npx skills add https://github.com/sleekdotdesign/agent-skills --skill sleek-design-mobile-apps
16. ui-skills
針對 UI 元件與互動的最佳實務。最近在 X（前 Twitter）上也很熱門，如果想讓 AI 輸出達到設計師等級的介面，這個幾乎是首選。
npx skills add ibelick/ui-skills
17. pdf
讓 Agent 負責 PDF 的產生、解析與處理的 Skills。報表製作或文件處理時，這類功能在日常工作裡會非常實用。
npx skills add https://github.com/anthropics/skills --skill pdf
18. seo-audit
對網站做 SEO 檢查並提出改善建議的 Skills。能直接在正式專案中看到效果，對流量優化很有幫助。
npx skills add https://github.com/coreyhaines31/marketingskills --skill seo-audit
19. skill-creator
可以讓你自己製作專屬的 Skills。這樣就不必等別人更新，想要的功能可以自己做。
npx skills add https://github.com/anthropics/skills --skill skill-creator
20. code-review-expert
能做到像資深工程師一樣的程式碼審查。從 SOLID 原則、資安、到效能都有多角度檢查，能確實提升 PR 的品質。
npx skills add https://github.com/sanyuan0704/code-review-expert --skill code-review-expert
總結
很多人可能以為「Agent 的差異是由模型參數數量決定的吧？」。
但實際上使用過會發現，真正會產生差異的是規則（Skills）這一塊。
模型決定最低門檻，Skills 決定上限。
工具會不斷進化，模型也會越來越大。但未來對開發者的要求，不只是寫程式的能力，而是「定義正確規則、設計 AI 行為」的能力。
如果有感興趣的 Skills，不妨先試一個，體感會有所改變。
如果你覺得這篇文章有幫助，歡迎分享給別人。如果你有其他推薦的 Skills，也請在留言告訴我！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
