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.

Install to Claude Code

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