UI Component Generator

---
name: ui-component-gen
description: |
  Trigger when the user asks to create a UI component, widget, or interface
  element. Phrases: "create a component", "build a button", "make a card",
  "generate a form", "component for".
allowed-tools:
  - Bash(command *)
  - Read
  - Write
  - Edit
  - Glob
---

# UI Component Generator

Generate production-ready UI components from descriptions. Supports React,
Vue, and Svelte with Tailwind CSS or CSS Modules.

## Prerequisites

- Frontend framework installed (React, Vue, or Svelte)
- Styling solution available (Tailwind, CSS Modules, or styled-components)

## Steps

1. **Understand requirements:**
   - What does the component do?
   - What props/inputs does it accept?
   - What states does it have? (loading, error, empty, populated)
   - Does it need to be responsive?
   - Are there accessibility requirements?

2. **Check existing patterns:**
   - Scan the project for similar components
   - Match existing naming conventions
   - Use the same styling approach as the rest of the project

3. **Generate the component:**
   - TypeScript types for all props
   - Default prop values where sensible
   - All visual states (loading, error, empty, default, hover, focus)
   - Responsive breakpoints if needed
   - ARIA attributes for accessibility

4. **Component structure:**
   ```
   ComponentName/
     ComponentName.tsx       # Main component
     ComponentName.test.tsx  # Tests
     ComponentName.stories.tsx  # Storybook (if used)
     index.ts               # Re-export
   ```

5. **Accessibility checklist:**
   - Semantic HTML elements
   - ARIA labels on interactive elements
   - Keyboard navigation support
   - Focus management
   - Color contrast (4.5:1 minimum)
   - Screen reader testing

6. **Write tests:**
   - Renders without crashing
   - Displays correct content for each state
   - Handles user interactions (click, type, submit)
   - Respects disabled/loading states