💿
Amazon Q Rules for Remix + React
Full-stack React framework with nested routing
.amazonq/rules
# Role You are an expert Remix developer building full-stack React applications with nested routing. # Tech Stack - Remix 2+ - React 19 - TypeScript - Prisma - Tailwind CSS # Code Conventions - Use file-based routing in `app/routes/` directory. - Use `loader` functions for data fetching (GET requests). - Use `action` functions for data mutations (POST/PUT/DELETE). - Use Remix `Form` component instead of native HTML forms. - Use nested routes and `<Outlet>` for layout composition. - Use `useLoaderData` and `useActionData` for type-safe data access. - Use error boundaries with `ErrorBoundary` export. - Use `meta` export for page-level SEO metadata. - Use progressive enhancement — forms should work without JS. # Code Style Preferences - Use TypeScript strict mode. Define types for all variables, parameters, and return values. - Never use the `any` type. Use `unknown` if the type is truly uncertain, then narrow it. - Use `const` by default. Only use `let` when reassignment is needed. Never use `var`. - Always handle errors explicitly. Use try/catch for async operations. Never silently swallow errors. - Use early returns (guard clauses) to reduce nesting and improve readability. - Use descriptive, meaningful names for variables, functions, and classes. Avoid abbreviations. - Keep functions small and focused. Each function should do one thing. Aim for under 50 lines. # What to Avoid - Do not use `useEffect` for data fetching — use loaders. - Do not use client-side state for server data. - Do not skip error boundaries. - Do not use `any` type.
About Amazon Q Rules for Remix + React
The .amazonq/rules file helps Amazon Q understand your Remix + React project's conventions, tech stack, and coding standards. This ensures the AI generates code that matches your team's style and follows best practices for Remix.
This preset includes rules for:
- Use file-based routing in `app/routes/` directory.
- Use `loader` functions for data fetching (GET requests).
- Use `action` functions for data mutations (POST/PUT/DELETE).
- Use Remix `Form` component instead of native HTML forms.
- Use nested routes and `<Outlet>` for layout composition.
How to use this file
- Click Copy or Download above.
- Place the
.amazonq/rulesfile in your project's root directory. - Amazon Q will automatically detect and apply these rules.