sveltekit-data-flow

Name: sveltekit-data-flow
Author: spences10

360installs2forks

How to install sveltekit-data-flow?

spences10/svelte-skills-kit/sveltekit-data-flow

$npx -y skills add spences10/svelte-skills-kit --skill sveltekit-data-flow

Installs into the current project.

Summary

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().

Files · 1

View on GitHub

SKILL.md

1	# SvelteKit Data Flow
2
3	## Quick Start
4
5	Which file? Server-only (DB/secrets): `+page.server.ts` \|
6	Universal (runs both): `+page.ts` \| API: `+server.ts`
7
8	Load decision: Need server resources? → server load \| Need client
9	APIs? → universal load
10
11	Form actions: Always `+page.server.ts`. Return `fail()` for
12	errors, throw `redirect()` to navigate, throw `error()` for failures.
13
14	## Example
15
16	```typescript
17	// +page.server.ts
18	import { fail, redirect } from '@sveltejs/kit';
19
20	export const load = async ({ locals }) => {
21	const user = await db.users.get(locals.userId);
22	return { user }; // Must be JSON-serializable
23	};
24
25	export const actions = {
26	default: async ({ request }) => {
27	const data = await request.formData();
28	const email = data.get('email');
29
30	if (!email) return fail(400, { email, missing: true });
31
32	await updateEmail(email);
33	throw redirect(303, '/success');
34	},
35	};
36	```
37
38	## Reference Files
39
40	- [load-functions.md](references/load-functions.md) - Server vs
41	universal
42	- [form-actions.md](references/form-actions.md) - Form handling
43	patterns
44	- [serialization.md](references/serialization.md) - What can/can't
45	serialize
46	- [error-redirect-handling.md](references/error-redirect-handling.md) -
47	fail/redirect/error
48	- [client-auth-invalidation.md](references/client-auth-invalidation.md) -
49	invalidateAll() after client-side auth
50
51	## Notes
52
53	- Server load → universal load via `data` param \| ALWAYS
54	`throw redirect()/error()`
55	- No class instances/functions from server load (not serializable)
56	- Last verified: 2025-01-11
57
58	<!--
59	PROGRESSIVE DISCLOSURE GUIDELINES:
60	- Keep this file ~50 lines total (max ~150 lines)
61	- Use 1-2 code blocks only (recommend 1)
62	- Keep description <200 chars for Level 1 efficiency
63	- Move detailed docs to references/ for Level 3 loading
64	- This is Level 2 - quick reference ONLY, not a manual
65
66	LLM WORKFLOW (when editing this file):
67	1. Write/edit SKILL.md
68	2. Format (if formatter available)
69	3. Run: npx skills add . --list
70	4. If the skill is not discovered, check SKILL.md frontmatter formatting
71	5. Validate again to confirm
72	-->

People who liked this also viewed

6 picks

Type

sveltekit-data-flow

360installs2forks

View on GitHub

How to install sveltekit-data-flow?

spences10/svelte-skills-kit/sveltekit-data-flow

$npx -y skills add spences10/svelte-skills-kit --skill sveltekit-data-flow

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# SvelteKit Data Flow
2
3	## Quick Start
4
5	Which file? Server-only (DB/secrets): `+page.server.ts` \|
6	Universal (runs both): `+page.ts` \| API: `+server.ts`
7
8	Load decision: Need server resources? → server load \| Need client
9	APIs? → universal load
10
11	Form actions: Always `+page.server.ts`. Return `fail()` for
12	errors, throw `redirect()` to navigate, throw `error()` for failures.
13
14	## Example
15
16	```typescript
17	// +page.server.ts
18	import { fail, redirect } from '@sveltejs/kit';
19
20	export const load = async ({ locals }) => {
21	const user = await db.users.get(locals.userId);
22	return { user }; // Must be JSON-serializable
23	};
24
25	export const actions = {
26	default: async ({ request }) => {
27	const data = await request.formData();
28	const email = data.get('email');
29
30	if (!email) return fail(400, { email, missing: true });
31
32	await updateEmail(email);
33	throw redirect(303, '/success');
34	},
35	};
36	```
37
38	## Reference Files
39
40	- [load-functions.md](references/load-functions.md) - Server vs
41	universal
42	- [form-actions.md](references/form-actions.md) - Form handling
43	patterns
44	- [serialization.md](references/serialization.md) - What can/can't
45	serialize
46	- [error-redirect-handling.md](references/error-redirect-handling.md) -
47	fail/redirect/error
48	- [client-auth-invalidation.md](references/client-auth-invalidation.md) -
49	invalidateAll() after client-side auth
50
51	## Notes
52
53	- Server load → universal load via `data` param \| ALWAYS
54	`throw redirect()/error()`
55	- No class instances/functions from server load (not serializable)
56	- Last verified: 2025-01-11
57
58	<!--
59	PROGRESSIVE DISCLOSURE GUIDELINES:
60	- Keep this file ~50 lines total (max ~150 lines)
61	- Use 1-2 code blocks only (recommend 1)
62	- Keep description <200 chars for Level 1 efficiency
63	- Move detailed docs to references/ for Level 3 loading
64	- This is Level 2 - quick reference ONLY, not a manual
65
66	LLM WORKFLOW (when editing this file):
67	1. Write/edit SKILL.md
68	2. Format (if formatter available)
69	3. Run: npx skills add . --list
70	4. If the skill is not discovered, check SKILL.md frontmatter formatting
71	5. Validate again to confirm
72	-->

People who liked this also viewed

6 picks

Type