Component Generator

Generates production-ready React components from natural language descriptions, including TypeScript types, styling, and tests.

What This Command Does

Component Generation:

• Creates React component with TypeScript
• Generates prop types and interfaces
• Adds basic styling (CSS modules or Tailwind)
• Creates test file (React Testing Library)
• Includes JSDoc comments
• Follows React best practices

Output: Complete component with types, styles, and tests

Time: 2-5 minutes

Usage

# Generate component from description
/component-generator "Create a Card component with image, title, description, and action button"

# Shortcut
/cg "Button component with loading state and icon support"

# Specify framework/style
/cg "Modal dialog with animations" --style tailwind --test vitest

# Generate with directory
/cg "UserProfile component" --output src/components/UserProfile

Example Output

Input:

/cg "Create a Button component with variants (primary, secondary, ghost), sizes (sm, md, lg), loading state, and icon support"

Generated Files:

Button.tsx:

import { ButtonHTMLAttributes, ReactNode } from 'react'
import styles from './Button.module.css'

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  /** Button visual variant */
  variant?: 'primary' | 'secondary' | 'ghost'
  /** Button size */
  size?: 'sm' | 'md' | 'lg'
  /** Show loading spinner */
  loading?: boolean
  /** Icon to display before text */
  icon?: ReactNode
  /** Button content */
  children: ReactNode
}

/**
 * Button component with multiple variants and sizes
…

Button.module.css:

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Variants */
…

Button.test.tsx:

import { render, screen, fireEvent } from '@testing-library/react'
import { Button } from './Button'

describe('Button', () => {
  it('renders button with text', () => {
    render(<Button>Click me</Button>)
    expect(screen.getByRole('button')).toHaveTextContent('Click me')
  })

  it('handles click events', () => {
    const handleClick = jest.fn()
    render(<Button onClick={handleClick}>Click</Button>)

    fireEvent.click(screen.getByRole('button'))
    expect(handleClick).toHaveBeenCalledTimes(1)
  })

  it('shows loading state', () => {
…

Component Templates

Common Components Generated

1. Card Component:

<Card
  image="/product.jpg"
  title="Product Name"
  description="Product description"
  action={<Button>Buy Now</Button>}
/>

2. Modal Component:

<Modal
  isOpen={isOpen}
  onClose={handleClose}
  title="Confirm Action"
>
  <p>Are you sure?</p>
</Modal>

3. Form Field Component:

<FormField
  label="Email"
  type="email"
  error={errors.email}
  required
/>

4. Dropdown Component:

<Dropdown
  items={options}
  value={selected}
  onChange={handleChange}
  placeholder="Select option"
/>

Features

Accessibility Built-In

• Semantic HTML elements
• ARIA attributes where needed
• Keyboard navigation support
• Focus management
• Screen reader announcements

TypeScript Support

• Full type definitions
• Prop validation
• IntelliSense support
• Generic types where appropriate

Testing Included

• Unit tests with React Testing Library
• Accessibility tests
• User interaction tests
• Edge case coverage

Styling Options

• CSS Modules (default)
• Tailwind CSS
• Styled Components
• Emotion
• Plain CSS

Best Practices Applied

Component Structure:

• Single responsibility
• Composable design
• Prop drilling avoided
• Performance optimized (React.memo where beneficial)

Code Quality:

• ESLint compliant
• Prettier formatted
• TypeScript strict mode
• JSDoc comments

Testing:

• 80%+ code coverage
• User-centric tests (not implementation details)
• Accessibility assertions
• Happy path + edge cases

Related Commands

• /css-utility-generator - Generate utility CSS classes
• React Specialist (agent) - React architecture guidance
• UI/UX Expert (agent) - Design review

Generate components in seconds. Ship features faster. ️