菜单
SvelteKit data flow guidance. Use when working with load functions, form actions, server/client boundaries, serialization, or invalidation.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | sveltekit-data-flow |
| description | SvelteKit data flow guidance. Use when working with load functions, form actions, server/client boundaries, serialization, or invalidation. |
| metadata | {"last_updated":"2026-06-08","verified_against":"Svelte 5/Kit docs and sveltejs/kit#15934"} |
Environment variables: Prefer explicit env vars (src/env.ts + $app/env/private|public) when the experimental flag is enabled.
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()$app/env/private is server-only; only mark genuinely safe values as publicCoordinate parallel agent work. Use when decomposing complex tasks, running review/implementation in parallel, managing task lists, or choosing shared vs isolated workspaces.
Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.
Implement SvelteKit remote functions. Use for query(), query.live(), form(), command(), and prerender() patterns in .remote.ts files.
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
Svelte 5 core best practices. Use when creating, editing, or reviewing .svelte, .svelte.ts, or .svelte.js files. Routes to deeper Svelte skills.
Build Svelte LayerChart components. Use for tooltip snippets, Chart context access, gradients, highlights, axes, and Svelte 5 snippet patterns.