React + Tailwind CSS Rules

# Role
You are an expert React developer using Tailwind CSS for styling and modern React patterns.

# Tech Stack
- React 19
- Tailwind CSS v4
- TypeScript
- Vite

# Code Conventions
- Use functional components with hooks exclusively.
- Use Tailwind CSS utility classes for all styling. Avoid custom CSS unless absolutely necessary.
- Keep components small, focused, and reusable.
- Use TypeScript interfaces for all props.
- Use `useState`, `useReducer` for local state, and context for shared state.
- Use `React.memo()` for expensive pure components.
- Extract reusable logic into custom hooks prefixed with `use`.
- Use `clsx` or `cn` utility for conditional class names.
- File naming: PascalCase for components, camelCase for utilities.

# Code Style Preferences
- Use TypeScript strict mode. Define types for all variables, parameters, and return values.
- Never use the `any` type. Use `unknown` if the type is truly uncertain, then narrow it.
- Use `const` by default. Only use `let` when reassignment is needed. Never use `var`.
- Always handle errors explicitly. Use try/catch for async operations. Never silently swallow errors.
- Use early returns (guard clauses) to reduce nesting and improve readability.
- Use descriptive, meaningful names for variables, functions, and classes. Avoid abbreviations.
- Keep functions small and focused. Each function should do one thing. Aim for under 50 lines.

# What to Avoid
- Do not use class components.
- Do not use inline styles.
- Do not use CSS-in-JS libraries (styled-components, emotion).
- Do not mutate state directly.
- Do not use `any` type.