design-module-composition

What problem does it solve?

This skill helps you design reusable UI component modules that expose the right parts to consumers, so variation is achieved through composition instead of brittle, prop-heavy configuration.

Core Features & Use Cases

• Compound-component APIs that share context between a parent and named children (e.g., Tabs and its subparts).
• Slot/children APIs that let consumers pass arbitrary content into well-defined extension points.
• Render-props and headless primitives that separate state/behavior from markup so teams can reuse interaction logic with different presentations.
• Polymorphic/asChild patterns that let consumers change the rendered element while preserving behavior and accessibility contracts.
• Boundary guidance for when to choose composition versus configuration, and when to hand off to other architecture/a11y skills.

Quick Start

Ask for a proposed component API and the consumer’s variation goals, and use this skill to rewrite the design so the primary variations are enabled via composition (slots/children/compound pieces/headless state) rather than adding many boolean props.