web-component-design

此技能提供了一套完整的框架，用於在現代前端生態系統中構建專業、可維護且高度可重複使用的 UI 組件。專為前端工程師和系統架構師設計，重點在於框架特定模式與通用架構原則的結合。無論您是在啟動新的設計系統還是重構遺留代碼庫，此技能都能讓您實現一致的組件接口、管理複雜的狀態關係，並透過現代 CSS-in-JS 解決方案優化樣式工作流程。

• 進階組件組合模式，包括用於封裝功能的複合組件 (Compound Components)、用於靈活控制反轉的 Render Props，以及用於動態內容注入的 Slots。

• 關於 Tailwind CSS、CSS Modules、styled-components、Emotion 和 Vanilla Extract 等樣式架構的策略指導，在性能與開發者體驗之間取得平衡。

• 強健的組件 API 設計原則，強調語義化命名、TypeScript 接口的屬性驗證，以及嚴格遵守以組合為優先的開發方式。

• 跨框架模式掌握，涵蓋 React (Context/Hooks)、Vue 3 (Composables/Provide/Inject) 和 Svelte 5 (Runes/Snippets)，確保組件行為的一致性。

• 關於可訪問性 (Accessibility)、響應式設計和設計系統可擴展性的最佳實踐，確保您的組件庫符合企業級品質標準。

• 目標用戶：構建組件庫或複雜介面模組的前端開發人員、UI/UX 工程師以及設計系統維護者。

• 預期輸入：高階 UI 需求、需要重構的遺留組件代碼，或來自 Figma 等工具的設計規範。

• 預期輸出：遵循框架特定慣例的乾淨、模組化、型別安全且文檔完善的組件代碼。

• 實作限制：強調適用的零運行時樣式 (Zero-runtime styling)、依賴管理，以及為外部組件庫消費者保持穩定的公共 API。

• 實用提示：優先考慮狀態隔離，使用基於變體的樣式 (例如 class-variance-authority) 來降低複雜度，並始終優先使用 children 組合而非層層傳遞屬性 (Prop Drilling)。