React + TypeScript Cursor Rules

# React + TypeScript Rules

## Component Patterns
- Use functional components with TypeScript interfaces for props
- Prefer named exports over default exports
- Use React.FC only when needed for children typing
- Extract custom hooks for reusable logic

## State Management
- Use React Query (TanStack Query) for server state
- Use Zustand for complex client state
- Prefer useState for simple local state
- Avoid prop drilling — use context sparingly

## TypeScript
- No `any` types — use `unknown` if unsure
- Use discriminated unions for complex state
- Prefer interfaces over types for object shapes
- Use `as const` for literal types

## Styling
- Use Tailwind CSS utility classes
- Extract repeated patterns into components, not CSS
- Use CSS variables for theming

## Performance
- Wrap expensive computations in useMemo
- Wrap callback props in useCallback
- Use React.lazy for code splitting
- Add key props correctly in lists