What problem does it solve?
It solves the problem of inconsistent, off-brand UI output by generating React/Tailwind components that strictly match the project's DESIGN.md and required interaction/state coverage.
Core Features & Use Cases
- Design-grounded component generation: Reads DESIGN.md first and applies the project’s typography, spacing, surface, and animation constraints.
- Variant-first delivery: Produces three variants for the same component, tuned using the dial system (design variance, motion intensity, visual density).
- Mandatory state completeness: Always includes default, hover, active/selected, loading skeleton, empty state, error, disabled, and visible keyboard focus ring—appropriate for data-fetching and list/collection UI.
- Output quality guardrails: Enforces rules like no Inter, no hardcoded hex in JSX, no generic gray tokens, grid-based layout patterns, and motion limited to transform/opacity with prefers-reduced-motion handling.
- Real integration patterns: Supports 21st.dev Magic discovery/generation workflow and includes Pi-CEO dashboard patterns (e.g., session cards, phase indicators, streaming log terminals).
Quick Start
Use the ui-component-builder skill to build a React component from the project’s DESIGN.md by asking it to generate three variants with all interaction states, including a loading skeleton and empty/error/disabled states.
