ui-component-builderlisted

# UI Component Builder ## Core Rule Production-ready means accessibility, states (loading/empty/error), edge cases, and responsive behavior are designed first — not retrofitted after the happy path ships. ## Kit Context Before starting: 1. Read `CODEBASE_MAP.md` to identify the project's UI stack and component conventions 2. Read `DESIGN.md` if it exists — it is the source of truth for tokens, colors, typography, spacing 3. Read `CLAUDE.project.md` if it exists — project-specific UI rules override kit defaults 4. Read any framework-specific docs in `agent_docs/project/` (e.g., Next.js conventions, design system docs) If a component library is already in use (shadcn, MUI, Chakra, Radix, custom), build on top of it — do not introduce a parallel system. ## When to Use Invoke with `/ui-component-builder <component-name>` when: - A new reusable UI component is needed (button, modal, table, form field, card, etc.) - An existing one-off piece of UI needs to be extracted into a reusable component - A component needs to be redesigned to meet production standards (accessibility, states, responsive) - You want a component-architecture review *before* writing the implementation ## When NOT to Use - For pages, routes, or layouts — those are application composition, not component design - For trivial wrappers (a 5-line styling div) — inline is fine - For full app scaffolding — combine `/shape-spec` with stack-specific tooling - For pure visual review of existing components — use