Remix + React Rules
Full-stack React framework with nested routing
# 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 Remix + React AI Rules
AI coding rules files help your AI assistant (Cursor, Windsurf, Claude Code, GitHub Copilot, or Cline) understand your 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 is designed for Remix + React projects and 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.
Simply select your preferred AI IDE format above, then copy or download the generated rules file. Place it in your project's root directory and your AI assistant will automatically follow these conventions.
Get This Preset for a Specific IDE
Cursor
Remix + React rules for Cursor
Windsurf
Remix + React rules for Windsurf
Claude Code
Remix + React rules for Claude Code
GitHub Copilot
Remix + React rules for GitHub Copilot
Cline
Remix + React rules for Cline
Zed AI
Remix + React rules for Zed AI
Aider
Remix + React rules for Aider
Continue.dev
Remix + React rules for Continue.dev
Devin AI
Remix + React rules for Devin AI
Amazon Q
Remix + React rules for Amazon Q
Bolt.new
Remix + React rules for Bolt.new
Lovable
Remix + React rules for Lovable
Replit AI
Remix + React rules for Replit AI
Augment Code
Remix + React rules for Augment Code
JetBrains AI
Remix + React rules for JetBrains AI