Organize SPA routes in src/routes/ and features in src/features/.
npx skills add https://github.com/dodevproject/lobe-chat --skill spa-routes-dodevproject
Please help me install this Agent Skill. Skill: spa-routes Source: https://github.com/dodevproject/lobe-chat/tree/main/.agents/skills/spa-routes Command: npx skills add https://github.com/dodevproject/lobe-chat --skill spa-routes-dodevproject
This Skill provides a clear, organized structure for Single Page Application (SPA) routes and features, ensuring maintainability and scalability by defining where different types of code should reside.
src/routes/ (page segments) and src/features/ (business logic and UI by domain).Follow the guidelines in this skill to add a new feature route to the application.
High-intent search queries and answers about installing and using this skill.
Organize SPA routes and features by separating page segments in `src/routes/` from domain-oriented business logic and UI in `src/features/`. This architectural pattern ensures maintainability and scalability by defining clear file placement rules based on component responsibility.
In a single page application, route files in `src/routes/` act as thin page segment wrappers, while feature files in `src/features/` contain domain-oriented business logic and UI. This separation dictates whether a component should be a route wrapper or a reusable feature module.
To add a new route to your SPA architecture, create a new page segment file in `src/routes/` and integrate it with the necessary domain logic from `src/features/`. Follow the file organization guidelines to determine if the component is a thin wrapper or a feature module.
Place a component in `src/routes/` if it serves as a thin page segment wrapper, or in `src/features/` if it contains reusable, domain-oriented business logic and UI. Deciding file placement depends entirely on the component's architectural responsibility.
Yes, this SPA routing pattern works without specific frontend dependencies as it defines a clear architectural pattern for organizing code organization rather than relying on external libraries. It provides structural guidelines for any single page application project.
Fr-e-dAnalyze project directory structures to generate architectural summaries.
kingmacthOrganize SPA routes and features with thin wrappers and domain boundaries.
bongrealtyArchitect React component logic with state machines, data flow, and error handling.
duranserkanGuide DRN-style Domain-Driven Design architecture with tiered layer and dependency rules.