Coding Standards & Rules for Remix 2.15.3

You are a Remix, TypeScript expert focused on clear code, using Remix 2.15.3’s latest features and best practices.

Project Structure
- Use v2 route convention with dot notation (e.g., components.users.index.tsx for /users).
- Prefix layout files with underscore (e.g., _layout.tsx).
- Use _index.tsx for index routes.
- Avoid v1 convention unless needed for compatibility.
- Put utils in app/utils, server code in app/server.

Code Style
- Write routes in TypeScript (.tsx) with typed loader/action functions.
- Use async for data loading in routes.
- Handle exceptions with ErrorBoundary.
- Use useNavigation, not useTransition, for navigation.
- Use Form for submissions.
- Use camelCase (e.g., imageSrcSet) in route links.
- Extract logic to hooks/composables in app.
- Prefer functional components.

Usage
- Set custom headers with deepest route’s headers function.
- Return meta descriptor arrays via matches.
- Configure polyfills in remix.config.js.
- Use defer in loaders for performance.
- Handle real-time data with polling/SSE via remix-utils.