Build full-stack React apps using React Router framework mode: configure routes/loaders/actions, handle forms/navigation, pending/optimistic UI, error boundaries, react-router.config.ts.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-2 --plugin remix-run-agent-skillsThis skill uses the workspace's default tool permissions.
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.
references/actions.mdreferences/data-loading.mdreferences/error-handling.mdreferences/middleware.mdreferences/navigation.mdreferences/pending-ui.mdreferences/rendering-strategies.mdreferences/route-modules.mdreferences/routing.mdreferences/sessions.mdreferences/special-files.mdreferences/type-safety.mdGenerates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
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:
npm list react-router
| 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:
// ✅ Correct
<Form method="get">
<input name="q" />
</Form>
// ❌ Wrong - don't manually handle search params
<form onSubmit={(e) => { e.preventDefault(); setSearchParams(...) }}>
Inline mutations - use useFetcher, NOT <Form> (which causes page navigation):
const fetcher = useFetcher();
const optimistic = fetcher.formData?.get("favorite") === "true" ?? isFavorite;
<fetcher.Form method="post" action={`/favorites/${id}`}>
<button>{optimistic ? "★" : "☆"}</button>
</fetcher.Form>;
See references/actions.md for complete patterns.
Global UI belongs in root.tsx - don't create separate layout files for nav/footer:
// app/root.tsx - add navigation, footer, providers here
export default function App() {
return (
<div>
<nav>...</nav>
<Outlet />
<footer>...</footer>
</div>
);
}
Use nested routes for section-specific layouts. See references/routing.md.
meta uses loaderData, not deprecated data:
// ✅ Correct
export function meta({ loaderData }: Route.MetaArgs) { ... }
// ❌ Wrong - `data` is deprecated
export function meta({ data }: Route.MetaArgs) { ... }
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: