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")