sveltekit-remote-functions — Claude Code skill for SvelteKit remote functions
Teaches your agent the query(), form(), command() and prerender() patterns for *.remote.ts files. Useful once remote functions are switched on in your SvelteKit app.
npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a claude-codeWhat sveltekit-remote-functions does
The skill covers the four remote function types and picks the right one for the job: query() for dynamic reads, form() for progressive forms, command() for mutations from event handlers, prerender() for data that barely changes between deploys. Exports live in *.remote.ts or *.remote.js files, placed anywhere under src apart from src/lib/server.
It also collects the rules that trip people up. Arguments and return values travel through devalue, so functions, class instances, symbols, circular references and RegExp are out. Exposed inputs get validated with a Standard Schema library such as valibot, zod or arktype, unless you deliberately reach for .unchecked. Reads that would fan out into n+1 calls can go through query.batch(). Client-side refreshes only happen when the server handler opts in with requested(queryFn, limit) — and that limit argument is not optional.
Remote functions are still experimental, with the skill pinned to SvelteKit 2.58.0. You need experimental.remoteFunctions in svelte.config.js, plus compilerOptions.experimental.async if you want await inside components. Skip those flags and the guidance is moot: the code will not compile.
What it helps with
- decide between
query(),form()andcommand()for a given case - write a
posts.remote.tsfile withvalibotvalidation - kill n+1 reads when loading a filtered list
- build a form that still submits without JavaScript
- refresh client data after a mutation with
.updates()
Example prompts for the agent
- Write
posts.remote.tswith aquery()for the post list and acommand()to create one - Convert this form to
form()with progressive enhancement - Add
query.batch()here so we stop hitting n+1
How to install sveltekit-remote-functions
1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a claude-code2Manually: put the files in place
~/.claude/skills/sveltekit-remote-functions/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/sveltekit-remote-functions/
1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a codex2Manually: put the files in place
.agents/skills/sveltekit-remote-functions/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a cursor2Manually: put the files in place
.cursor/skills/sveltekit-remote-functions/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install spences10/svelte-skills-kit sveltekit-remote-functions2Manually: put the files in place
.github/skills/sveltekit-remote-functions/SKILL.md1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a gemini-cli2Platform CLI
gemini skills install https://github.com/spences10/svelte-skills-kit --path plugins/svelte-skills/skills/sveltekit-remote-functionsManually: put the files in place
.devin/skills/sveltekit-remote-functions/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about sveltekit-remote-functions
How do I install sveltekit-remote-functions in Claude Code?
Run npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a claude-code. The skill file lands at ~/.claude/skills/sveltekit-remote-functions/SKILL.md.
What does sveltekit-remote-functions do?
It gives the agent rules and examples for SvelteKit remote functions: query(), form(), command() and prerender() inside *.remote.ts files.
Does my project need any config for this?
Yes. Remote functions are experimental, so svelte.config.js needs experimental.remoteFunctions, and compilerOptions.experimental.async if you use await in components.