Skills / Engineering / SvelteKit Applications

SvelteKit Applications

Build fast, modern web apps with SvelteKit. Covers routing, load functions, form actions, server vs client data flow, SSR/CSR/prerender adapters, and Svelte 5 runes for reactive state.

This skill implements SvelteKit apps end to end: filesystem routing, universal and server load functions, progressive-enhancement form actions, hooks, endpoints, and adapter configuration for static or serverless deploys. It uses Svelte 5 runes ($state, $derived, $effect) for reactivity.

sveltekit svelte ssr runes routing

When to use

Use when building a SvelteKit app, adding load functions or form actions, structuring server vs client data, configuring adapters for deploy, or migrating to Svelte 5 runes.

Examples

Form action with validation

Progressive enhancement

Create a SvelteKit form action for a signup form with server-side validation and use:enhance for progressive enhancement, returning field errors

Data loading

Server load with caching

Write a SvelteKit server load function that fetches a paginated product list with cache headers and streams it to a +page.svelte grid
Added to wishlist