spa-routes

Structure SPA routes and feature code across route and feature directories.

Updated Apr 3, 2026
One-click install
npx skills add https://github.com/Nick777-Pixel/mychat7 --skill spa-routes-nick777-pixel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spa-routes
Source: https://github.com/Nick777-Pixel/mychat7/tree/main/.agents/skills/spa-routes
Command: npx skills add https://github.com/Nick777-Pixel/mychat7 --skill spa-routes-nick777-pixel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps teams structure SPA routes and ensure parity between desktop and mobile router configurations, preventing navigation drift and blank-screen issues when editing app routes.

Core Features & Use Cases

  • Clarifies what belongs in src/routes/ (roots) vs src/features/ (domain logic) and how to separate concerns.
  • Enforces desktop router parity by requiring updates to both src/spa/router/desktopRouter.config.tsx and src/spa/router/desktopRouter.config.desktop.tsx in every change.
  • Provides a concrete workflow for adding a new SPA route: create thin route files under src/routes and migrate underlying logic into the appropriate domain feature under src/features/.
  • Guides route registration and synchronization across the router configuration to prevent drift and navigation issues.

Quick Start

Create a new route segment by adding thin route files under src/routes and migrate related logic into a matching src/features domain, then update both desktopRouter.config.tsx and desktopRouter.config.desktop.tsx to reflect the new path.

Frequently Asked Questions about spa-routes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent navigation drift when adding new SPA routes in React?▼

To prevent navigation drift when adding SPA routes, update both desktopRouter.config.tsx and desktopRouter.config.desktop.tsx files during every router tree modification. This dual-file desktop router approach ensures synchronization and avoids blank-screen navigation issues.

What is the correct separation of concerns between routes and features in a React SPA?▼

The correct separation of concerns keeps src/routes as thin route files containing only route definitions, while migrating all underlying domain logic into matching directories under src/features to maintain clear boundaries.

What's the best way to structure a new SPA route segment with TypeScript?▼

Create thin route files under src/routes, migrate underlying logic into the appropriate domain feature under src/features, then register the new path by updating both desktopRouter.config.tsx and desktopRouter.config.desktop.tsx to synchronize the router configuration.

Why does my SPA show a blank screen after refactoring the router tree?▼

Your SPA shows a blank screen after refactoring the router tree likely due to navigation drift from failing to update both desktop router configuration files. Enforcing desktop router parity across src/spa/router.* files prevents this issue.

Do I need to update both desktop router config files when adding a single React route?▼

Yes, you need to update both desktopRouter.config.tsx and desktopRouter.config.desktop.tsx when adding a React route. This two-file desktop router approach enforces configuration parity and prevents navigation drift across desktop and mobile environments.