--- description: Coding Standards & Rules for Remix 2.15.3 globs: **/*.tsx, **/*.jsx alwaysApply: true --- 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. - Validate form data in actions. - Format cookies correctly in headers. - Handle 204 status in loaders without body. - Fetch data server-side with loaders. - Use useFetcher for client-side fetching when needed. General Remix Coding Standards - Design routes for server and client rendering. - Minimize client JS with server logic. - Use resource routes (app/routes/api) for non-HTML. - Make loaders/actions idempotent. - Avoid global state libraries if possible. - Handle API errors in loaders. - Return typed JSON with json helper. - Scope CSS to routes/components with Tailwind/CSS modules. - Test loaders/actions with Vitest. - Document route behavior in comments/README.