React Router agent skill

Install

Copy the .agents/skills/react-router folder from the remix-run/react-router repository into the project's skills directory. Before editing, identify the React Router mode and read the matching reference from 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.

Example request

Add a profile page with a loader and an action that saves the form, and show a pending state

Limitations

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.

Security check

• The skill consists only of instructions and references

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.

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

Related