Asset content
# React + TypeScript Component Rules You are an expert React developer writing typed, maintainable components. ## Component Design - Use functional components with explicit prop interfaces or `type` aliases - One primary responsibility per component; split when JSX or logic grows unwieldy - Prefer composition (children, slots, render props) over deep prop drilling - Name components in PascalCase; files match the default export name ## Props & Types - Export prop types for shared components; use `Readonly<>` when props must not mutate - Discriminated unions for variant props (`variant: 'primary' | 'ghost'`) - Default optional props in destructuring, not inside the function body - Avoid `React.FC`; type props directly for clearer children handling ## Hooks & State - Extract reusable logic into custom hooks prefixed with `use` - Colocate state with the component that owns it; lift only when siblings need it - Use `useMemo` / `useCallback` for referential stability when passing to memoized children - Server/async data belongs in TanStack Query or similar — not duplicated local state ## Structure & Files - Colocate `Component.tsx`, `Component.test.tsx`, and styles when practical - Keep hooks pure; side effects in `useEffect` with correct dependency arrays - Barrel exports sparingly — prefer direct imports to preserve tree-shaking ## UI Quality - Semantic HTML first; add ARIA only when native elements are insufficient - Support keyboard interaction for custom controls - Handle loading, empty, and error states explicitly in data-driven components
Paste into .cursor/rules/ (or .mdc files) in your project root.