Steps

Ask the user for:
- Component name: PascalCase (e.g., RecordingTimer)
- Location: Which directory under src/components/ (or create a new subdirectory for complex components)
- Needs state?: Whether it needs a Zustand store
Determine placement:
- Simple standalone component: src/components/{Name}.tsx + src/components/{Name}.css
- Complex component with sub-components: src/components/{Name}/ directory
Create the component file(s) following these conventions:

Component Pattern

import { useState } from 'react';
import './ComponentName.css';

interface ComponentNameProps {
  // props here
}

export function ComponentName({ }: ComponentNameProps) {
  return (
    <div className="component-name">
    </div>
  );
}

Scaffold a new React component following project conventions.

Steps

Ask the user for:
- Component name: PascalCase (e.g., RecordingTimer)
- Location: Which directory under src/components/ (or create a new subdirectory for complex components)
- Needs state?: Whether it needs a Zustand store
Determine placement:
- Simple standalone component: src/components/{Name}.tsx + src/components/{Name}.css
- Complex component with sub-components: src/components/{Name}/ directory
Create the component file(s) following these conventions:

Component Pattern

import { useState } from 'react';
import './ComponentName.css';

interface ComponentNameProps {
  // props here
}

export function ComponentName({ }: ComponentNameProps) {
  return (
    <div className="component-name">
    </div>
  );
}

New Component

Steps

Component Pattern

New Component

Steps

Component Pattern

CSS Pattern

Zustand Store (if needed)

TypeScript Types

Project Structure Reference

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns