🎯

sveltekit-data-flow

🎯Skill

from spences10/svelte-claude-skills

VibeIndex|
What it does

Guides SvelteKit developers through optimal data flow strategies, load function selection, form actions, and server-client data handling patterns.

πŸ“¦

Part of

spences10/svelte-claude-skills(7 items)

sveltekit-data-flow

Installation

Add MarketplaceAdd marketplace to Claude Code
/plugin marketplace add spences10/claude-code-toolkit
Add MarketplaceAdd marketplace to Claude Code
/plugin marketplace add spences10/svelte-skills-kit
Install PluginInstall plugin from marketplace
/plugin install toolkit-skills@spences10-claude-code-toolkit
Install PluginInstall plugin from marketplace
/plugin install svelte-skills@spences10-svelte-skills-kit
git cloneClone repository
git clone https://github.com/yourusername/svelte-claude-skills.git ~/.claude/skills/svelte

+ 1 more commands

πŸ“– Extracted from docs: spences10/svelte-claude-skills
5Installs
-
AddedFeb 4, 2026

Skill Details

SKILL.md

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

Overview

# 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](references/load-functions.md) - Server vs

universal

  • [form-actions.md](references/form-actions.md) - Form handling

patterns

  • [serialization.md](references/serialization.md) - What can/can't

serialize

  • [error-redirect-handling.md](references/error-redirect-handling.md) -

fail/redirect/error

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