vercel-react-best-practices 是什麼、怎麼安裝使用：Vercel 官方的 React / Next.js 性能優化 Skill（70 條規則）

本文根據 vercel-labs/agent-skills 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。skills.sh 榜單當日顯示該技能累計安裝約 78.6 萬次；所在倉庫 vercel-labs/agent-skills 在 GitHub 約 3.2 萬 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

智能體寫的 React 代碼通常能跑，但性能問題很隱蔽：串行的 await 造成請求瀑布、從桶文件（barrel file）整包導入、無意義的重渲染。vercel-react-best-practices 把 Vercel 工程團隊的經驗整理成了規則集。按 description，在編寫、評審或重構 React / Next.js 代碼時使用，涉及組件、Next.js 頁面、數據獲取、包體積優化或性能改進的任務會觸發它。

SKILL.md 自述包含 8 個類別、70 條規則，按影響排序：

1. 消除瀑布（關鍵）；2. 包體積優化（關鍵）；3. 服務端性能（高）；4. 客戶端數據獲取（中高）；5. 重渲染優化（中）；6. 渲染性能（中）；7. JavaScript 性能（中低）；8. 進階模式（低）。

每條規則是 rules/ 目錄下的一個獨立文件，帶錯誤寫法與正確寫法的對照，按需讀取；另有一份彙編好的完整文檔 AGENTS.md。

怎麼安裝

倉庫 README 給的安裝方式是 skills CLI。只裝這一個技能，加上 CLI 文檔裏的 --skill 參數（技能名是 vercel-react-best-practices，與倉庫裏的文件夾名不完全相同）：

bash
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices

去掉 --skill 會進入選擇介面，可以一次勾選多個；加 -g 裝到用戶目錄，加 -a claude-code 之類的參數指定智能體。

倉庫整體介紹和其他安裝方式，詳見本站《vercel-labs/agent-skills 是什麼、怎麼安裝：Vercel 官方 Agent Skills（React / Next.js 最佳實踐、網頁介面規範審查）》。

怎麼用

• 「按 Vercel 的 React 最佳實踐評審 app/dashboard 目錄，按嚴重程度列出問題」。
• 「這個頁面首屏很慢，看看有沒有請求瀑布，改成並行」。
• 平時寫新組件時它會自動生效，例如主動把相互獨立的請求放進 Promise.all。

適合誰 / 侷限

適合用 Next.js（尤其是 App Router）和 React 做產品的團隊，也適合拿來給存量代碼做一輪性能體檢。規則帶有 Vercel 的技術取向，部分條目只對 Next.js 的服務端組件有意義；它是靜態經驗，不會替你測量真實性能，優化前後仍應以實際指標為準。

注意事項

• 許可：技能的 license 字段為 MIT；倉庫根目錄沒有 LICENSE 文件。
• 不執行腳本、不聯網：純規則文檔。
• 規則數量多，評審大目錄時會讀入不少文件，注意上下文佔用。