Generate Component

• Single file (Button.tsx) vs directory (Button/index.tsx, Button/Button.tsx)
• Co-located styles, tests, stories, types

Component pattern:

• Function components vs class components
• Arrow functions vs function declarations
• Default export vs named export
• Props: interface vs type, inline vs separate file
• forwardRef usage, displayName

Styling approach:

• CSS Modules (.module.css/.module.scss)
• Tailwind CSS (utility classes)
• Styled-components / Emotion
• CSS-in-JS (vanilla-extract, etc.)
• Plain CSS/SCSS with BEM or other convention

State and hooks:

• Custom hooks pattern
• State management integration (Redux, Zustand, Context, etc.)

Export pattern:

• Barrel exports via index.ts
• Re-exports from parent directories

Step 3: Parse component request

From $ARGUMENTS:

• $0 = Component name (e.g., UserProfile, DataTable)
• $1 = Optional variant hint:
  • form — form with inputs, validation, submit handler
  • list — renders a collection with optional filtering/sorting
  • detail — displays detailed info for a single entity
  • modal — dialog/overlay with open/close state

If no variant specified, infer from the component name.

Step 4: Generate the component

Create all files matching the detected patterns:

Component file:

• Props interface/type with JSDoc comments for non-obvious props
• Component implementation following detected patterns exactly
• Sensible default props where appropriate
• Proper TypeScript types (no any)

Styles file (if project uses separate style files):

• Match the project's styling approach exactly
• Include responsive considerations if the project does
• Follow existing class naming conventions

Test file:

• Match test file naming and location conventions
• Test rendering without crashing
• Test prop handling (required props, optional props, defaults)
• Test user interactions (clicks, inputs, form submissions)
• Test conditional rendering states (loading, error, empty)

Story file (only if Storybook is detected):

• Match existing story format (CSF3 vs CSF2)
• Include default story and key variants
• Add args/controls for interactive props

Step 5: Register the component

• If the project uses barrel exports (index.ts), add the export
• If there's a component library or registry, add the registration
• If there's a route that should use this component, note it (don't modify routes without asking)

Step 6: Verify

• Check for TypeScript errors: are all types resolved?
• Verify imports exist (don't import from non-existent files)
• Ensure the component name doesn't conflict with existing components

Guidelines

• Match the project EXACTLY — don't introduce new patterns
• If the project uses Tailwind, use Tailwind — don't add CSS modules
• If the project uses function declarations, don't use arrow functions
• If the project doesn't use Storybook, don't create stories
• Keep components focused — one responsibility per component
• Use semantic HTML elements
• Include accessibility attributes (aria-labels, roles) if the project does