spa-routes

Standardize SPA route definitions across desktop and mobile router configurations.

Updated Apr 6, 2026
One-click install
npx skills add https://github.com/mabdulrauf/wazone-back --skill spa-routes-mabdulrauf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: spa-routes
Source: https://github.com/mabdulrauf/wazone-back/tree/main/.agents/skills/spa-routes
Command: npx skills add https://github.com/mabdulrauf/wazone-back --skill spa-routes-mabdulrauf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SPA projects often suffer from inconsistent route structures and drift between desktop/mobile router configurations, leading to navigation issues and blank screens during builds. This skill provides a standardized guide to keep src/routes, src/spa/router, and related files in sync.

Core Features & Use Cases

  • Enforces parity between desktopRouter.config.tsx and desktopRouter.config.desktop.tsx during edits.
  • Clarifies roots vs features in src/routes/ and the placement of logic in src/features/.
  • Provides a repeatable pattern for adding, refactoring, and registering SPA routes across platforms.

Quick Start

Follow this guide when adding a new SPA route to ensure parity and correct routing behavior.

Frequently Asked Questions about spa-routes

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

FAQPage Schema
Why do I get blank screens after adding a new SPA route?

Blank screens usually happen when desktop and mobile router configurations drift. Enforcing parity between desktopRouter.config.tsx and desktopRouter.config.desktop.tsx prevents navigation drift by keeping route registration synchronized across platform builds.

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

Follow a standardized pattern that clarifies roots versus features in src/routes/ and places logic in src/features/. This ensures consistent import paths, layout responsibilities, and registration logic across desktop and mobile configurations.

What is the correct directory structure for SPA routing features?

SPA routing structure separates route definitions in src/routes from feature logic in src/features. This distinction clarifies layout responsibilities and aligns root directories to prevent navigation drift across desktop and mobile platforms.

How do I keep desktop and mobile router configurations in sync?

Keeping desktop and mobile router configurations in sync requires enforcing parity between desktopRouter.config.tsx and desktopRouter.config.desktop.tsx. Standardizing import paths and registration logic across both files prevents navigation drift and blank screens.

Do I need to update both router config files when refactoring SPA routes?

Yes, refactoring SPA routes requires updating both router config files to maintain parity. Safeguarding desktopRouter.config.tsx and desktopRouter.config.desktop.tsx during edits prevents inconsistent route structures and navigation drift.