vercel-composition-patterns

此技能提供了一套用於應用 React 組合模式的結構化框架，以確保可維護且可擴展的前端架構。它專為軟體工程師、前端架構師以及負責重構舊有組件或構建新設計系統的 AI 編碼助手而設計。透過優先考慮「組合而非配置」，此技能幫助開發者擺脫布林屬性濫用的技術債，轉向更靈活的 API 設計，例如複合組件、渲染屬性 (render props) 和上下文提供者 (context providers)。

• 支援使用組件分解和狀態提升至提供者等模式進行架構重構。

• 為實作上下文介面模式提供具體指導，以改善依賴注入和狀態管理。

• 包含對現代 React 19 API 變更的支援，例如以直接屬性存取取代 forwardRef，以及利用 use() Hook 進行上下文存取。

• 依據影響力將規則分類：組件架構 (高)、狀態管理 (中) 和實作模式 (中)，協助 AI 代理優先處理重構工作。

• 標準化複合組件的程式碼結構，確保子組件在共享內部狀態的同時，為終端使用者維持乾淨、宣告式的 API。

• 適用於構建可重用組件庫、設計系統或複雜 UI 組件（如選單、模態框和數據網格）的場景。

• 輸入要求：展現高循環複雜度、過度屬性鑽取 (prop drilling) 或難以維護的布林屬性的程式碼庫或組件檔案。

• 輸出內容：引導式重構步驟、基於上下文的提供者實作、子組件組合邏輯以及對 React 19 最佳實踐的遵循。

• 限制：此技能主要針對 React 和 Next.js 專案；使用者需注意 React 19 特定模式需要相應的環境升級。

• 實作建議：始終採取架構優先的方法，先識別可以提升的狀態，在實作個別子組件之前先定義上下文介面。