web-component-design

概覽

什麼是 web-component-design？

web-component-design 是一項專為前端開發者設計的技能，聚焦於使用 React、Vue 和 Svelte 等現代框架，打造可重複使用且易於維護的 UI 元件。它提供元件組合模式、CSS-in-JS 樣式、無障礙最佳實踐及設計系統實作的實用指導。此技能非常適合希望建立可擴充元件庫、一致 API 及穩健前端架構的團隊與個人。

誰適合使用這項技能？

• 建立或重構 UI 元件庫的前端工程師
• 在多專案中實作設計系統的開發者
• 尋求一致、無障礙且易維護元件 API 的團隊
• 使用 React、Vue、Svelte 或 CSS-in-JS 解決方案的任何人

解決的問題

• 簡化元件組合以提升彈性與重用性
• 協助選擇與實作 CSS-in-JS 或模組化樣式方案
• 提供常見 UI 元件的無障礙設計模式
• 支援從舊有元件模式遷移至現代模式

使用說明

安裝步驟

1. 使用以下指令安裝技能：
   npx skills add https://github.com/wshobson/agents --skill web-component-design
2. 先閱讀 SKILL.md，了解整體工作流程與使用背景。
3. 探索輔助檔案：
   • references/accessibility-patterns.md：ARIA 與模態對話框模式
   • references/component-patterns.md：複合元件與 Context 使用
   • references/css-styling-approaches.md：CSS Modules、Tailwind、styled-components 等比較

適應您的專案

• 以範例與參考資料作為您專案與工具的靈感來源。
• 將推薦的元件組合、樣式與無障礙模式整合至您的程式碼庫。
• 根據團隊的設計系統與前端架構調整實作方式。

主要概念

元件組合

• 複合元件（例如 Tabs、Select）
• Render props 以實現彈性渲染
• Slots 用於內容注入（Vue/Svelte）

樣式方案

• CSS Modules 用於範圍限定樣式
• Tailwind 提供工具導向的樣式
• CSS-in-JS 解決方案，如 styled-components 和 Emotion

無障礙設計

• ARIA 模式，適用於模態視窗、對話框及互動元素
• 焦點管理與鍵盤導覽

常見問題

我在哪裡可以找到實作範例？

請查看 references/ 資料夾，內含元件模式、樣式與無障礙設計的詳細程式碼範例與最佳實踐。

web-component-design 適合所有前端專案嗎？

此技能最適合使用 React、Vue 或 Svelte 的專案，以及建立可重複使用 UI 庫或設計系統的團隊。對於簡單靜態網站或非元件化架構的專案，可能不太需要。

如何預覽完整檔案結構？

請在 Agent Skills Finder 的 Files 分頁中開啟，檢視所有可用檔案，包括巢狀參考與輔助腳本。