react-router-project-conventions

What problem does it solve?

This project-specific skill provides a consistent, scalable approach to adding or modifying routes in both dashboard/ and marketing/ React Router v7 apps. It helps teams enforce a shared modular routing pattern, reducing divergence and mistakes when creating new pages, layouts, or route resources.

Core Features & Use Cases

• Shared conventions for route.ts barrels, per-route file responsibilities (route.component.tsx, route.loader.ts, route.action.ts, route.meta.ts, route.handle.ts).
• Clear folder-name to URL mapping with flatRoutes(), ensuring predictable URL structures across dashboard and marketing apps.
• Guidance on when to create new route pieces, how to lift components, and how to integrate with MetadataComposer for marketing overlays.
• Use Case: A new page under dashboard/app/routes or marketing/app/routes follows the same pattern to ensure consistency and faster onboarding.

Quick Start

To apply these conventions, go to the target sibling (dashboard/ or marketing/), identify the route folder you want to add or modify, and implement the standard route.ts barrel and per-file components following the project-conventions.