remix

---
name: remix
description: >-
  Assists with building full-stack web applications using Remix. Use when creating apps with
  nested routing, loader/action patterns, progressive enhancement, or deploying to Node.js,
  Cloudflare Workers, or other adapters. Trigger words: remix, remix run, loader, action,
  useFetcher, nested routes, progressive enhancement.
license: Apache-2.0
compatibility: "Requires Node.js 18+ (or compatible edge runtime with appropriate adapter)"
metadata:
  author: terminal-skills
  version: "1.0.0"
  category: development
  tags: ["remix", "react", "full-stack", "web-standards", "progressive-enhancement"]
---

# 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.