Sveltekit Structure

spences10/svelte-skills-kit/plugins/svelte-skills/skills/sveltekit-structure

by spences102a9d88379bf62cee464a16db852edda7790a58f5No licenseListed Oct 9, 2026Updated Oct 9, 2026

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

Instructions onlySoftware Development

AI-generated overview

Reference guidance for structuring SvelteKit apps: routing, layouts, error handling, SSR and hydration.

What it does: Provides quick-reference guidance on SvelteKit project structure, including file types such as +page.svelte, +layout.svelte, +error.svelte and +server.ts, and how routes map to URLs. It explains nested layouts, route groups, error boundary placement, component-level error and pending UI, and SSR versus browser-only code. Detailed material lives in reference files on file naming, layout patterns, error handling, svelte:boundary and SSR/hydration.
When to use it: Use when organizing or reviewing a SvelteKit codebase, deciding where files and layouts belong, or troubleshooting routing, error boundary, SSR and hydration behavior. It suits questions about SvelteKit conventions rather than general JavaScript or framework-agnostic work. It is a reference, not an automated code generator or checker.
Requirements: No scripts or tools required; it is instructions and reference documents only.

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

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

svelte

<!-- +layout.svelte --><script>	let { children } = $props();</script>
<nav><!-- Navigation --></nav><main>{@render children()}</main><footer><!-- Footer --></footer>

<!-- +layout.svelte --><script>	let { children } = $props();</script>
<nav><!-- Navigation --></nav><main>{@render children()}</main><footer><!-- Footer --></footer>

Reference Files

file-naming.md [blocked] - File naming conventions
layout-patterns.md [blocked] - Nested layouts
error-handling.md [blocked] - +error.svelte placement
svelte-boundary.md [blocked] - Component-level error/pending
ssr-hydration.md [blocked] - SSR and browser-only code

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

Source and attribution

Source:spences10/svelte-skills-kitinplugins/svelte-skills/skills/sveltekit-structureat commit2a9d883

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Sveltekit Structure

SvelteKit Structure

Quick Start

Example

Reference Files

Notes

Source and attribution

More from spences10/svelte-skills-kit

Sveltekit Data Flow

Svelte Runes

Svelte Components

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices