svelte

REQUIRED BACKGROUND: You MUST also follow the core frontend-fundamentals and clean-code skills. This skill adds SvelteKit-specific conventions on top.

svelte

Layer contract (matches structure.tree)

Layer	May import	Never
+page.svelte / components	$lib components + stores, load data via props	fetch in setup, server-only modules, secrets
+page.ts / +layout.ts (universal)	the injected fetch, public env	$env/static/private, db clients, secrets
+page.server.ts / +server.ts (server)	db clients, private env, secrets	DOM, browser-only APIs
$lib/stores/*.ts	svelte/store primitives	route modules, load results
hooks.server.ts	private env, the logger	per-route business logic

Components stay presentational — data arrives as props from a load function — so a fetch swap is a load-layer-only change and the component is unit-testable without a network.

Routing & layout

• File-based routing only — a route is a directory under routes/ with a +page.svelte; never hand-wire a client router. Dynamic segments: routes/users/[id]/+page.svelte.
• +layout.svelte owns shared shell (nav, error boundary) and renders the page via {@render children()}; keep it a shell, not a logic host.

Load functions (data ownership)

• +page.ts / +layout.ts (universal) run on server then client — use the injected fetch, never the bare global (it double-fetches on hydration and skips SvelteKit's relative-URL + cookie handling).
• +page.server.ts / +layout.server.ts run server-only — the place for db clients, $env/static/private, and any secret. Their return value is serialized to the client, so never return a secret from a server load.
• A component never fetches in its <script> body; data flows in through the load result as data props.

Stores & state

• Local component state first ($state / plain let); cross-component state in $lib/stores as writable/derived, one store per file, per the state-management skill hierarchy — no module-level mutable singletons.
• Subscribe with the $store auto-subscription in components; never manually .subscribe() without unsubscribing.
• Do not mutate a store from inside a load function — load returns data, stores hold client state.