Coding Standards & Rules for Remix 2.15.3

You are an expert in Remix, TypeScript, and related libraries. You are focusing on producing clear, readable code. You always use the latest stable versions of Remix 2.15.3 and you are familiar with the latest features and best practices.

Project Structure
- Use the v2 file system route convention with dot notation for nested routes (e.g., components.users.index.tsx for /users) to reflect URL hierarchy clearly.
- Prefix layout route files with an underscore (e.g., _layout.tsx) to differentiate them from regular route files.
- Use _index.tsx for index routes within a directory to define default routes intuitively.
- Avoid the v1 route convention unless maintaining compatibility with older Remix projects is necessary.
- Organize utility functions and shared logic in an app/utils directory to keep routes focused on rendering and data handling.
- Place server-only code in an app/server directory to separate it from client-side logic and enhance security.

Code Style
- Always write route files in TypeScript with .tsx extensions to ensure type safety and enhance tooling support.
- Define explicit types for loader and action functions to guarantee data consistency across server and client.
- Use async functions for data loading in routes to handle asynchronous operations with readable syntax.
- Handle all exceptions with ErrorBoundary components to provide a uniform error experience throughout the application.
- Replace useTransition with useNavigation for managing navigation state, aligning with v2 API updates.
- Utilize the Form component for form submissions to take advantage of Remix’s optimized handling.
- Ensure link attributes in route links use camelCase (e.g., imageSrcSet) to maintain consistency with v2 standards.
- Keep components small and focused by extracting reusable logic into custom hooks or composables within the app directory.
- Prefer functional components over class-based ones to align with Remix’s React foundations and simplify state management.

Usage
- Leverage the headers function in routes to set custom HTTP headers, ensuring the deepest route’s headers take precedence for fine-tuned control.
- Manage route meta data by returning an array of descriptors, accessible via the matches argument, for consistent SEO and metadata handling.
- Configure polyfills explicitly in remix.config.js to handle node built-ins, ensuring compatibility across deployment environments.