From svelte-skills
Guides SvelteKit data flow: load functions in +page.server.ts vs +page.ts, form actions, server/client data handling, serialization, fail(), redirect(), error(), invalidateAll().
npx claudepluginhub spences10/svelte-skills-kit --plugin svelte-skillsThis skill uses the workspace's default tool permissions.
**Which file?** Server-only (DB/secrets): `+page.server.ts` |
Provides expert SvelteKit guidance for full-stack apps with Svelte 5 runes ($state, $derived), SSR, form actions (+page.server.ts), load functions, and adapters like adapter-vercel.
Enforces Svelte 5 best practices in SvelteKit: runes ($state, $derived, $effect), $props(), $bindable(), load functions, form actions, and SSR patterns to fix outdated Svelte 4 code.
Build full-stack web applications with SvelteKit: file-based routing, SSR, SSG, API routes, form actions, and load functions.
Share bugs, ideas, or general feedback.
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.
// +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');
},
};
data param | ALWAYS
throw redirect()/error()