skill CX Codex

sveltekit-data-flow — Claude Code skill: what it does, how to install

Q: How do I install sveltekit-data-flow in Claude Code?

Run `npx skills add spences10/svelte-skills-kit --skill sveltekit-data-flow -a claude-code`. Alternatively, save the skill file directly to `~/.claude/skills/sveltekit-data-flow/SKILL.md`.

Q: What cannot be returned from a server load function?

Any data returned from `+page.server.ts` must be serializable to JSON. You cannot return class instances or functions to the client.

Teaches your AI coding assistant proper SvelteKit data flow patterns, from form actions and load functions to serialization and cache invalidation.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add spences10/svelte-skills-kit --skill sveltekit-data-flow -a claude-code

Open on GitHub

What sveltekit-data-flow does

This skill guides coding agents through SvelteKit data management conventions. It instructs the assistant when to isolate code in +page.server.ts, when to rely on universal +page.ts scripts, and when to create +server.ts endpoints. Sensitive database logic stays strictly on the server side.

The instructions specify standard handling for form submissions, handling validation errors via fail() while requiring throw redirect() and throw error() for status navigation. Server load outputs must remain JSON-serializable: attempting to return class instances or functions from +page.server.ts breaks the contract.

What it helps with

pick the appropriate file between +page.server.ts, +page.ts, and +server.ts
implement form actions returning fail() and redirecting with throw redirect()
avoid non-serializable objects inside server load functions
trigger cache refreshes with invalidateAll() after client authentication

Example prompts for the agent

Set up a SvelteKit form action that validates inputs and redirects on success
Refactor this data fetch into +page.server.ts so database secrets stay hidden
Show how to invalidate page data using invalidateAll after client sign-in

How to install sveltekit-data-flow

1Skills CLI (Vercel)

npx skills add spences10/svelte-skills-kit --skill sveltekit-data-flow -a claude-code

2Manually: put the files in place

~/.claude/skills/sveltekit-data-flow/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/sveltekit-data-flow/

1Skills CLI (Vercel)

npx skills add spences10/svelte-skills-kit --skill sveltekit-data-flow -a codex

2Manually: put the files in place

.agents/skills/sveltekit-data-flow/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add spences10/svelte-skills-kit --skill sveltekit-data-flow -a cursor

2Manually: put the files in place

.cursor/skills/sveltekit-data-flow/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install spences10/svelte-skills-kit sveltekit-data-flow

2Manually: put the files in place

.github/skills/sveltekit-data-flow/SKILL.md

1Skills CLI (Vercel)

npx skills add spences10/svelte-skills-kit --skill sveltekit-data-flow -a gemini-cli

2Platform CLI

gemini skills install https://github.com/spences10/svelte-skills-kit --path plugins/svelte-skills/skills/sveltekit-data-flow

Manually: put the files in place

.devin/skills/sveltekit-data-flow/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add spences10/svelte-skills-kit --skill sveltekit-data-flow -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about sveltekit-data-flow

How do I install sveltekit-data-flow in Claude Code?

Run npx skills add spences10/svelte-skills-kit --skill sveltekit-data-flow -a claude-code. Alternatively, save the skill file directly to ~/.claude/skills/sveltekit-data-flow/SKILL.md.

What does sveltekit-data-flow do?

It provides guidelines for handling SvelteKit data pipelines. The agent learns how to structure server and universal load functions, process form actions, and manage errors accurately.

What cannot be returned from a server load function?

Any data returned from +page.server.ts must be serializable to JSON. You cannot return class instances or functions to the client.

Similar skills

Everything for Frontend and UI →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set4

svelte-runes Guides coding agents on Svelte 5 runes without mixing legacy syntax. It helps set up reactive state, derived values, effects, and component props. CX Codex +1 1,000installs sveltekit-structure Tells the agent how to lay out routes, nested layouts and error boundaries in SvelteKit. Useful once a project grows and files start to blur. CX Codex +1 1,000installs svelte-components Tells your agent how to build Svelte components: headless libraries, custom elements, and forms that cannot wrap their inputs. CX Codex +1 531installs