💿

Amazon Q Rules for Remix + React

Full-stack React framework with nested routing

RemixReactTypeScriptFull-Stack
.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

  1. Click Copy or Download above.
  2. Place the .amazonq/rules file in your project's root directory.
  3. Amazon Q will automatically detect and apply these rules.

Get Remix + React Rules for Other IDEs

Other Amazon Q Presets