vercel-composition-patterns 是什麼、怎麼安裝使用：Vercel 官方的 React 組件組合模式 Skill（告別一堆布爾 props）

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

這個 Skill 做什麼

一個組件起初很簡單，後來加了 isCompact、showHeader、hideFooter、variant……十幾個布爾開關組合出上百種狀態，沒人敢動。vercel-composition-patterns 針對的就是這種「布爾 props 氾濫」。description：可擴展的 React 組合模式；在重構布爾 props 氾濫的組件、構建靈活的組件庫或設計可複用 API 時使用，涉及複合組件、render props、Context Provider 或組件架構的任務會觸發，並包含 React 19 的 API 變化。

SKILL.md 的概述是：通過複合組件、上提狀態和組合內部結構來避免布爾 props 氾濫，這些模式讓代碼庫在變大時對人和 AI 智能體都更容易處理。規則分四類：

• 組件架構（高）：避免布爾 props、使用複合組件；
• 狀態管理（中）：把狀態上提、用 Context 定義接口、讓實現與狀態解耦；
• 實現模式（中）：用 children 代替 render props、顯式的變體組件；
• React 19 API（中）：例如不再需要 forwardRef。

規則文件在 rules/ 下，另有彙編版 AGENTS.md。

怎麼安裝

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

bash
npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns

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

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

怎麼用

• 「這個 Modal 組件有 14 個布爾 props，按組合模式重構，保持現有用法可遷移」。
• 「我們要做一套內部組件庫，先幫我設計 Tabs 和 Select 的 API」。
• 「把項目裏的 forwardRef 按 React 19 的寫法清理掉」。

適合誰 / 侷限

適合維護組件庫或設計系統的前端工程師，以及組件 API 越改越亂的業務項目。對只有少量簡單組件的小項目，複合組件反而增加理解成本；React 19 部分只適用於已升級的項目，舊版本不要照搬。

注意事項

• 許可：技能的 license 字段為 MIT。
• 不執行腳本、不聯網。
• 重構組件 API 屬於破壞性改動，讓它同時列出調用方需要修改的位置，並分步提交。