React Router Data Mode

This teaches Claude to build React apps with React Router's data mode using createBrowserRouter and RouterProvider instead of the Vite plugin. It's for existing React projects that want proper data loading with loaders, form handling with actions, and optimistic UI without going full framework. The skill includes solid patterns for common mistakes like using Form method="get" for search params instead of manual onSubmit handlers, and using useFetcher for inline mutations that shouldn't trigger navigation. Good reference tables point you to the right docs for routing, data loading, and pending states. If you're already using React Router but still wrestling with fetch calls in useEffect, this will clean that up.

skills.sh installs: 914
GitHub stars: 134
last updated: Jul 14, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

React Router Data Mode

Data mode uses createBrowserRouter and RouterProvider to enable data loading, actions, and pending UI without the framework's Vite plugin. This is ideal for existing React applications that want to add data loading and mutation capabilities.