Agent skill

sveltekit-data-flow

SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().

View SKILL.md on GitHub Repository
Stars 64
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/spences10/svelte-skills-kit/tree/main/plugins/svelte-skills/skills/sveltekit-data-flow

SKILL.md

SvelteKit Data Flow

Quick Start

Which file? Server-only (DB/secrets): +page.server.ts | Universal (runs both): +page.ts | API: +server.ts

Load decision: Need server resources? → server load | Need client APIs? → universal load

Form actions: Always +page.server.ts. Return fail() for errors, throw redirect() to navigate, throw error() for failures.

Example

typescript
// +page.server.ts
import { fail, redirect } from '@sveltejs/kit';

export const load = async ({ locals }) => {
	const user = await db.users.get(locals.userId);
	return { user }; // Must be JSON-serializable
};

export const actions = {
	default: async ({ request }) => {
		const data = await request.formData();
		const email = data.get('email');

		if (!email) return fail(400, { email, missing: true });

		await updateEmail(email);
		throw redirect(303, '/success');
	},
};

Reference Files

  • load-functions.md - Server vs universal
  • form-actions.md - Form handling patterns
  • serialization.md - What can/can't serialize
  • error-redirect-handling.md - fail/redirect/error
  • client-auth-invalidation.md - invalidateAll() after client-side auth

Notes

  • Server load → universal load via data param | ALWAYS throw redirect()/error()
  • No class instances/functions from server load (not serializable)
  • Last verified: 2025-01-11

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

spences10/svelte-skills-kit

sveltekit-structure

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

64 1
Explore
spences10/svelte-skills-kit

layerchart-svelte5

LayerChart Svelte 5 patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.

64 1
Explore
spences10/svelte-skills-kit

svelte-runes

Svelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.

64 1
Explore
spences10/svelte-skills-kit

svelte-deployment

Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.

64 1
Explore
spences10/svelte-skills-kit

svelte-styling

64 1
Explore
spences10/svelte-skills-kit

svelte-template-directives

64 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results