mcpField
S
sveltekit-data-flow

sveltekit-data-flow

github.com/spences10Development94496 installsUpdated 2w ago
Repository

About sveltekit-data-flow

A data-flow reference skill for SvelteKit developers, explaining how to choose load functions, form actions, and error handling. It also covers serialization rules and invalidating data after client-side authentication changes.

Key features

  1. 01Distinguishing server and universal load functions
  2. 02Handling submissions with form actions
  3. 03Managing outcomes with fail, redirect, and error
  4. 04Explaining data serialization limits
  5. 05Refreshing data after client-side authentication

Use cases

  1. 01Choosing where page data should be loaded
  2. 02Implementing form submissions with error handling
  3. 03Avoiding non-serializable server load data
  4. 04Invalidating page data after authentication changes

Install

Copy the command and run it in a terminal.

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

After installing, type/sveltekit-data-flowin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

README.md
references/
client-auth-invalidation.md
error-redirect-handling.md
form-actions.md
load-functions.md
serialization.md

Details

From the project README

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

// +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

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

Comments

Markdown supported