# 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 and patterns
globs: "*.tsx"
alwaysApply: false
---

# React Component Rules

- Use functional components with explicit return types
- Define props interface directly above the component
- Export components as named exports, never default
- Use Tailwind CSS utility classes exclusively