composition-pattern

What problem does it solve?

Many UI components become rigid and hard to reuse when they expose numerous configuration props for content; this Skill advocates accepting dynamic content so consumers control composition, improving flexibility and extensibility across use sites.

Core Features & Use Cases

• Children and Slots Over Props: Prefer default children and named slots instead of enumerating content props to avoid prop explosion and make components adaptable.
• Named Slots & Compound Components: Support multiple distinct content regions and related subcomponents that share implicit state via context or provide/inject for cohesive APIs.
• Headless & Polymorphic Patterns: Separate behavior from styling so consumers can supply UI, and allow as/tag polymorphism so the same component can render different semantic elements.
• Use Case: Build a Card, Modal, or Tabs system where consumers supply header, body, and footer content or attach compound subcomponents without changing the parent API.

Quick Start

Implement a Card component that accepts default children for body, named slots or props for header and footer, shares state through context for compound subcomponents, and exposes headless hooks plus an as/tag prop for polymorphic rendering.