sveltekit-structure

spences10's avatarfrom spences10

SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.

⭐107stars🔀8forks📁View on GitHub🕐Updated Jan 1, 2026
[Architecture Design]

When & Why to Use This Skill

This Claude skill provides expert guidance on SvelteKit project architecture, focusing on directory-based routing, nested layouts, and server-side rendering (SSR) strategies. It helps developers implement best practices for file naming conventions, error handling via +error.svelte, and hydration management to build scalable, high-performance web applications.

Use Cases

  • 1. Routing & Directory Structure: Designing complex URL hierarchies and dynamic routes using SvelteKit's filesystem-based routing system.
  • 2. Nested Layout Management: Implementing shared UI components and state across multiple pages using hierarchical +layout.svelte files.
  • 3. Error Boundary Implementation: Setting up robust error handling at both the route and component levels using +error.svelte and svelte:boundary.
  • 4. SSR and Hydration Optimization: Configuring server-side rendering and client-side hydration patterns to balance SEO requirements with interactive performance.
  • 5. API & Server Logic Integration: Organizing backend logic and API endpoints within the SvelteKit structure using +server.ts files.
namesveltekit-structure
# IMPORTANTKeep description on ONE line for Claude Code compatibility
descriptionSvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.

SvelteKit Structure

Quick Start

File types: +page.svelte (page) | +layout.svelte (wrapper) | +error.svelte (error boundary) | +server.ts (API endpoint)

Routes: src/routes/about/+page.svelte → /about | src/routes/posts/[id]/+page.svelte → /posts/123

Layouts: Apply to all child routes. +layout.svelte at any level wraps descendants.

Example

src/routes/
├── +layout.svelte              # Root layout (all pages)
├── +page.svelte                # Homepage /
├── about/+page.svelte          # /about
└── dashboard/
    ├── +layout.svelte          # Dashboard layout (dashboard pages only)
    ├── +page.svelte            # /dashboard
    └── settings/+page.svelte   # /dashboard/settings

<!-- +layout.svelte -->
<script>
	let { children } = $props();
</script>

<nav><!-- Navigation --></nav>
<main>{@render children()}</main>
<footer><!-- Footer --></footer>

Reference Files

Notes

  • Layouts: {@render children()} | Errors: +error.svelte above failing route
  • Groups: (name) folders don't affect URL | Client-only: check browser
  • Last verified: 2025-01-11