skills.rest
andershi666
andershi666COMMUNITY
Explore all skills by this author →
GitHub

spa-routes

Align SPA router configs across desktop and mobile files during route edits.

1|Updated Apr 14, 2026
Search Tags:#architecture#frontend#router#guidelines#parity#spa-routing
One-click install
npx skills add https://github.com/andershi666/lobehub-hr-demo --skill spa-routes-andershi666
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spa-routes
Source: https://github.com/andershi666/lobehub-hr-demo/tree/main/lobehub/.agents/skills/spa-routes
Command: npx skills add https://github.com/andershi666/lobehub-hr-demo --skill spa-routes-andershi666

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides structured guidance for editing SPA routes and maintaining parity between desktop and mobile router configurations, helping teams avoid navigation drift and blank screens caused by inconsistent route trees when editing src/routes/ roots or moving UI/logic between src/features/.

Core Features & Use Cases

  • Enforces desktop router parity by requiring updates to both src/spa/router/desktopRouter.config.tsx and src/spa/router/desktopRouter.config.desktop.tsx in the same PR.
  • Guides route placement and division between routes and features: keep route files thin and implement business logic in src/features/.
  • Process for adding a new SPA route: choose route group, create segment under src/routes/, implement UI in src/features/, and mirror route registration in router config files.
  • Migration path: gradually move logic into features while preserving router parity.

Quick Start

Create a new route under the appropriate group in src/routes/(group)/, implement UI in the corresponding src/features, and mirror the route tree in both desktopRouter.config.tsx and desktopRouter.config.desktop.tsx.

Frequently Asked Questions about spa-routes

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

FAQPage Schema
How do I keep SPA routing parity between desktop and mobile router configurations?▼

To keep SPA routing parity, you must update both desktopRouter.config.tsx and desktopRouter.config.desktop.tsx in the same edit. This prevents navigation drift and blank screens caused by inconsistent route trees.

What is the best way to structure SPA routes versus business logic in a frontend architecture?▼

The best way to structure SPA routes is keeping route files thin under src/routes/ and implementing business logic in src/features/. This division ensures clear separation between navigation trees and feature implementations.

How do I add a new SPA route segment without breaking existing navigation?▼

To add a new SPA route, choose a route group, create the segment under src/routes/(group)/, implement UI in the corresponding src/features, and mirror the route registration in both router config files.

Why does my SPA show blank screens after moving UI components between features?▼

Blank screens often occur due to navigation drift when moving UI between src/features without updating the SPA router. Synchronizing desktopRouter.config.tsx and desktopRouter.config.desktop.tsx resolves this.

How do I migrate business logic into features while preserving SPA router parity?▼

To migrate logic into features while preserving SPA router parity, gradually move implementations into src/features/ and ensure every related edit mirrors route tree changes across both desktop and mobile router configurations.

Related Skills

Explore More Software Engineering Skills→
kingmacthkingmacth

spa-routes

Organize SPA routes and features with thin wrappers and domain boundaries.

Community
Intermediate
mDevsLabsmDevsLabs
1

spa-routes

Maintain consistent SPA route architecture across web and Electron builds.

Community
Advanced
Nick777-PixelNick777-Pixel

spa-routes

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

Community
Advanced
11547613341154761334

spa-routes

Manage SPA route definitions and synchronize React router configuration files.

Community
Intermediate