SPA Route Structure
Maps web, desktop and mobile routers, redirects and feature boundaries.
Install
npx skills add lobehub/lobehub --skill spa-routes -g -a claude-code -y- Repository
- lobehub/lobehub83.7k
- Category
- Engineering
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Use for SPA routes and page segments: Web/desktop/mobile/popup routers, redirects and src/routes-to-features boundaries.
SPA Routes and Features Guide
SPA structure:
src/spa/, Entry points (entry.web.tsx,entry.mobile.tsx,entry.desktop.tsx) and router config (router/). Router lives here to avoid confusion withsrc/routes/.src/routes/, Page segments only (roots).src/features/, Business logic and UI by domain.
This project uses a roots vs features split: src/routes/ only holds page segments; business logic and UI live in src/features/ by domain.
Agent constraint, shared desktop router: Common Web/Electron paths, nesting, metadata, lazy loaders, and preload groups belong in src/spa/router/desktopRouter.shared.tsx. The two desktopRouter.config* files are thin platform adapters; change them only for genuine runtime differences. Do not duplicate a common route in both adapters.
When to Use This Skill
- Adding a new SPA route or route segment
- Defining or refactoring layout/page files under
src/routes/ - Moving route-specific components or logic into
src/features/ - Deciding where to put a new component (route folder vs feature folder)
1. What Belongs in src/routes/ (roots)
Each route directory should contain only:
