SKILL.md
readonlyread-only
name
building-components
description
建立現代化、可存取且可組合的 UI 元件的指南。適用於建立新元件、實作無障礙功能、建立可組合 API、設定設計代碼、發佈至 npm/registry，或撰寫元件文件時使用。
建立元件
何時使用此技能
當使用者正在進行以下操作時使用：
- 建立新的 UI 元件（基本元件、元件、區塊、模板）
- 實作無障礙功能（ARIA、鍵盤導航、焦點管理）
- 建立可組合的元件 API（插槽、渲染屬性、受控/非受控狀態）
- 設定設計代碼與主題系統
- 將元件發佈至 npm 或 registry
- 撰寫元件文件
- 實作多型或 as-child 模式
- 使用資料屬性進行樣式/狀態處理
參考資料
- definitions.mdx - 成品分類（基本元件、元件、區塊、模板）
- principles.mdx - 元件設計的核心原則
- accessibility.mdx - ARIA、鍵盤導航、WCAG 合規
- composition.mdx - 可組合元件模式
- as-child.mdx - 用於元素多型的 as-child 模式
- polymorphism.mdx - 多型元件模式
- types.mdx - 元件的 TypeScript 型別模式
- state.mdx - 受控與非受控狀態管理
- data-attributes.mdx - 使用資料屬性進行樣式與狀態處理
- design-tokens.mdx - 設計代碼系統與主題
- styling.mdx - 元件樣式方法
- registry.mdx - shadcn 風格的 registry 發佈
- npm.mdx - 將元件發佈至 npm
- marketplaces.mdx - 元件市集發佈
- docs.mdx - 撰寫元件文件
