components-build

components-build 技能為開發人員和 UI 工程師提供了一套全面的工具，用於創建高品質、專業的 React 元件。此技能基於由 Hayden Bleasel 與 shadcn 共同撰寫的業界標準規範，強制執行嚴格的架構模式，確保您的 UI 程式碼具有可擴展性、易於存取且易於維護。它專為在設計系統、元件庫或複雜前端應用程式上工作的軟體工程師而設計，在這些場景中，元件組合與無障礙存取至關重要。

• 實作包含組合、存取性 (Accessibility)、狀態管理與多型 (Polymorphism) 在內的 16 個核心規則類別。
• 強制執行組合優於配置、單一元素封裝以及原生 HTML 屬性擴展等最佳實踐。
• 提供關於使用 ARIA、焦點管理與螢幕閱讀器提示來實作可存取互動元素的指南。
• 透過整合 Tailwind CSS、CVA (Class Variance Authority) 與用於類別智慧合併的 cn 工具，簡化樣式處理流程。
• 使用 TypeScript 為複雜元件介面提供強大的型別安全保障，包括適當的屬性匯出與定義結構。
• 支援受到 Radix UI 啟發的 'as-child' 組合模式，實現無縫的元件互動與屬性合併。
• 提供關於發佈工作流程的詳細指導，包括註冊表結構、中繼資料架構與 npm 套件匯出。

使用技巧與實務建議：

• 在啟動新元件檔案或將舊版 UI 模式重構為現代化的無頭架構時使用此技能。
• 對於需要檢查是否符合存取性標準 (WCAG) 或狀態委派模式 (受控與非受控) 的程式碼審查非常有效。
• 此技能可追蹤 React 元件設計中的常見陷阱，例如屬性穿透 (prop drilling) 或低效的樣式處理，並提供錯誤與正確程式碼模式的具體範例。
• 預期輸入包含元件需求、功能規格或現有的程式碼片段。代理程式將根據 components.build 規則集輸出重構後的程式碼、架構建議或驗證報告。
• 請確保您的專案環境支援 Tailwind CSS 與 Radix UI 原語，以實現與這些準則的完全相容性。