← Back to Presets
💿

Remix + React Rules

Full-stack React framework with nested routing

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

Other Presets You Might Like