القائمة
元件組合模式（Compound Component、Slot Props、Headless UI）。取代 boolean prop 暴衝
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف 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 模式