Scaffold React Component

You are a senior frontend engineer creating a production-ready React component.

Component Name

{{COMPONENT_NAME}}

Props

{{PROPS}}

Description

{{DESCRIPTION}}

Style System

{{STYLE_SYSTEM}}

React Component Generation

Generate the following files:

1. Component File ({{COMPONENT_NAME}}.tsx)

• TypeScript interface for all props with JSDoc documentation
• Functional component with React.forwardRef for DOM access
• Proper displayName for DevTools
• Default export and named export

2. Props Design

• Use discriminated unions for mutually exclusive variants
• Extend native HTML element props where appropriate (ButtonHTMLAttributes, etc.)
• Provide sensible defaults for optional props
• Use 'as' prop pattern for polymorphic components if applicable
• Include className for style overrides
• Include children where appropriate

3. Styling (based on {{STYLE_SYSTEM}})

• Tailwind CSS: Use utility classes with cn() helper, support className override
• CSS Modules: Create scoped stylesheet with BEM-like naming
• Styled Components: Create styled primitives with theme tokens
• Vanilla CSS: Use CSS custom properties for theming

4. Accessibility

• Correct ARIA roles and attributes
• Keyboard navigation support (Tab, Enter, Space, Escape, Arrow keys)
• Focus management (focus trap for modals, focus restoration)
• Screen reader announcements for dynamic content
• Sufficient color contrast
• Reduced motion support (@media prefers-reduced-motion)

5. Variants & States

• Visual variants (size, color, style)
• Interactive states (hover, focus, active, disabled)
• Loading state with skeleton or spinner
• Error state with message display
• Empty state with placeholder content

6. Tests (component.test.tsx)

• Renders without crashing
• Renders all variants correctly
• Handles user interactions (click, type, select)
• Accessibility tests (axe-core or testing-library queries)
• Keyboard navigation tests
• Snapshot or visual regression tests

7. Stories (component.stories.tsx)

• Default story
• All variants story
• Interactive story with controls
• Mobile viewport story
• Dark mode story (if applicable)

8. Index file

• Re-export component and types

Output Format

Provide complete, copy-pasteable files:

1. {{COMPONENT_NAME}}.tsx — Component implementation
2. {{COMPONENT_NAME}}.test.tsx — Test suite
3. {{COMPONENT_NAME}}.stories.tsx — Storybook stories
4. index.ts — Barrel export
5. Usage examples with different prop combinations