react-router-framework-mode

The react-router-framework-mode skill provides guidance for building full-stack React applications using React Router’s framework mode. It focuses on modern application architecture with file-based routing, server-side rendering, client-side rendering, static pre-rendering, and structured data handling through route modules. The skill is intended to help developers correctly configure routes, manage data loading and mutations, implement navigation patterns, and organize application structure using React Router conventions such as app/routes.ts and react-router.config.ts. It also emphasizes following framework-recommended patterns instead of manually implementing routing or state management behaviors that are already supported by the framework.

The skill covers core framework features including loaders, clientLoaders, actions, clientActions, forms, redirects, navigation APIs, pending UI states, optimistic updates, and error handling. It includes references for routing configuration, special framework files, middleware support, rendering strategies, session management, authentication, and type safety. The documentation also highlights critical implementation patterns, such as using <Form method="get"> for search forms and useFetcher for inline mutations to avoid unnecessary navigation. In addition, the skill addresses version compatibility requirements, including middleware support introduced in React Router 7.9.0 and the framework features available in React Router 7.0.0 and later.

This skill is designed for React developers building production-ready full-stack web applications with React Router. It is particularly useful for teams implementing server rendering, nested routes, form handling, authentication workflows, or optimistic UI patterns. Developers migrating to framework mode or adopting React Router conventions for scalable application structure can use this skill to follow recommended architecture and implementation practices while avoiding unsupported or incorrect patterns.