skills.rest
exceptionless
exceptionlessOFFICIAL
Explore all skills by this author →
Website𝕏@ExceptionlessGitHub

frontend-architecture

Organize Svelte SPA project structure with feature slices and route groups.

2.5k|507|Updated Feb 7, 2014
Search Tags:#architecture#frontend#project structure#svelte#code organization#spa
One-click install
npx skills add https://github.com/exceptionless/Exceptionless --skill frontend-architecture-exceptionless
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-architecture
Source: https://github.com/exceptionless/Exceptionless/tree/main/.agents/skills/frontend-architecture
Command: npx skills add https://github.com/exceptionless/Exceptionless --skill frontend-architecture-exceptionless

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a clear and organized structure for Svelte Single Page Applications (SPAs), making it easier to manage project files, components, and routes, especially as the application grows.

Core Features & Use Cases

  • Directory Structure Guidance: Understand and maintain a logical organization for features, shared components, utilities, and generated code.
  • Route Management: Implement effective route grouping for authentication and layout purposes.
  • Feature Slicing: Organize code vertically by feature for better maintainability.
  • API Client Pattern: Centralize API call logic within feature slices.
  • Use Case: When adding a new feature like user profile management, this skill helps you decide exactly where to place the API calls, components, models, and validation schemas within the src/lib/features/ directory.

Quick Start

Use the frontend-architecture skill to understand where to place new components within the Svelte SPA's client application directory.

Frequently Asked Questions about frontend-architecture

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

FAQPage Schema
How do I organize a Svelte SPA project structure as it scales?▼

To organize a Svelte SPA project structure, implement vertical feature slicing for domain code, centralize API client logic within feature slices, and use barrel exports to maintain modularity as the application grows.

What is vertical slicing in frontend architecture?▼

Vertical slicing in frontend architecture organizes code by feature rather than technical type, grouping API calls, components, models, and validation schemas together within `src/lib/features/` to improve maintainability.

Where should I place API calls and components when adding a new feature to a Svelte SPA?▼

When adding a new feature to a Svelte SPA, place API calls, components, models, and validation schemas inside a dedicated feature slice directory under `src/lib/features/` to keep code organization consistent.

How do I manage route grouping for authentication and layouts in a Svelte SPA?▼

Manage Svelte SPA route grouping by structuring route directories based on authentication requirements and layout purposes, effectively separating protected routes from public ones within the client application.

Does this frontend architecture convention require any specific dependencies?▼

This frontend architecture convention requires no specific external dependencies, providing structural guidance for feature slices, barrel exports, and API client patterns directly within your existing Svelte SPA directory layout.

Related Skills

Explore More Software Engineering Skills→
salemazielsalemaziel

project-conventions

Define project directory structures, file naming conventions, and working standards.

Community
Basic
chohra-medchohra-med
28

mobilelauncher

Generate Expo React Native features with TypeScript strict and Restyle conventions.

Community
Intermediate
EmmanuelkwaaEmmanuelkwaa
1

new-page

Generate SvelteKit frontend pages with routing, i18n, and permission checks.

Community
Intermediate
AshenDulsankaAshenDulsanka
4

tdd

Implement TDD workflows with red-green-refactor cycles and vertical slicing.

Community
Intermediate