skills.rest
SmallAi-API
SmallAi-APICOMMUNITY
Explore all skills by this author →
WebsiteGitHub

spa-routes

Organizes SPA routes and page segments across web, desktop, and mobile routers.

Updated Jan 27, 2026
Search Tags:#frontend architecture#react#routing#code organization#lazy loading#electron#spa
One-click install
npx skills add https://github.com/SmallAi-API/smaihub --skill spa-routes-smallai-api
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spa-routes
Source: https://github.com/SmallAi-API/smaihub/tree/main/.agents/skills/spa-routes
Command: npx skills add https://github.com/SmallAi-API/smaihub --skill spa-routes-smallai-api

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It resolves confusion about where new SPA routes, layouts, and page components belong by enforcing a strict roots-vs-features split between src/routes/ and src/features/. ## Core Features & Use Cases - Route placement rules: Defines exactly which thin files (layouts, page entries, dynamic segments) belong in src/routes/ and which domain logic belongs in src/features/. - Shared desktop router guidance: Explains how to register common Web/Electron routes once in desktopRouter.shared.tsx while keeping the two platform adapter configs thin. - Skeleton registration: Requires every lazy route to register a RouteSegmentSkeleton via handle.meta so loading states never render blank panes. - Use Case: When adding a new settings page, create thin segment files under src/routes/(main)/settings/, implement the UI in src/features/Settings/, register the route in desktopRouter.shared.tsx, and attach a surface skeleton. ## Quick Start Ask the agent to add a new SPA route for a feature and have it place the thin route files, feature implementation, router registration, and skeleton in the correct locations.

Frequently Asked Questions about spa-routes

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

FAQPage Schema
How do I add a new SPA route in a React project?▼

Create thin segment files (layout and page entries) under the correct route group in src/routes/, implement the UI in src/features/<Domain>/, then register the route in the shared router config with a lazy loader and a skeleton.

What is the difference between src/routes and src/features folders?▼

src/routes/ holds only page segments: thin layout and page entry files that import and compose. src/features/ holds the actual business logic, hooks, and domain UI organized by feature name, not by route path.

How do I share routes between web and Electron desktop apps?▼

Define common paths, nesting, metadata, and lazy loaders once in a shared router file, then mount it from thin web and Electron adapter configs. Only genuine platform differences go into the adapters.

Why does my lazy route show a blank page while loading?▼

The route is missing a Skeleton in its route metadata. Lazy routes resolve their loading UI from handle.meta.Skeleton, so register a generic surface skeleton or a bespoke component on the route or its parent.

When should I create a .desktop.tsx variant of a route file?▼

Only when the web and Electron implementations genuinely diverge, such as different store wiring or popup guards. Prefer a single base file with platform-aware code, and always keep paired variants updated together.

Related Skills

Explore More Software Engineering Skills→
zmh13928433602-syszmh13928433602-sys

spa-routes

Maintain SPA route parity between desktop and mobile router configs.

Community
Intermediate
madlado87madlado87

feature-architecture

Organize Next.js projects into feature-based architecture with barrel exports.

Community
Intermediate
OpenSourceAGIOpenSourceAGI
74

spa-routes

Guides route and feature organization for LobeHub SPA router architecture.

Official
Intermediate
rezicsrezics
6

virtual-file-routes

Build programmatic route trees for TanStack Router with virtual file routes.

Official
Intermediate