OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add remix-run/agent-skills --skill react-router-framework-mode
Build full-stack React applications using React Router's framework mode. Use when configuring routes, working with loaders and actions, handling forms, handling navigation, pending/optimistic UI, error boundaries, or working with react-router.config.ts or other react router conventions.
npx skills add remix-run/agent-skills --skill react-router-framework-mode
Framework mode is React Router's full-stack development experience with file-based routing, server-side, client-side, and static rendering strategies, data loading and mutations, and type-safe route module API.
app/routes.ts)loader or clientLoaderaction or clientAction<Link>, <NavLink>, <Form>, redirect, and useNavigatereact-router.config.ts)Load the relevant reference for detailed guidance on the specific API/concept:
| Reference | Use When |
|---|---|
references/routing.md | Configuring routes, nested routes, dynamic segments |
references/route-modules.md | Understanding all route module exports |
references/special-files.md | Customizing root.tsx, adding global nav/footer, fonts |
references/data-loading.md | Loading data with loaders, streaming, caching |
references/actions.md | Handling forms, mutations, validation |
references/navigation.md | Links, programmatic navigation, redirects |
references/pending-ui.md | Loading states, optimistic UI |
references/error-handling.md | Error boundaries, error reporting |
references/rendering-strategies.md | SSR vs SPA vs pre-rendering configuration |
references/middleware.md | Adding middleware (requires v7.9.0+) |
references/sessions.md | Cookie sessions, authentication, protected routes |
references/type-safety.md | Auto-generated route types, type imports, type safety |
Some features require specific React Router versions. Always verify before implementing:
| Feature | Minimum Version | Notes |
|---|---|---|
| Middleware | 7.9.0+ | Requires v8_middleware flag |
| Core framework features | 7.0.0+ | loaders, actions, Form, etc. |
These are the most important patterns to follow. Load the relevant reference for full details.
Search forms - use <Form method="get">, NOT onSubmit with setSearchParams:
Inline mutations - use useFetcher, NOT <Form> (which causes page navigation):
See references/actions.md for complete patterns.
Global UI belongs in root.tsx - don't create separate layout files for nav/footer:
Use nested routes for section-specific layouts. See references/routing.md.
meta uses loaderData, not deprecated data:
See references/route-modules.md for all exports.
If anything related to React Router is not covered in these references, you can search the official documentation:
const fetcher = useFetcher();
const optimistic = fetcher.formData?.get("favorite") === "true" ?? isFavorite;
<fetcher.Form method="post" action={`/favorites/${id}`}>
<button>{optimistic ? "★" : "☆"}</button>
</fetcher.Form>;// app/root.tsx - add navigation, footer, providers here
export default function App() {
return (
<div>
<nav>...</nav>
<Outlet />
<footer>...</footer>
</div>
);
}// ✅ Correct
export function meta({ loaderData }: Route.MetaArgs) { ... }
// ❌ Wrong - `data` is deprecated
export function meta({ data }: Route.MetaArgs) { ... }