What problem does it solve? Routes in a multi-tenant SPA are security boundaries, and ad-hoc routing leads to unguarded pages, duplicated permission checks, silent redirects, and leaked internal IDs. This Skill enforces a consistent discipline for defining, guarding, and structuring routes in a React Router 7 application. ## Core Features & Use Cases - Guarded route patterns: Standard <ProtectedRoute> and <AdminRoute> wrappers that centralize authentication and RBAC permission checks instead of scattering them across components. - Per-route code splitting and error isolation: Lazy-loaded routes each wrapped in their own <Suspense> and <ErrorBoundary> so one slow or crashing feature never blocks the whole app. - URL as source of truth: Search-param state via useSearchParams for filters, sort, and pagination, plus expired-session redirect flows that preserve the intended destination. - Use Case: When adding a new admin analytics page, apply this Skill to declare the route in AppRoutes.tsx, wrap it with <AdminRoute requiredPermission="...">, lazy-load the view, and keep its filters in the URL. ## Quick Start Add a new admin-only route for the reports page using the protected route guard, lazy loading, and search-param filter state.
