Component Composition

Use this skill to design, refactor, and review modular frontend components using compound component architectures, headless state hooks, slot delegation (asChild), and explicit variant patterns.

When to Use

• refactoring components suffering from boolean prop explosion (>2 boolean customizer flags)
• designing reusable UI design system primitives (Dialogs, Dropdowns, Cards, Drawers, Comboboxes)
• decoupling interaction state machines and accessibility logic from visual markup
• enabling polymorphic trigger elements via Radix-style asChild / Slot delegation
• lifting UI state into dedicated provider components for decoupled sibling and action access
• transitioning legacy React component code (forwardRef, useContext) to modern React 19 idioms (ref prop, use())
• React 19 idioms mandatory migration
• shadcn v4 form architecture migration

Core Rules