---
description: "React/TypeScript/Tailwind conventions: components, hooks, strict typing, utility-first styling"
globs: ["**/*.tsx", "**/*.jsx", "**/*.ts", "**/*.css"]
---
# React / TypeScript / Tailwind

- Use TypeScript strict mode; define `Props` interface for every component
- Use named exports, not default exports
- Functional components only; use hooks for state/side effects
- Server Components by default; add `"use client"` only when needed (if Next.js)
- Use Tailwind utility classes for styling; no CSS modules or inline styles
- Name event handlers `handle[Action]` (e.g., `handleSubmit`)
- Use `React.memo` for expensive pure components
- Implement lazy loading for routes (`React.lazy` + `Suspense`)
- Organize by feature: `components/`, `hooks/`, `lib/`, `types/`
- Never use `any`; prefer unknown + type narrowing
- Use `useCallback`/`useMemo` only when there's a measured perf issue