react-router-sibling-route-conflict

What problem does it solve?

This skill resolves the common, silent react-router v6/v7 bug where two sibling routes with overlapping paths (such as a top-level /settings route and a /settings/* layout route) cause route shadowing. This leads to blank layout outlets or incorrect page rendering even when TypeScript compiles with zero errors, making the issue hard to detect without manual browser testing.

Core Features & Use Cases

• Diagnoses the root cause of sibling route shadowing between overlapping path declarations in react-router v6/v7 configurations.
• Provides 3 proven fix patterns (nested layout with index route, legacy route redirect, order-dependent sibling, or full path renaming) tailored to different refactor constraints and legacy link preservation needs.
• Includes mandatory browser smoke test steps to verify fixes, avoiding false positives from passing TypeScript checks alone.
• Common use case: When upgrading a legacy react-router v5 application to v6/v7, use this skill to fix broken settings routes that show blank layouts after adding new settings subpages.

Quick Start

Use the react-router-sibling-route-conflict skill to diagnose and fix the blank layout issue on your /settings route after adding a /settings/users subroute.