What problem does it solve? React Router single-page apps often drift into tangled code: routes calling databases directly, components owning async state, and ORM imports leaking into the domain layer. This Skill provides a canonical directory layout, dependency-direction rules, and verification workflow so app code stays maintainable from bootstrap through ongoing feature work. ## Core Features & Use Cases - Canonical Layered Layout: Defines exact placement for routes, feature components, client use cases, server use cases, infrastructure, and domain modules, with a mandatory placement preflight before writing code. - Boundary and Contract Rules: Enforces inward dependency direction, repository ports in the domain layer, validation ownership per layer, and explicit DTO mapping across the client-server boundary. - UI and Verification Guardrails: Standardizes Fluent UI React v9, CSS Modules, responsive design, chart guidance, and Playwright-based UI verification before pushing. - Use Case: When adding a new feature like an order management screen, use this Skill to decide exactly where each file lives, wire the FlatRoute route module to a server use case through a repository port, and verify the rendered result in Playwright. ## Quick Start Ask the assistant to apply the react-router-app-architecture skill when scaffolding a new React Router app or adding a feature, starting with the layout and module placement reference.
