1. Habit
  2. Skills
  3. React Router skill
remix-run · 2K installs

React Router skill
Runs by itself, route code changes.

Route changes match the app's mode.

Install the React Router skill and make it a habit: follow https://gethabit.dev/skills/remix-run/react-router.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

2K installs57K starsMIT licenceSource on GitHub ↗

React Router

by remix-run · 2K installs

The skill

React router helps build apps in framework, data, declarative and unstable RSC modes: routes, loaders, actions, forms, fetchers, navigation, pending UI, SSR and upgrades, using the installed version's docs.

Only when you ask.

The habit

Route changes match the app's mode.

↻ Runs by itselfroute code changes

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

route code changes. Runs in GitHub Actions or Claude Code routine.

  • ↻ route code changes
  • pull_request paths: app/routes/**, app/routes.ts

02

It checks its work

mode + build. If a check fails, it tells you.

  • ✓the app's React Router mode is identified before review
  • ✓no framework or data pattern is applied to a declarative app
  • ✓the build passes

03

It remembers

mode and review log. The next run reads it first: the app's detected mode and open routing issues.

loops/react-router-mode-check-loop/log.md

One run, step by step.
Then it stops.

Stop ruleStops after the changed routes of one pull request, with 1 retry.

  1. 01

    Identify the mode

    Detect framework, data or declarative mode from the config files, imports and route setup.

  2. 02

    Load the reference

    Read the matching reference, plus rsc.md for an unstable RSC app.

  3. 03

    Read installed docs

    Read the version-matched docs under node_modules/react-router/docs and honour each file's mode marker.

  4. 04

    Review the change

    Check loaders, actions, forms, params and pending UI against that mode's patterns.

  5. 05

    Build and log

    Run the build and log the detected mode and any issue.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the React Router skill helps.

Use it when

  • ✓ You configure routes or route modules
  • ✓ You add loaders or actions
  • ✓ You upgrade React Router

Skip it when

  • – You use TanStack Router or Next.js
  • – You build a non-React app

Questions

React Router skill, answered.

Why identify the mode first?

The skill is mode-specific, and framework or data patterns must not be applied to a declarative app.

Which docs are authoritative?

The markdown docs shipped in the installed package, so guidance matches the installed version.

How do I install the React Router skill?

Copy the prompt at the top into your agent. It installs the skill from remix-run/react-router and sets up the habit. Or run npx skills add remix-run/react-router --skill react-router.

Is the React Router skill free?

Yes. It is published under MIT. Habit is free too.

React Router. Now as a habit.

Install the React Router skill and make it a habit: follow https://gethabit.dev/skills/remix-run/react-router.md

  • Free
  • No account
  • Undo in one line

All remix-run skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by remix-run, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.