Agent skill · software engineering · lobehub
spa-routes
Use for SPA routes and page segments: Web/desktop/mobile/popup routers, redirects and src/routes-to-features boundaries.
Why this skill is useful
Provides specific architectural patterns and routing configurations for SPA development that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 81,352 stars on the source repository.
What this skill does
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 with src/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: File / folder Purpose --------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------ layout/index.tsx or layout.tsx Layout for this segment: wrap with <Outlet />, optional shell (e.g. sidebar + main). Should be thin: prefer re-exporting or composing from @/features/. index.tsx or page.tsx Page entry for this segment. Only import from features and render; no business logic. [param]/index.tsx (e.g. [id], [cronId]) Dynamic segment page. Same rule: thin, delegate to features. Rule: Route files should only import and compose. No new features/ folders or heavy components inside src/routes/. --- 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills lobehub/spa-routes