Claude MarketplacesSubmit
remix-run avatar

React Router Framework Mode

remix-run/agent-skills

This one covers React Router's framework mode, the full-stack setup with file-based routing, loaders, actions, and server rendering. You'll want it when building React apps that need data loading, form mutations, or SSR configuration. The skill includes references for routing, data patterns, pending UI, and type safety, plus critical patterns like using Form method="get" for search (not manual setSearchParams) and useFetcher for inline mutations. It's opinionated about layouts too, putting global nav in root.tsx instead of separate files. Good for teams moving from traditional React to a more integrated routing and data story, though you'll need React Router 7.0+ and some features require 7.9+.

skills.sh installs
3.7K
GitHub stars
134
last updated
Jul 14, 2026
View on GitHub

Install

$ npx -y skills add remix-run/agent-skills --skill react-router-framework-mode --agent claude-code

Installs into .claude/skills of the current project.

Files

React Router Framework Mode

Framework mode is React Router's full-stack development experience with file-based routing, server-side, client-side, and static rendering strategies, data loading and mutations, and type-safe route module API.

When to Apply

  • Configuring new routes (app/routes.ts)
  • Loading data with loader or clientLoader
  • Handling mutations with action or clientAction
  • Navigating with <Link>, <NavLink>, <Form>, redirect, and useNavigate
  • Implementing pending/loading UI states
  • Configuring SSR, SPA mode, or pre-rendering (react-router.config.ts)
  • Implementing authentication

References

Load the relevant reference for detailed guidance on the specific API/concept:

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/remix-run/agent-skills
Categories
Frontend Development, AI & Agent Building

More from remix-run/agent-skills

All 3

Recommended

More Frontend Development
1syncfusion avatarsyncfusion-react-commonsyncfusion/react-ui-components-skillsCommon utilities and features for Syncfusion React components. Use this skill when the user needs to implement animations, drag-and-drop, state persistence, RTL758skills.sh installs
2syncfusion avatarsyncfusion-react-accumulation-chartsyncfusion/react-ui-components-skillsImplement Syncfusion React Accumulation Charts including Pie, Doughnut, Funnel, and Pyramid chart types. Use this skill when users need circular data visualizat736skills.sh installs
3remix-run avatarreact-router-declarative-moderemix-run/agent-skillsreact router declarative mode698skills.sh installs
4syncfusion avatarsyncfusion-react-progress-barsyncfusion/react-ui-components-skillsImplement Syncfusion React Progress Bar for visual feedback. Use this skill whenever users need to display progress indicators, loading states, file uploads, da679skills.sh installs
5syncfusion avatarsyncfusion-angular-commonsyncfusion/angular-ui-components-skillsCommon utilities and features for Syncfusion Angular components. Use this skill when the user needs to implement animations, drag-and-drop, state persistence, R338skills.sh installs
6syncfusion avatarsyncfusion-angular-rich-text-editorsyncfusion/angular-ui-components-skillsImplements the Syncfusion Angular Rich Text Editor (ejs-richtexteditor) from @syncfusion/ej2-angular-richtexteditor using RichTextEditorModule, HtmlEditorServic328skills.sh installs