Remix

Overview

Remix is a full-stack React framework built on web standards that uses nested routing, loader/action data patterns, and progressive enhancement to build fast, resilient applications. Forms work without JavaScript, nested routes load data in parallel, and error boundaries isolate failures to individual route segments.

Instructions

• When building routes, use file-based nested routing where each route module contains both the UI and data layer, with <Outlet /> for child routes and pathless layouts for shared UI without URL segments.
• When loading data, use loader functions that run server-side and return data with json(), defer(), or redirect(). Nested route loaders run in parallel to avoid client-server waterfalls.
• When handling mutations, use action functions triggered by <Form method="post">, return validation errors with appropriate HTTP status codes, and rely on automatic revalidation of all page loaders after actions.
• When enhancing UX, use useFetcher() for non-navigation mutations (like buttons, inline edits), useNavigation() for form submission state, and fetcher.formData for optimistic UI.
• When handling errors, add ErrorBoundary at every route level to prevent child errors from crashing the whole page, and use isRouteErrorResponse() to distinguish 404s from server errors.
• When managing auth, use createCookieSessionStorage() for encrypted sessions, redirect in loaders when unauthenticated, and leverage built-in CSRF protection.
• When deploying, choose the appropriate adapter (@remix-run/node, @remix-run/cloudflare, @remix-run/deno) and use Vite as the compiler.

Examples

Example 1: Build a CRUD app with progressive enhancement

User request: "Create a Remix app with task management and form-based mutations"

Actions:

1. Define nested routes for task list and task detail pages
2. Implement loaders for data fetching with parallel loading
3. Create actions for create, update, delete with validation error handling
4. Use <Form> for progressive enhancement and useFetcher() for inline edits

Output: A full-stack task app that works without JavaScript and is enhanced with JavaScript.

Example 2: Deploy a Remix app to Cloudflare Workers

User request: "Set up a Remix app for edge deployment on Cloudflare"

Actions:

1. Configure @remix-run/cloudflare adapter in the project
2. Set up loaders using KV and D1 bindings from the context
3. Add streaming with defer() for slow data below the fold
4. Configure HTTP caching headers in loaders for CDN performance

Output: An edge-deployed Remix app with serverless data access and CDN caching.

Guidelines

• Use loader for all data fetching; never use useEffect + fetch for initial page data.
• Use <Form> instead of <form> + onSubmit for progressive enhancement.
• Return proper HTTP status codes from loaders and actions (404, 400, 403), not just json({ error }).
• Use useFetcher() for mutations that should not trigger navigation (like/unlike, inline edits, search).
• Handle errors at every route level with ErrorBoundary; do not let child errors crash the whole page.
• Use defer() for slow data below the fold to show the page fast and stream non-critical data.
• Keep loaders and actions in the route file; co-location makes it easy to see what a route does.