spa-routes

Maintain SPA route parity between desktop and mobile router configs.

Updated May 11, 2026
One-click install
npx skills add https://github.com/zmh13928433602-sys/lobe-chat --skill spa-routes-zmh13928433602-sys
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: spa-routes
Source: https://github.com/zmh13928433602-sys/lobe-chat/tree/main/.agents/skills/spa-routes
Command: npx skills add https://github.com/zmh13928433602-sys/lobe-chat --skill spa-routes-zmh13928433602-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams structure SPA routes and keep the router configuration in sync across desktop and mobile entry points, preventing navigation drift and blank screens when routes move.

Core Features & Use Cases

  • Clear separation of route roots and domain features to improve maintainability.
  • Guidance for adding new segments, refactors, and parity checks between desktopRouter.config.tsx and desktopRouter.config.desktop.tsx.
  • Real-world scenario: when introducing a new settings page under src/routes, ensure corresponding desktop and mobile route trees align and surface consistently.

Quick Start

Create or update a SPA route segment under src/routes and ensure both desktopRouter.config.tsx and desktopRouter.config.desktop.tsx are updated in lockstep.

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 route trees in sync across desktop and mobile entry points?

To keep SPA route trees in sync, you must update desktopRouter.config.tsx and desktopRouter.config.desktop.tsx in lockstep whenever editing src/routes segments, enforcing parity to prevent navigation drift and blank screens.

Why do I get blank screens when moving routes in my single page application?

Blank screens occur when SPA routes move without maintaining parity between desktop and mobile router configurations. Aligning desktopRouter.config.tsx with desktopRouter.config.desktop.tsx resolves the navigation drift causing this issue.

What is the best way to structure SPA routes for better maintainability?

The best way to structure SPA routes for maintainability is enforcing a clear separation between route roots under src/routes and domain features within src/features, ensuring scalable and organized navigation updates.

How do I add a new settings page to an existing SPA route segment?

To add a new settings page, create or update the segment under src/routes and coordinate the route changes with src/features, ensuring both desktop and mobile route trees align and surface consistently.

Can I refactor SPA routes without breaking desktop and mobile navigation parity?

Yes, you can refactor SPA routes without breaking navigation parity by applying migration guidance that enforces lockstep updates between desktopRouter.config.tsx and desktopRouter.config.desktop.tsx during structural changes.

When do I need to update both desktop and mobile SPA router configuration files?

You need to update both desktop and mobile SPA router configuration files whenever you add, move, or refactor segments under src/routes, ensuring the corresponding route trees align across both platforms to prevent drift.