Skip to main content
skill CX Codex

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a claude-code
Open on GitHub

What 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() and command() for a given case
  • write a posts.remote.ts file with valibot validation
  • 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.ts with a query() for the post list and a command() 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-code

2Manually: put the files in place

~/.claude/skills/sveltekit-remote-functions/SKILL.md

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

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.

Similar skills

Everything for Frontend and UI →

From the same set6

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor