vercel-react-best-practices

vercel-react-best-practices 技能概覽

這個技能能做什麼

vercel-react-best-practices 技能是一套以效能為核心的 React 與 Next.js 實作指南。它能幫你在資料抓取、渲染、事件處理與 bundle 大小之間做出更好的選擇，讓你以更少回歸風險交付更快的 UI。當你需要的不只是泛用提示，而是能直接對應到具體程式碼改動的規則時，就適合使用 vercel-react-best-practices 技能。

誰適合使用

這個技能最適合前端工程師、AI 編碼代理，以及處理 React 或 Next.js 應用的審查者，特別是那些在意載入時間、重繪、hydration，以及 server/client 邊界的人。當你已經知道功能目標，但希望在功能上線前先把實作優化好時，vercel-react-best-practices for Frontend Development 這個角度最有價值。

它有什麼不同

這個 repo 的組織方式是依優先順序排列的規則，而不是零散建議。最有價值的重點是消除 waterfall 與縮減 bundle，因此當導入卡在頁面過慢、不必要的網路串接，或 client bundle 過大時，這個技能特別有用。相較於一般提示詞，vercel-react-best-practices 指南能更可靠地把症狀一路帶到修正方案。

如何使用 vercel-react-best-practices 技能

安裝與首次閱讀

使用 npx skills add Charlie85270/Dorothy --skill vercel-react-best-practices 安裝。安裝完成後，先看 SKILL.md，再閱讀 AGENTS.md 以了解面向代理的工作流程。如果你需要規則層級的細節，請先檢查 rules/ 再動手改程式，因為那個資料夾收的是會直接驅動技能輸出的可執行指引。

什麼樣的輸入最容易產生好結果

這個技能在你提供元件、路由或 server action，以及你要解決的效能問題時，效果最好。好的需求會寫清楚框架、使用者可見的問題與任何限制，例如：「重構這個 Next.js dashboard 以減少 waterfall，維持相同 API contract，並避免新增 client-side dependencies。」這樣 vercel-react-best-practices usage 路徑才有足夠脈絡挑對規則。

建議工作流程

建議這樣做：先找出瓶頸，再對應到規則類別，最後要求定向重寫或審查。處理資料抓取時，請說明工作能否平行化或延後執行。處理 bundle 時，請要求調整 import、動態載入，或延後載入第三方套件。處理渲染時，請點出 flicker、hydration mismatch 或昂貴的重繪，讓技能能把焦點放在影響最大的修正上。

先讀哪些檔案

先讀 SKILL.md 取得類別對照表，再看 AGENTS.md 了解更完整的結構。如果你的任務碰到非同步行為，請查看 rules/async-defer-await.md、rules/async-dependencies.md、rules/async-api-routes.md 和 rules/async-suspense-boundaries.md。如果問題與 bundle 有關，先看 rules/bundle-barrel-imports.md、rules/bundle-dynamic-imports.md 和 rules/bundle-defer-third-party.md。

vercel-react-best-practices 技能 FAQ

這只適用於 Next.js 嗎？

不是。它在 Next.js 應用中最有價值，但這些 React 效能模式也同樣適用於一般 React 前端。當你的程式碼同時混用了 client components、server rendering 和資料抓取時，vercel-react-best-practices skill 特別實用。

這和一般提示詞有什麼不同？

一般提示詞可能只會給你像是「使用 memoization」或「拆分元件」這類泛泛建議。當你需要有規則依據的判斷，例如何時延後 await、避免 barrel imports，或把工作移到 server 端時，這個技能更有幫助。這也讓 vercel-react-best-practices guide 在 code review 和重構時更可靠。

什麼情況下不該用？

不要把它用在 design-system 品牌調性、純後端 API 邏輯，或與效能無關的 bug 上。如果任務只是小幅 UI 文案修改，或是純架構討論而沒有 React/Next.js 的實作細節，這個技能提供的價值很有限。它也不會取代產品層面的決策，也就是某個功能到底該不該存在。

對初學者友善嗎？

可以，只要你把它當成有引導的重構助手，而不是完整的理論課程。初學者最能受益的方式，是一次只問一個聚焦問題，並貼上最小且相關的 component 或 route。這樣建議會更可落地，也能降低誤判。

如何改進 vercel-react-best-practices 技能

提供正確的限制條件

最好的結果通常來自真正重要的限制：server 或 client component、資料來源、bundle 預算、延遲目標，以及哪些部分不能改。若你希望 vercel-react-best-practices for Frontend Development 更精準，就要說明你能不能改 imports、拆分 components、加入 Suspense，或把邏輯移到 server。

依相依順序提供程式碼

貼出造成瓶頸的檔案，而不只是表面症狀。舉例來說，請包含 page component、資料載入器，以及任何會觸發額外 fetching 的 child component。這樣技能才能抓到 waterfall、重複 state 或不必要的 rerender，而不是只從片段猜測。

先要求規則，再要求重寫

一個很有用的追問是：「先指出最可能的規則類別，說明為什麼適用，然後在最小行為變更的前提下重寫程式碼。」這會逼輸出緊扣 vercel-react-best-practices usage 模型，也能避免變成空泛的大方向最佳化建議。

以可量化結果迭代

第一次處理完後，請用具體目標再收斂：更少的 requests、更小的 client bundle、更低的 hydration 成本，或更少的 render churn。如果輸出太激進，就說明要保留哪個取捨，例如可讀性、可測試性或瀏覽器支援。這是讓 vercel-react-best-practices 技能產出你真正能上線程式碼的最快方式。