Agent skill

React Router Development

Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

MITAuto-check passedFrontend & Design

Install React Router Development

skills CLI

$ npx skills add remix-run/react-router --skill react-router -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install remix-run/react-router react-router --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/remix-run/react-router.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/react-router .claude/skills/react-router && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "react-router" agent skill from https://github.com/remix-run/react-router/tree/main/.agents/skills/react-router into .claude/skills/react-router/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-router", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/remix-run/react-router/tree/main/.agents/skills/react-router

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add remix-run/react-router --skill react-router -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install remix-run/react-router react-router --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/remix-run/react-router.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/react-router .agents/skills/react-router && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "react-router" agent skill from https://github.com/remix-run/react-router/tree/main/.agents/skills/react-router into .agents/skills/react-router/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-router", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add remix-run/react-router --skill react-router -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install remix-run/react-router react-router --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/remix-run/react-router.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/react-router .cursor/skills/react-router && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "react-router" agent skill from https://github.com/remix-run/react-router/tree/main/.agents/skills/react-router into .cursor/skills/react-router/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-router", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/remix-run/react-router.git --path .agents/skills/react-router

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add remix-run/react-router --skill react-router -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install remix-run/react-router react-router --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/remix-run/react-router.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/react-router .gemini/skills/react-router && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "react-router" agent skill from https://github.com/remix-run/react-router/tree/main/.agents/skills/react-router into .gemini/skills/react-router/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-router", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install remix-run/react-router react-router

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add remix-run/react-router --skill react-router -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/remix-run/react-router.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/react-router .github/skills/react-router && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "react-router" agent skill from https://github.com/remix-run/react-router/tree/main/.agents/skills/react-router into .github/skills/react-router/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-router", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add remix-run/react-router --skill react-router -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install remix-run/react-router react-router --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/remix-run/react-router.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/react-router .opencode/skills/react-router && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "react-router" agent skill from https://github.com/remix-run/react-router/tree/main/.agents/skills/react-router into .opencode/skills/react-router/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-router", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: react-router
GitHub stars: 57k
Used in: 1 other repo
Token cost: ~1.5k tokens
SKILL.md length: 453 words
Files: 5 (incl. references)
Skills in repo: 6
Repo updated: Oct 6, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

Adding a loader or action to a route in a React Router app
SKILL.md covers Identify the Mode, Use Installed Docs as Source…, Skill References and Mode Migration Doc Index
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Working out which React Router mode an existing project uses

What it does

React Router behaves differently per mode, so the agent works out which one an app uses before changing anything. Framework Mode shows up as `@react-router/dev` in dependencies, `react-router.config.ts`, `app/routes.ts`, route modules under `app/routes/` and exports such as `loader` and `action`. Data Mode uses `createBrowserRouter` and similar functions with `RouterProvider` and route objects. Declarative Mode uses `BrowserRouter`, `Routes` and `Route` JSX with no loaders or actions.

Each mode has its own reference file, and the unstable React Server Components variants for Framework and Data modes add a shared RSC reference, detected through signals such as `unstable_reactRouterRSC` and `"use client"` directives. Patterns from one mode are not applied to an app in another unless you are migrating. The agent is also pointed at the markdown docs shipped inside the installed package, `node_modules/react-router/docs/`, so guidance matches the installed version. Topics include routes, loaders, actions, forms, fetchers, navigation, pending UI, rendering strategies, middleware, URL params and upgrades.

When your agent uses it

Adding a loader or action to a route in a React Router app
Working out which React Router mode an existing project uses
Upgrading React Router or migrating from declarative routing to framework mode
Handling pending UI and form submissions with fetchers

Example prompts

“Add a loader to the dashboard route and show a pending state while navigating.”
“Which React Router mode is this app using? Check the config and routes first.”
“Migrate our BrowserRouter setup to data routers with loaders.”
“Convert the contact form to use a route action and a fetcher.”

Requirements

A React Router project; the installed package's `docs/` folder is read for version-specific guidance

What it can do on your machine

Read from SKILL.md and the folder at commit 266915e. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React Router Development loads about 1.5k tokens when it runs, and up to ~6.2k if it reads all its reference files. Until then it costs about 74 tokens; SKILL.md has 453 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~74
When it runs · the whole SKILL.md, loaded when a task matches: ~1.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~6.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from remix-run/react-router at commit 266915e, republished under its MIT licence (© remix-run). 453 words, ~1,525 tokens.

Download SKILL.mdSave it as .claude/skills/react-router/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.

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

Then read references/data-mode.md.

Declarative Mode

Use Declarative Mode guidance when you see:

<BrowserRouter>, <HashRouter>, or <MemoryRouter>
<Routes> and <Route> JSX route configuration
route components passed with element={<Component />}
no data router, no route module convention, and no loaders/actions

Then read references/declarative-mode.md.

RSC Framework and RSC Data Modes

React Server Components support is unstable and exists in both Framework and Data variants. Use RSC guidance when you see:

unstable_reactRouterRSC
@vitejs/plugin-rsc
unstable_RSCRouteConfig
RSC entry files such as entry.rsc
ServerComponent, ServerErrorBoundary, ServerLayout, or ServerHydrateFallback
React directives or boundary packages such as "use client", "server-only", or "client-only"

For RSC Framework, read both references/framework-mode.md and references/rsc.md. For RSC Data, read both references/data-mode.md and references/rsc.md.

Show full SKILL.md (198 more words)Show less

Use Installed Docs as Source of Truth

React Router ships markdown docs in the package so guidance can match the installed version:

txt

node_modules/react-router/docs/

Key docs paths:

txt

node_modules/react-router/docs/index.md
node_modules/react-router/docs/start/
node_modules/react-router/docs/how-to/
node_modules/react-router/docs/explanation/
node_modules/react-router/docs/upgrading/

When this skill references react-router/docs/..., read the matching file under node_modules/react-router/docs/. If the installed version does not include local docs, use the repo docs/ directory when working inside the React Router repository; in a consuming app, fall back to version-matched website docs.

Most docs include a mode marker near the top:

txt

[MODES: framework, data, declarative]

Only apply a doc when its mode marker matches the app mode. If a task spans modes, prefer the section or file that matches the current app.

RSC is documented primarily in:

txt

node_modules/react-router/docs/how-to/react-server-components.md

Skill References

Load the relevant reference after identifying the mode:

Reference	Use When
`references/framework-mode.md`	Framework Mode or RSC Framework base behavior
`references/data-mode.md`	Data Mode or RSC Data base behavior
`references/declarative-mode.md`	Declarative Mode
`references/rsc.md`	Any unstable RSC app

Mode Migration Doc Index

If the user explicitly asks to switch modes, read the target mode reference plus the migration-relevant docs:

Migration	Docs to read
Declarative → Data	`react-router/docs/start/modes.md`, `react-router/docs/start/data/routing.md`, `react-router/docs/start/data/data-loading.md`, `react-router/docs/start/data/actions.md`
Declarative/Data → Framework	`react-router/docs/start/modes.md`, `react-router/docs/start/framework/routing.md`, `react-router/docs/start/framework/route-module.md`, `react-router/docs/how-to/route-module-type-safety.md`
Framework SPA/SSR/pre-render changes	`react-router/docs/start/framework/rendering.md`, `react-router/docs/how-to/spa.md`, `react-router/docs/how-to/pre-rendering.md`, `react-router/docs/start/framework/data-loading.md`, `react-router/docs/start/framework/actions.md`
Future flags/upgrades	`react-router/docs/upgrading/future.md` and relevant files under `react-router/docs/upgrading/`

Files

SKILL.md and 4 other files (references) in .agents/skills/react-router of remix-run/react-router.

SKILL.md
references/data-mode.md
references/declarative-mode.md
references/framework-mode.md
references/rsc.md

Open the folder on GitHubat commit 266915e

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in remix-run/react-router, which our catalogue first saw on October 7, 2026.

foxlau/react-router-v7-better-auth.agents/skills

Compare with similar skills

React Router Development next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React Router Development compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
React Router Development this skillremix-run/react-router	57k	1 repos	~1.5k	Automated safety check: Pass	MIT	yesterday
Reactmagnus919/agent-skills	111	—	~1.4k	Automated safety check: Pass	MIT	yesterday
Clerk React Patternsgeekskai/blog	103	1 repos	~1k	Automated safety check: Notes	MIT	yesterday
React UI State PatternsChrisWiles/claude-code-showcase	6.1k	7 repos	~1.6k	Automated safety check: Pass	None	9 mo ago
React Frontend Development Guidelinesdiet103/claude-code-infrastructure-showcase	10k	2 repos	~2.9k	Automated safety check: Pass	MIT	2 mo ago
Using Docs Kitlobehub/lobe-ui	2.2k	—	~2.8k	Automated safety check: Pass	MIT	yesterday

Similar skills

React
magnus919/agent-skills
Operate React applications as a named tool: inspect and diagnose React/Vite projects, design component boundaries and state flow, implement accessible responsive UI, and verify behavior with the…
111 GitHub stars~1.4k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Clerk React Patterns
geekskai/blog
React SPA auth patterns with @clerk/react for Vite/CRA - ClerkProvider setup, useAuth/useUser/useClerk hooks, React Router protected routes, custom sign-in flows.
103 GitHub starsUsed in 1 repo~1k tokens
Frontend & DesignAuto-check: notes
React UI State Patterns
ChrisWiles/claude-code-showcase
Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.
6.1k GitHub starsUsed in 7 repos~1.6k tokens
Frontend & DesignAuto-check passed
React Frontend Development Guidelines
diet103/claude-code-infrastructure-showcase
Guidelines for React 18 and TypeScript apps covering Suspense data fetching, lazy loading, feature folders, MUI v7 styling, TanStack Router and performance.
10k GitHub starsUsed in 2 repos~2.9k tokens
Frontend & DesignAuto-check passed
Using Docs Kit
lobehub/lobe-ui
Set up and author a documentation site with @lobehub/docs-kit (the lobedocs CLI, React Router + Vite static docs used by ui.lobehub.com).
2.2k GitHub stars~2.8k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Safe Element Comparison
seasonedcc/remix-forms
Maintain element type comparison safety in remix-forms. An agent skill from seasonedcc/remix-forms.
514 GitHub stars~1.8k tokensUpdated 5 mo ago
Frontend & DesignAuto-check passed

Questions about React Router Development

What does React Router Development do?

Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs. React Router behaves differently per mode, so the agent works out which one an app uses before changing anything.ts`, route modules under `app/routes/` and exports such as `loader` and `action`.

When should I use React Router Development?

React Router Development fits situations like: adding a loader or action to a route in a React Router app; working out which React Router mode an existing project uses; upgrading React Router or migrating from declarative routing to framework mode; handling pending UI and form submissions with fetchers.

How do I install React Router Development in Claude Code?

Run `npx skills add remix-run/react-router --skill react-router -a claude-code`. Or copy the skill folder (.agents/skills/react-router in remix-run/react-router) into .claude/skills/react-router in your project. Claude Code loads it when a task matches its description.

How do I install React Router Development in Codex?

Run `npx skills add remix-run/react-router --skill react-router -a codex`. Or copy the skill folder (.agents/skills/react-router in remix-run/react-router) into .agents/skills/react-router in your project. Codex loads it when a task matches its description.

Can I use React Router Development in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add remix-run/react-router --skill react-router -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-router, .gemini/skills/react-router, .github/skills/react-router and .opencode/skills/react-router in your project.

What does React Router Development need to run?

SKILL.md names no scripts, command-line tools or credentials: React Router Development is instructions for the agent only. Our summary lists: A React Router project; the installed package's `docs/` folder is read for version-specific guidance.

Does React Router Development access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is React Router Development safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React Router Development use?

React Router Development is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Router Development use?

About 1.5k tokens (SKILL.md is roughly 6.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.7k tokens, read only when the agent opens those files.

What are the alternatives to React Router Development?

Skills that share tags, products or a category with React Router Development: React (magnus919/agent-skills, 111 stars), Clerk React Patterns (geekskai/blog, 103 stars), React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars) and React Frontend Development Guidelines (diet103/claude-code-infrastructure-showcase, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Router Development?

remix-run (a GitHub organization) maintains it in remix-run/react-router, which has 56,597 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 6, 2026.

Source: remix-run/react-router on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install React Router Development

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

React Router

Identify the Mode

Framework Mode

Data Mode

Declarative Mode

RSC Framework and RSC Data Modes

Use Installed Docs as Source of Truth

Skill References

Mode Migration Doc Index

Files

Used in 1 other repository

Compare with similar skills

Similar skills

More from remix-run/react-router

Related

Questions about React Router Development