Frontend Component Generator

Generate production-ready React/Vue components with TypeScript, tests, and styles following modern best practices.

When to Invoke

Auto-invoke when user mentions:

• "Create a component"
• "Add a component"
• "New component"
• "Build a component"
• "Generate component for [feature]"

What This Does

1. Generates component file with TypeScript and props interface
2. Creates test file with React Testing Library
3. Generates CSS module for styling
4. Creates barrel export (index.ts)
5. Validates naming conventions
6. Follows project patterns

Execution Steps

Step 1: Gather Component Requirements

Ask user for component details:

Component name: [PascalCase name, e.g., UserProfile]
Component type:
  - simple (basic functional component)
  - with-hooks (useState, useEffect, etc.)
  - container (data fetching component)

Styling approach:
  - css-modules (default)
  - styled-components
  - tailwind

Props needed: [Optional: describe expected props]

Validate component name:

• Use predefined function: functions/name_validator.py
• Ensure PascalCase format
• No reserved words
• Descriptive and specific

Step 1.5: Confirm Component Design (ToM Checkpoint) [EXECUTE]

IMPORTANT: This step MUST be executed for complex components.

Before generating files, confirm interpretation with user.

Display verification:

I understood you want:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Component: {NAME}
Type: {TYPE} (inferred because: {REASON})
Location: src/components/{NAME}/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Detected patterns from your codebase:
- Styling: {CSS_APPROACH} (found {EVIDENCE})
- Testing: {TEST_LIBRARY} (found in package.json)
- Similar component: {EXISTING_COMPONENT} at {PATH}

Props I'll generate:
{PROPS_PREVIEW}

Proceed with generation? [Y/n]

Skip verification if (HIGH-STAKES ONLY mode):

• Simple presentational component (no hooks, no data fetching)
• User explicitly said "quick", "just do it", or "skip confirmation"
• Component name and type are unambiguous
• No complex props structure

Always verify if:

• Container component with data fetching
• Complex props interface (5+ props)
• Hooks component with side effects
• Component name similar to existing component
• User is new to codebase (no profile history)

Step 2: Generate Props Interface

Based on component type and requirements:

Use predefined function: functions/props_interface_generator.py

# Generates TypeScript interface based on component requirements
python3 functions/props_interface_generator.py \
  --name "UserProfile" \
  --props "userId:string,onUpdate:function,isActive:boolean"

Output:

interface UserProfileProps {
  userId: string;
  onUpdate?: () => void;
  isActive?: boolean;
  children?: React.ReactNode;
  className?: string;
}

Step 3: Generate Component File

Use appropriate template based on type:

Simple component:

Use template: templates/component-simple-template.tsx

Component with hooks:

Use template: templates/component-with-hooks-template.tsx

Container component:

Use template: templates/component-container-template.tsx

Use predefined function: functions/component_generator.py

python3 functions/component_generator.py \
  --name "UserProfile" \
  --type "simple" \
  --props-interface "UserProfileProps" \
  --template "templates/component-simple-template.tsx" \
  --output "src/components/UserProfile/UserProfile.tsx"

Template substitutions:

• ${COMPONENT_NAME} → Component name (PascalCase)
• ${PROPS_INTERFACE} → Generated props interface
• ${STYLE_IMPORT} → CSS module import
• ${DESCRIPTION} → Brief component description

Step 4: Generate Test File

Use predefined function: functions/test_generator.py

python3 functions/test_generator.py \
  --component-name "UserProfile" \
  --component-path "src/components/UserProfile/UserProfile.tsx" \
  --template "templates/test-template.test.tsx" \
  --output "src/components/UserProfile/UserProfile.test.tsx"

Test template includes:

• Basic rendering test
• Props validation test
• Event handler tests (if applicable)
• Accessibility tests

Template substitutions:

• ${COMPONENT_NAME} → Component name
• ${IMPORT_PATH} → Relative import path
• ${TEST_CASES} → Generated test cases based on props

Step 5: Generate Style File

Use predefined function: functions/style_generator.py

python3 functions/style_generator.py \
  --name "UserProfile" \
  --approach "css-modules" \
  --template "templates/style-template.module.css" \
  --output "src/components/UserProfile/UserProfile.module.css"

CSS Modules template:

.container {
  /* Component wrapper styles */
}

.title {
  /* Title styles */
}

/* Add more classes as needed */

Styled Components alternative:

// Generated if --approach "s

...