Sveltekit Structure

This is your reference for SvelteKit's file-based routing conventions and layout system. Covers the plus-file naming scheme (+page.svelte, +layout.svelte, +error.svelte, +server.ts), nested layouts with the children render pattern, and SSR/hydration gotchas. Honestly most useful when you're setting up a new SvelteKit project or debugging why your layout isn't applying where you expect. The quick start shows the route-to-URL mapping and a basic layout structure. Reference files drill into error boundaries, the svelte:boundary component for pending states, and how to handle browser-only code. Saves you from constantly checking the SvelteKit docs for file naming rules.

skills.sh installs: 1.1K
GitHub stars: 95
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add spences10/svelte-skills-kit --skill sveltekit-structure --agent claude-code

Installs into .claude/skills of the current project.

Files

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>