sveltekit

Context skill for SvelteKit applications using a feature-slice architecture with Svelte 5 runes.

Philosophy

Features live in libs/feature-X/ and each owns its view models (Zod schemas), services (data transforms), components (pure UI), and a server.ts entry called from +page.server.ts. Routes under apps/web/src/routes/ are thin: they call the feature's server function, pass data to components, and own form actions. The app shell owns layout, navigation, and session helpers. This layering keeps route files small and makes features independently testable.

Recipes

Foundation — understand the system before building pieces:

• SvelteKit App Architecture — the route → feature → view model → component flow
• Feature-Slice Architecture — directory layout, view models, services, and public API
• Building the App Shell — layout variants, snippet-based content projection, shared overlays

Building blocks:

• Writing Composable Svelte 5 Components — one concern per component, derived state, named snippets
• UI Components vs Feature Components — when to use ui/ vs feature/, cross-feature rules
• shadcn-svelte, bits-ui, and tailwind-variants — component registry, variants, global CSS rules

Data layer:

• HTTP Service Clients — OpenAPI-typed clients, generated schemas, shared middleware
• Data Transformation with View Models — always call .parse(), never inline-construct return objects
• Server-Side Remote Functions — query and command primitives, calling from load functions and components

Forms and actions:

• Building Forms in a Feature Lib — *FormContent components, use:enhance in routes
• Typing Form Action Results — discriminated union types, satisfies operator, single source of truth

Auth:

• Auth Sessions with JWT Cookies — stateless JWT sessions, per-call authorization, checkAuthorized

Svelte 5 patterns:

• Reactive State from Props in Svelte 5 — seeding $state from $props without the state_referenced_locally warning
• Dynamic Components in Svelte 5 — replacing deprecated <svelte:component> with native tag syntax

Quality:

• Accessibility Patterns for Svelte — roles, label associations, keyboard handlers, focus management

Config:

• SvelteKit Config and Build Adapters — adapter-node, env vars, Tailwind v4, Vitest split, Docker

References

• SvelteKit documentation
• Svelte 5 runes