Implement Component Scaffold

src/features/
└── feature-name/
    ├── FeatureNamePage.tsx         # Page component
    ├── feature-name.module.css     # Styles
    ├── components/                 # Feature-specific components
    └── index.ts                    # Barrel export

Phase 3: Component Template

// component-name.tsx
import styles from './component-name.module.css';

interface ComponentNameProps {
  /** Description of prop */
  propName?: string;
}

export function ComponentName({ propName }: ComponentNameProps) {
  return (
    <div className={styles.wrapper}>
      {/* Component content */}
    </div>
  );
}

Phase 4: CSS Module Template

/* component-name.module.css */
.wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

Phase 5: Barrel Export

// index.ts
export { ComponentName } from './component-name';
export type { ComponentNameProps } from './component-name';

Constraints

• Use kebab-case for file names
• Use PascalCase for component names and exports
• All styling via CSS Modules — no inline styles
• Zero hex values — use design tokens only
• Props interface must be exported for documentation
• Include JSDoc comments for public props

Output

• Component directory with all required files
• Barrel export configured
• Ready for implementation