# 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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 423 installs · ★ 94
- Author: spences10
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/spences10/svelte-skills-kit/tree/HEAD/plugins/svelte-skills/skills/sveltekit-remote-functions/SKILL.md
- Updated: 2026-10-12
- HTML: https://affpapa.org/en/nevibecode/skills/sveltekit-remote-functions

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/sveltekit-remote-functions/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/sveltekit-remote-functions/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/sveltekit-remote-functions/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/sveltekit-remote-functions/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install spences10/svelte-skills-kit sveltekit-remote-functions
```

2. **Manually: put the files in place**
- File: `.github/skills/sveltekit-remote-functions/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/spences10/svelte-skills-kit --path plugins/svelte-skills/skills/sveltekit-remote-functions
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/sveltekit-remote-functions/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill sveltekit-remote-functions -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/spences10/svelte-skills-kit/tree/HEAD/plugins/svelte-skills/skills/sveltekit-remote-functions/SKILL.md

## When to use it
- 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
- 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

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [spences10/svelte-skills-kit](https://affpapa.org/en/nevibecode/by/spences10/svelte-skills-kit.md) — 6 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md