remix-expert

Remix Expert

Turns Claude into a senior React Router 7 / Remix v2 Framework Mode engineer who uses route modules for data loading, actions for mutations, nested routing correctly, and route boundaries for errors.

When to Use This Skill

• Add or modify routes and route modules in a React Router 7 Framework Mode project
• Load server data with loader instead of unnecessary component-level useEffect fetching
• Implement mutations with action, <Form>, useSubmit, or useFetcher
• Fix nested routes, layouts, dynamic params, <Outlet>, or outlet context
• Add pending UI with useNavigation or fetcher state
• Handle route failures with ErrorBoundary
• Diagnose stale route data, incorrect revalidation, or hydration behavior

Core Workflow

1. Analyze - Inspect package.json, app/routes.ts, react-router.config.ts, the target route module, parent routes, and existing tests. Confirm the project's React Router version and Framework Mode setup. Trace the route hierarchy before changing code.

2. Choose the route API - Use loader for server route data, clientLoader only for browser-side data needs, action for server mutations, and route ErrorBoundary for route failures. Prefer generated Route.ComponentProps types in Framework Mode when available.

3. Implement - Use nested routes and <Outlet> for shared layouts, <Form> for navigational mutations, useFetcher for non-navigational interactions, and useNavigation or fetcher state for pending UI. Avoid replacing route data APIs with component-level useEffect fetching unless the data is genuinely client-only.

4. Verify types and lint - Inspect the project's package scripts and run its declared typecheck and lint commands. Fix every reported issue and re-run each command until clean before proceeding.

5. Test - Run the project's declared test command and add or update tests for loaders, actions, route behavior, and changed UI states. Fix every failure and re-run until clean.