component-designlisted

Design and implement the component: $ARGUMENTS. ## Steps 1. **Read the design system**: Read `.claude/rules/ui-design-system.md` (foundations & index) and `.claude/rules/ui-components.md` (component standards — cards, badges, buttons, form controls, compound components), both installed as React overlay rules — or a project's `docs/references/ui/ui-design-system.md` equivalent. Read whichever is present. 2. **Check existing components**: Check the project's component directory for available UI primitives and established patterns. Search for similar components to follow the project's conventions. 3. **Determine component type**: | Type | Location | Naming | Export | |------|----------|--------|--------| | UI primitive | Project's UI primitives directory | Follow project naming convention | Add to barrel export if applicable | | Compound component | Project's UI primitives directory | Follow project naming convention | Add to barrel export if applicable | | Feature component | Project's feature directory | Follow project naming convention | Named export | | Page sub-component | Same file as page or shared directory | Follow project naming convention | Not exported | 4. **Design the component API**: ### Props/Interface Design Checklist - Use the project's type system for component interfaces - Required props first, optional props after - Use the project's composition pattern (children prop, slots, etc.) - Support style extension (className,