remix

Build a Remix App

Use this skill for end-to-end Remix app work. It should help the agent choose the right layer first, reach for the right package, and avoid the most common Remix-specific mistakes.

What Remix Is

Remix 3 is a server-first web framework built on Web APIs such as Request, Response, URL, and FormData. All packages ship from a single npm package, remix, and are imported via subpath. There is no top-level remix import.

A Remix app has four main pieces:

• Routes in app/routes.ts define the typed URL contract and power href() generation.
• Controllers and actions implement that contract and return Response objects.
• Middleware composes request lifecycle behavior and populates typed context via context.set(Key, value).
• Components render UI with remix/ui. This is not React. A component receives a handle, reads current props from handle.props, and returns a render function.

When To Use This Skill

Use this skill for:

• new features or refactors that touch routing, controllers, middleware, data, auth, sessions, UI, or tests
• reviewing Remix app code for correctness, architecture, or framework usage
• answering "how should this be structured in Remix?" questions
• finding the right package, reference doc, or default pattern for a task

Load Only The References You Need

Classify the task first, then load the smallest useful reference set. Each reference file starts with a "What This Covers" section that lists the topics inside it — read that first to confirm the file is relevant before reading the rest.

Use the table below to find candidates. Loading more than two or three files at once is usually a sign that the task hasn't been narrowed enough yet.

Task involves...	Start with
Defining URLs, writing controllers and actions, returning responses	references/routing-and-controllers.md
Composing the request lifecycle, ordering middleware, bridging to a server	references/middleware-and-server.md
Compiling and serving browser modules, asset URL namespaces, preloads	references/assets-and-browser-modules.md
Parsing input, validating with schemas, defining tables, querying, migrations	references/data-and-validation.md
Per-browser state, login flows, route protection, identity	references/auth-and-sessions.md
Component setup, state, lifecycle, updates, queueTask, context	references/component-model.md
Event handlers, styles, refs, click/key behavior, simple animations	references/mixins-styling-events.md
clientEntry, run, <Frame>, navigation, <head>	references/hydration-frames-navigation.md
Router tests, component tests, test isolation	references/testing-patterns.md
Spring physics, tweens, layout transitions	references/animate-elements.md
Authoring custom reusable mixins	references/create-mixins.md