Builds React apps using React Router data mode with createBrowserRouter and RouterProvider for route objects, loaders, actions, Form, useFetcher, and pending/optimistic UI.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-2 --plugin remix-run-agent-skillsThis skill uses the workspace's default tool permissions.
Data mode uses `createBrowserRouter` and `RouterProvider` to enable data loading, actions, and pending UI without the framework's Vite plugin. This is ideal for existing React applications that want to add data loading and mutation capabilities.
Generates 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.
Data mode uses createBrowserRouter and RouterProvider to enable data loading, actions, and pending UI without the framework's Vite plugin. This is ideal for existing React applications that want to add data loading and mutation capabilities.
createBrowserRouter with route objectsloader property on routesaction property<Link>, <NavLink>, <Form>, redirect, and useNavigateuseNavigationuseFetcher for mutations without navigationLoad the relevant reference for detailed guidance on the specific API/concept:
| Reference | Use When |
|---|---|
references/routing.md | Configuring routes, nested routes, layout |
references/route-object.md | Understanding route object properties |
references/data-loading.md | Loading data with loaders |
references/actions.md | Handling forms, mutations, validation |
references/navigation.md | Links, programmatic navigation, redirects |
references/pending-ui.md | Loading states, optimistic UI |
references/ssr.md | Server-side rendering with data mode |
These are the most important patterns to follow. Load the relevant reference for full details.
import { createBrowserRouter, RouterProvider } from "react-router";
const router = createBrowserRouter([
{
path: "/",
Component: Root,
children: [
{ index: true, Component: Home },
{ path: "about", Component: About },
],
},
]);
ReactDOM.createRoot(root).render(<RouterProvider router={router} />);
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
? 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.
Use fetcher.formData to show expected results immediately:
function FavoriteButton({ itemId, isFavorite }) {
const fetcher = useFetcher();
// Optimistic: use pending form data, fallback to server state
const optimistic = fetcher.formData
? fetcher.formData.get("favorite") === "true"
: isFavorite;
return (
<fetcher.Form method="post" action={`/items/${itemId}/favorite`}>
<input type="hidden" name="favorite" value={String(!optimistic)} />
<button>{optimistic ? "★" : "☆"}</button>
</fetcher.Form>
);
}
See references/pending-ui.md for complete patterns.
If anything related to React Router is not covered in these references, you can search the official documentation: