ui-styling

ui-styling 技能提供了一個專業且可擴展的框架，用於開發現代 React 介面。它強制執行「組件優先」的哲學，確保 shadcn/ui 等 UI 原語不會直接用於功能程式碼中，而是包裹在自定義的、可重複使用的組件內。這種方法建立了單一事實來源，顯著提高了可維護性，並確保複雜應用程式中的使用者體驗一致。此技能專為建構設計系統、複雜表單或響應式儀表板的開發人員所設計，需要在快速原型製作與長期程式碼庫健康之間取得平衡。

• 使用 React、Tailwind CSS 工具類別與 CVA (Class Variance Authority) 進行高級組件組合，實現高度可擴展的變體管理。

• 表單整合工作流程，結合 React Hook Form 與 Zod 驗證模式，以實現強大的型別安全輸入處理。

• 行動優先的響應式設計模式，包括觸控友善的組件尺寸調整與使用斷點的自適應佈局。

• 透過 CSS 變數、主題支援以及針對原語、自定義包裝器與功能特定組合的模組化檔案組織，進行全面的樣式管理。

• 基於 Radix UI 原語的無障礙功能實作，確保螢幕閱讀器相容性與鍵盤導航標準。

• 務必將 shadcn/ui 原語包裹在自定義組件中，以允許集中式樣式更新與一致的屬性介面。

• 使用建議的組件組織結構：將原語保留在 components/ui/，將重用邏輯放在 components/custom/，並將領域邏輯隔離在 components/features/ 中。

• 對於互動式元素，優先考慮觸控友善的最小高度 (min-h-11)，以改善行動裝置的使用性。

• 若有複雜的表單需求，請參考使用 Zod 與 React Hook Form 的整合驗證模式，以確保資料一致性。

• 在實作多態組件時，利用 asChild 模式來維持靈活的渲染目標，同時保留無障礙屬性。