sveltekit

Installation
SKILL.md

Think in SvelteKit

SvelteKit is not just Svelte with folders. It is an application boundary system: route files define ownership of data, server code stays on the server, form submissions progressively enhance, and redirects/errors are part of control flow.

The core failure mode: writing SvelteKit like a client-side SPA with incidental server helpers. Fetching server-owned data from components. Hiding auth in hooks and assuming layouts protect endpoints. Returning class instances from load. Calling redirect() without throwing. Building JavaScript-only forms when native forms plus actions would work. These work until SSR, progressive enhancement, caching, or security boundaries matter.

Use this skill for app-level SvelteKit decisions. Use svelte5 for component internals: runes, snippets, component props, DOM events, accessibility, transitions, and component state.

How SvelteKit Thinks

Routes own application boundaries

1. File names are behavior. +page.svelte, +layout.server.ts, +page.server.ts, and +server.ts are not organization trivia; they decide where code runs and who can call it. See references/file-naming.md.

2. Route groups organize policy, not URLs. (app) and (auth) are for layout/auth/data boundaries without changing paths. Put protected routes under a protected layout; keep login/signup outside that group. See references/layout-patterns.md.

3. Layouts protect pages, not endpoints. A protected +layout.server.ts gates child pages. It does not protect sibling or child +server.ts endpoints; every endpoint must enforce auth itself. See references/auth.md.

Data flow should reveal ownership

Related skills
Installs
6
GitHub Stars
14
First Seen
Mar 16, 2026