skills.rest
OpenSourceAGI
OpenSourceAGIOFFICIAL
Explore all skills by this author →
GitHub

spa-routes

Guides route and feature organization for LobeHub SPA router architecture.

74|11|Updated Jul 4, 2024
Search Tags:#react#routing#code organization#lazy loading#electron#vite#spa
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill spa-routes-opensourceagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spa-routes
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/apps/qwk-in-lobe/.agents/skills/spa-routes
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill spa-routes-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents architectural drift when editing the LobeHub SPA by enforcing the roots-vs-features split, keeping route files thin and business logic in domain feature folders. ## Core Features & Use Cases - Route placement rules: Defines exactly what belongs in src/routes/ (thin layouts, pages, dynamic segments) versus src/features/ (domain UI and logic). - Shared desktop router governance: Explains how to register routes in desktopRouter.shared.tsx versus the thin Web and Electron adapter configs. - Skeleton registration: Requires every lazy route to register a RouteSegmentSkeleton via handle.meta.Skeleton and keep it in sync with page layout changes. - Use Case: When adding a new settings tab, register it in both componentMap.ts with dynamic() and componentMap.desktop.ts with a sync import so the sync test passes. ## Quick Start Add a new SPA route under src/routes following the spa-routes skill, delegating all implementation to a feature folder and registering its skeleton.

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 route in a React SPA with feature folders?▼

Create only thin segment files under src/routes (layout, page, dynamic segments), implement the UI and logic in a domain folder under src/features, and register the route in the shared router config with a lazy loader and skeleton.

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

src/routes holds only page segments that import and compose, while src/features contains all business logic, hooks, and domain UI organized by feature name. Route files must stay thin and delegate to features.

How do .desktop.tsx file variants work with Vite?▼

Vite's resolver swaps in a <name>.desktop.tsx sibling for Electron builds in place of the base file. When editing a base file, you must apply the equivalent change to its .desktop variant in the same commit to avoid drift.

Why does my lazy route show the wrong loading skeleton?▼

Skeletons resolve via handle.meta.Skeleton with deepest match winning, falling back to path-guessing only as a last resort. Register an explicit skeleton on the route's routeMeta and update it whenever the page layout changes.

When should I add a route to the shared router versus a platform adapter?▼

Add common Web/Electron routes to desktopRouter.shared.tsx with their preload groups. Use the thin desktopRouter.config.tsx or desktopRouter.config.desktop.tsx adapters only for genuine platform-only differences.

Related Skills

Explore More Software Engineering Skills→
haotoolhaotool
2

vite-react-best-practices

Document Vite and React SPA deployment, caching, and performance rules.

Official
Advanced
madlado87madlado87

feature-architecture

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

Community
Intermediate
TrebuchetDynamicsTrebuchetDynamics
9

gormes-tdd-slice

Prove a single Gormes behavior with red-green-refactor tests.

Official
Intermediate
lespacemanlespaceman
4

router-core/code-splitting

Implement automatic and manual code-splitting for TanStack Router routes.

Community
Advanced