Menú
元件組合模式（Compound Component、Slot Props、Headless UI）。取代 boolean prop 暴衝
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
完整的網站開發指南，涵蓋 UI/UX 設計、React/Vue/Next.js 前端框架、Laravel/Node.js 後端、Coding Style 與互動式選擇精靈
Web 動畫（Framer Motion、GSAP、View Transitions API、Lottie）。CSS 動畫見 ui/no-ai-feel.md
REST API 與 GraphQL 設計規範指南
認證授權（Auth.js、Clerk、JWT/Cookie 安全、RBAC/ABAC）。不含 OAuth provider 細節
Laravel、Node.js、Django、FastAPI 後端框架指南
JavaScript、TypeScript、PHP、Python、CSS 代碼規範
| id | component_composition |
| name | component_composition |
| description | 元件組合模式（Compound Component、Slot Props、Headless UI）。取代 boolean prop 暴衝 |
| 層級 | 檔案 | 用途 |
|---|---|---|
| L0 | 本檔 | 路由表 |
| L1 | compact.md | 何時用何模式 |
| L2 | compound.md | Compound Component |
| L2 | slot.md | Slot / asChild |
| L2 | headless.md | Headless UI 模式 |
業界共識（Vercel Composition Patterns）：用組合取代 boolean prop。否則元件 API 會爆炸：
// ❌ Boolean 暴衝
<Button primary large rounded loading icon iconRight outline />
// ✅ 用組合
<Button.Root size="lg" variant="primary">
<Button.Icon><LoaderIcon /></Button.Icon>
<Button.Label>送出</Button.Label>
</Button.Root>
元件設計、API 設計、compound、slot、headless、asChild、shadcn 模式