Remix Project Rules

remixreactfullstack

Enforces Remix conventions including loaders, actions, nested routes, form handling, and error boundaries for web-standard full-stack React applications.

Целевые файлы

Файл	Формат
.cursorrules	plaintext
CLAUDE.md	markdown

Содержимое

## Remix Project Rules ### Route File Structure - Every route file exports a default component and optionally `loader`, `action`, `meta`, `links`, `ErrorBoundary` - Use flat file routing: `app/routes/users.$id.tsx` maps to `/users/:id` - Use `_layout.tsx` prefix for layout routes that wrap child routes - Index routes use `_index.tsx` suffix - Keep route files thin — extract logic to modules in `app/lib/` or `app/services/` ### Loaders - Every `loader` function must return a `Response` or plain data (auto-wrapped by Remix) - Use `json()` helper from `@remix-run/node` for typed JSON responses - Use `redirect()` for authentication guards — never render the component for unauthorized users - Always handle errors in loaders by throwing `Response` objects with appropriate status codes - Use `useLoaderData<typeof loader>()` for full type inference in components — never `any` - Do not perform mutations in loaders — loaders are for data fetching only ### Actions - Actions handle all form submissions and mutations — never mutate in loaders - Parse form data with `request.formData()` and validate before processing - Use Zod to validate action inputs; return `json({ errors })` on validation failure - After successful mutation, `redirect()` to the appropriate route (Post/Redirect/Get pattern) - Return `json({ error: message })` for user-facing errors, throw for unexpected server errors - Use `useActionData<typeof action>()` to access action results in the component ### Forms & Mutations - Use `<Form>` component from Remix for all mutations — not raw `<form>` or fetch calls - Use `useFetcher()` for mutations that should not navigate (e.g., "like" buttons, inline edits) - Use `useNavigation()` to show pending states during form submission - `fetcher.state` drives optimistic UI — update UI immediately, revert on error - Never use `useState` to manage form submission state — rely on Remix's navigation state ### Nested Routes & Outlets - Use `<Outlet />` in layout routes to render child routes - Each nested route fetches its own data — avoid prop-drilling from parent loaders - Use `useMatches()` for breadcrumbs and layout-aware data aggregation - Nested routes share URL segments; design routes to match data ownership ### Error Boundaries - Every route must have an `ErrorBoundary` export for production resilience - Use `useRouteError()` inside `ErrorBoundary` to access the thrown error or response - Distinguish between `Response` errors (expected, e.g., 404) and JavaScript errors (unexpected) - Root `ErrorBoundary` must render a full HTML document — it replaces the entire page ### Meta & Links - Export `meta` function from every page route for SEO (title, description, og:image) - Use `links` export to add route-specific CSS or preload hints - Use `V2_MetaFunction` type for proper TypeScript inference in Remix v2+ ### Performance - Use `defer()` in loaders for non-critical data; render with `<Await>` and `<Suspense>` - Avoid `clientLoader` unless the data is truly client-only - Use `shouldRevalidate` to prevent unnecessary reloads on irrelevant navigation ### Anti-patterns - Do not use `useEffect` + `fetch` for data loading — use loaders - Do not manage navigation with `window.location.href` — use `redirect()` or `<Link>` - Do not store server-only data in component state across navigations - Do not skip error boundaries — unhandled errors crash the whole page in production

CLI

npx mindaxis apply remix-rules --target cursor --scope project

Используется в паках

Remix App

Modern Remix full-stack web apps

Открыть пак →

← Правила