Official React Router Agent Skill for AI Coding Assistants

[jeniabrook]

Overview

AI coding assistants (Claude, Cursor, GitHub Copilot, Gemini Code Assist, etc.) are becoming standard tools in developers' workflows. These agents work best when they have access to framework-specific knowledge through "skills" - structured guidelines that help them generate correct, idiomatic code.

I'm proposing that the React Router team create and maintain an official agent skill for React Router.

What are Agent Skills?

Agent skills are curated instructions that guide AI coding assistants to follow framework best practices. They include:

• Correct patterns and anti-patterns
• Decision trees (e.g., when to use <Form> vs useFetcher)
• Common migration paths
• Framework-specific conventions

Skills are distributed through platforms like https://skills.sh and installed into AI tools with a single command.

Why This Matters

1. AI agents are here to stay - Most developers now use AI assistants daily. These tools generate significant amounts of code, and without proper guidance, they often produce outdated patterns or subtle anti-patterns.
2. Community skills exist, but official ones are better - There's already a https://skills.sh/existential-birds/beagle/react-router-v7, but an official skill from the team would be:
   • More authoritative and trusted
   • Updated alongside framework releases
   • Aligned with the team's vision for how RR should be used
3. Precedent exists - Vercel maintains an https://skills.sh/vercel-labs/agent-skills/vercel-react-best-practices with 27K+ weekly installs. It's become a valuable resource for the ecosystem.
4. Low maintenance, high impact - Once created, skills require minimal upkeep (mainly updates when major patterns change), but they influence thousands of developers' codebases through AI-generated code.

What an Official Skill Could Cover

• Data Mode vs Framework Mode decision guidance
• Loader/Action patterns and data fetching best practices
• Form handling ( vs useFetcher)
• Route configuration patterns (nested routes, dynamic segments, splats)
• Error boundary setup
• Migration guidance from older versions
• SSR/streaming patterns
• Type safety with TypeScript

Request

Would the React Router team consider creating and maintaining an official agent skill? This would help ensure that AI-generated React Router code follows the patterns you recommend.

[brookslybrand]

Thanks @jeniabrook for opening up the discussion!

I actually spent a good bit of last week divining into Skills and different ways folks are using them. We definitely want to provide some for React Router sooner than later.

Right now I anticipate us opening up a repo and creating a few to share with the community. This will allow us to start getting feedback, ideas, and contributions.

We will likely start with framework mode, mostly because I think it would be the one that will benefit from it the most (lot more conventions). I also identified similar areas for the skill to cover.

[AntoineMaille]

Would love official skills like Vercel's React/next

[brookslybrand]

Check it out!

https://github.com/remix-run/agent-skills

Please take them for a spin and offer up any improvements or additions you can think of. This skill for sure doesn't cover everything, but from my experimenting it's a pretty good start

npx skills add remix-run/agent-skills  --skill react-router-framework-mode

[brookslybrand]

Also, I just wanted to highlight @sergiodxa's skills. They're slightly more opinionated and leverage remix-utils a lot more, so many folks might find them incredibly helpful:

https://github.com/sergiodxa/agent-skills

[OchirovBair]

What about other options? Data mode и declarative mode?

[sergiodxa]

Those would probably need another skill, they share some parts but a lot of things differ

[brookslybrand]

@OchirovBair planning to add those as well (hence why this first one is titled "react-router-framework-mode")

[jeniabrook]

@brookslybrand wow, this is amazing! Thank you for the effort!

[brookslybrand]

🫡

Please feel free to contribute if you find agents doing something non-RR-like

Also, for Framework mode there are definitely some APIs/patterns I didn't completely cover, so PRs are very welcome if you identify some missing coverage. I am focusing on some other tasks at the moment, but plan to add more if others don't beat me to it.

[oliviacraft]

The official React Router skills are a great foundation — the framework-level skill covers routing conventions, loader/action patterns, and RR7 migrations.

One pattern worth considering on top: a project-level CLAUDE.md that sits alongside the React Router skill and covers team-specific conventions that the framework skill cannot know:

• Which component library you use and any patterns specific to your setup
• State management choice and what belongs where
• Form handling preference (react-hook-form + zod vs React Routers built-in)
• Testing setup (vitest + @testing-library/react, MSW for network mocks)
• Whether you co-locate tests or use a separate directory

The skill gives the AI correct React Router syntax. The project CLAUDE.md gives it your teams opinions on top of that. Both layers together produce much more consistent output than either alone.

For anyone who wants a starting point for the project-level TypeScript/React layer: https://gist.github.com/oliviacraft/6a202e11096d59c84767a7fda09b685e — free sample, same format as the agent skills.