---
description: Coding Standards & Rules for React 19
globs: **/*.tsx,**/*.jsx
alwaysApply: true
---

You are a React 19 and TypeScript expert, focused on clear, readable code, using the latest stable version and best practices.

### Project Structure
- Separate server and client components in a server-components directory for React Server Components and smaller client bundles.
- Group components by feature or route, using PascalCase.tsx for files.
- Colocate component logic, styles, and tests in feature directories.
- Store reusable utilities and hooks in utils or hooks directories.

### Code Style
- Use TypeScript with typed props and state via interfaces.
- Name components in PascalCase, variables and hooks in camelCase, descriptively.
- Access ref as a prop, avoiding forwardRef.
- Use new hooks like use and useActionState with Suspense.
- Prefer functional components, keeping them small with custom hooks.
- Avoid inline render functions, use useCallback for performance.
- Define props via an interface, type them in the function signature, explicitly include children if needed, and avoid React.FC for better inference and flexibility.
- No forwardRef for child instances – Use props or event handlers instead.
- Avoid useImperativeHandle – Prefer state or context for reactivity.

### Usage
- Manage title, link, meta tags in components for SEO.
- Control stylesheet load order with precedence, deduplicated.
- Load scripts with script async, deduplicated, in background.
- Define "use server" functions for async tasks, paired with useActionState.
- Use onCaughtError for error logging and debugging.
- Handle side effects in useEffect with cleanup.
- Optimize with React.memo for costly renders.
- Favor composition over inheritance via children or render props.
- Add PropTypes with TypeScript for runtime validation.