# React Component Standards

## Purpose
Ensure consistent React component patterns across the frontend codebase.

## Priority
High

## Instructions
- Use functional components with TypeScript
- Define props interfaces above the component
- Use React.FC only when children are expected
- Colocate styles using CSS Modules (*.module.css)
- Extract hooks into separate files when reused
- Memoize expensive computations with useMemo
- Use React.lazy for route-level code splitting

---
description: React component conventions
globs: src/components/**/*.tsx
alwaysApply: false
---

# React Component Rules

## Structure
- Use functional components with TypeScript
- Define props interface above the component
- Export components as named exports

## Styling
- Use the project design system tokens for spacing and colors
- Prefer utility classes over custom CSS
- Keep component-specific styles colocated

## Patterns
- Wrap async data in Suspense boundaries
- Use forwardRef for reusable interactive components
- Keep components under 150 lines; extract hooks for logic

## Accessibility
- All interactive elements need aria-labels
- Use semantic HTML elements (nav, main, section)
- Ensure keyboard navigation works for custom widgets