React Router agent skill
The official React Router skill: the agent identifies the app mode and follows the docs for the installed version
- 56,629 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill consists only of instructions and references
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/react-router-agent-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill consists only of instructions and references
This is third-party code. Review the repository files before installing.
What it does
React Router has several modes, and advice for one breaks another. The skill first has the agent identify the mode from project signals: Framework (react-router.config.ts, app/routes.ts, the @react-router/dev/vite plugin), Data (createBrowserRouter and RouterProvider), Declarative or unstable RSC. The agent then reads the reference for that mode and the docs now shipped inside the react-router package for the installed version. It covers routes, loaders and actions, forms and fetchers, navigation and pending UI, SSR, SPA and pre-rendering, middleware, URL params and upgrades.
Who it is for. For React developers whose routing and data loading are built on React Router.
Good fit when
- The agent mixes up Framework and Declarative modes and writes incompatible code
- You need to add a loader, action or middleware to a route
- You need to upgrade the app to a new major React Router version
Not a fit when
- The project uses Next.js, TanStack Router or another router
- You want React Router team workflows; the other skills in .agents are for maintainers
Example request
Add a profile page with a loader and an action that saves the form, and show a pending stateLimitations
Automatic setup only happens when creating a new project with create-react-router; for an existing project the skill is copied manually. RSC mode is marked unstable. The skill is instructions only and does not check code.
How to disable. Delete the react-router folder from the project's skills directory, for example .agents/skills/react-router.
FAQ
How do I get the skill in a new project?
create-react-router offers to add it during project creation; with --yes it is added by default, and --no-agent-skills skips it.
Where does the agent get docs from?
Part of the official docs ships inside the react-router package, and the skill tells the agent to read them for the installed version.
Discussion
No questions or reviews yet.
Related
SkillsReact Joyride skill for agents
React Joyride
A skill for React Joyride v3: guided product tours, steps, events, custom components and a guide to the usual breakages
Four official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Vercel skills for agents
Agent Skills
Vercel skills: React and Next.js performance, UI checks by guidelines, React Native, component composition, and deployment
Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
Official Angular team skills: code generation with current practices, signals, forms, SSR and new app setup
README in short
The repository is React Router itself; the skill sits in .agents/skills/react-router next to the team's internal skills. According to the changelog, create-react-router can now add this skill to new projects, and the react-router package started shipping part of the docs for AI agents. SKILL.md lists the signals of each mode and points to the framework-mode and other mode references. MIT licensed.
README badge
Original SKILL.md
---
name: react-router
description: Build applications with React Router in Framework, Data, Declarative, and unstable RSC modes. Use when configuring routes, route modules, loaders, actions, forms, fetchers, navigation, pending UI, SSR/SPA/pre-rendering, middleware, URL params/search params, or React Router upgrades.
license: MIT
---
# React Router
React Router is mode-specific. Before changing an app, identify the mode, load the matching reference, then read the installed docs for the installed package version.
## Identify the Mode
Do not apply Framework/Data patterns to a Declarative app unless you are intentionally migrating modes.
### Framework Mode
Use Framework Mode guidance when you see:
- `@react-router/dev` in dependencies
- `react-router.config.ts`
- `app/routes.ts`
- `app/entry.server.tsx` and/or `app/entry.client.tsx` files
- route modules under `app/routes/`
- route exports like `loader`, `action`, `clientLoader`, `clientAction`, `ErrorBoundary`, `meta`, `links`, or `headers`
- imports from `./+types/...`
- the React Router Vite plugin from `@react-router/dev/vite`
Framework examples usually use the default `app/` directory, but check `react-router.config.ts` for a custom `appDirectory` before assuming exact paths.
Then read `references/framework-mode.md`.
### Data Mode
Use Data Mode guidance when you see:
- `createBrowserRouter`, `createHashRouter`, `createMemoryRouter`, or `createStaticRouter`
- `<RouterProvider router={router}>`
- route objects with properties like `path`, `children`, `loader`, `action`, `Component`, `ErrorBoundary`, or `lazy`
- data APIs without the Framework Vite plugin