react-router
Assistance for building and configuring applications with React Router across different modes.
Install
mkdir -p .claude/skills/react-router && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15477" && unzip -o skill.zip -d .claude/skills/react-router && rm skill.zipInstalls to .claude/skills/react-router
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Identify the React Router mode (Framework, Data, Declarative, RSC)
- →Configure routes and route modules
- →Implement loaders and actions for data fetching
- →Manage navigation and pending UI
- →Handle URL parameters and search parameters
- →Guide through React Router upgrades and migrations
How it works
The skill identifies the React Router mode by examining dependencies and file structures, then provides guidance based on the identified mode and relevant documentation. It can also guide through mode migrations.
Inputs & outputs
When to use react-router
- →Configure React Router loaders
- →Migrate to Framework mode
- →Set up route navigation
- →Define route actions
About react-router
Identifies router mode (Framework, Data, Declarative). Configures route modules, loaders, actions, and pending UI.
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.
When not to use it
- →When working with routing solutions other than React Router
- →When the application does not involve React components
Limitations
- →React Server Components support is unstable
- →Requires access to node_modules/react-router/docs/ for installed version documentation
- →Only applies a document when its mode marker matches the app mode
How it compares
This skill provides mode-specific guidance for React Router, ensuring that patterns and documentation match the application's current routing setup, unlike a generic approach that might apply incorrect patterns.
Compared to similar skills
react-router side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| react-router (this skill) | 0 | 1mo | No flags | Advanced |
| nextjs-best-practices | 31 | 6mo | No flags | Intermediate |
| web-component-design | 5 | 5mo | No flags | Intermediate |
| react-component-patterns | 3 | 1mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by jakubszpil
View all by jakubszpil →You might also like
nextjs-best-practices
davila7
Next.js App Router principles. Server Components, data fetching, routing patterns.
web-component-design
wshobson
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
react-component-patterns
HoangNguyen0403
Modern React component architecture and composition patterns.
vercel-composition-patterns
vercel-labs
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
javascript-typescript-typescript-scaffold
sickn33
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
server-components
davepoon
This skill should be used when the user asks about "Server Components", "Client Components", "'use client' directive", "when to use server vs client", "RSC patterns", "component composition", "data fetching in components", or needs guidance on React Server Components architecture in Next.js.