react-router-tab-subroute-refactor

What problem does it solve?

This Skill solves the issue of scattered top-level admin pages (such as /users, /roles, /audit) that lack consistent navigation, deep linking support, and proper browser back/forward behavior, making management of related system settings clunky and error-prone.

Core Features & Use Cases

• Tabbed Sub-Route Consolidation: Combines 3+ related top-level pages into a single URL prefix with a shared tab navigation layout using React Router v6/v7 and shadcn Tabs (Radix UI) with Tailwind styling.
• Deep Linking & Browser Compatibility: Ensures URLs are the source of truth for active tab state, so deep links, browser back/forward navigation, and "open in new tab" all work as expected.
• Use Case: Ideal for refactoring admin page clusters like settings pages that have accumulated too many top-level navigation links, or wrapping a set of related management pages into a unified tabbed interface.

Quick Start

Use this Skill to refactor your existing /users, /roles, and /audit top-level pages into a single /settings/* prefix with a shared tab navigation layout that supports deep linking and proper browser history navigation.