sveltekit-structure

SKILL.md

SvelteKit routing, layouts, error handling, and SSR structure guidance.

File-based routing with +page.svelte for pages, +layout.svelte for nested wrappers, +error.svelte for error boundaries, and +server.ts for API endpoints

Nested layouts apply to all child routes; use route groups with (name) folders to organize without affecting URLs

Error boundaries and pending UI patterns via +error.svelte placement and svelte:boundary component-level error/pending states

SSR and hydration guidance including browser-only code detection and client-side considerations

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