spa-routes
LobeHub SPA route architecture. Use when editing src/routes, src/features delegation, desktop/mobile/popup router configs, .desktop variants, route segments, redirects, or new pages.
Profile →npx skills add lobehub/lobehub --skill spa-routes --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 / fold
- When to Use This Skill
- 1. What Belongs in src/routes/ (roots)
- 2. What Belongs in src/features/
- 3. How to Add a New SPA Route
- 3a. Shared desktop route definition and platform adapters
- 3b. Other .desktop.{ts,tsx} variants inside src/routes/
- 4. How to Divide Files (route vs feature)
- 5. Progressive Migration (existing code)
- 6. Reference Structure (after Phase 1)
What does the spa-routes skill do?
LobeHub SPA route architecture. Use when editing src/routes, src/features delegation, desktop/mobile/popup router configs, .desktop variants, route segments, redirects, or new pages.
How do I install it?
Run `npx skills add lobehub/lobehub --skill spa-routes --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From lobehub/lobehub, a repository with 81,252 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.