From svelte-skills
Guides SvelteKit remote functions with command() for actions, query() for reads, form() for forms in .remote.ts files, including validation, caching, and reactivity.
How this skill is triggered — by the user, by Claude, or both
Slash command
/svelte-skills:sveltekit-remote-functionsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**File naming:** `*.remote.ts` for remote function files
File naming: *.remote.ts for remote function files
Which function? One-time action → command() | Repeated reads →
query() | Forms → form()
// actions.remote.ts
import { command } from "$app/server";
import * as v from "valibot";
export const delete_user = command(
v.object({ id: v.string() }),
async ({ id }) => {
await db.users.delete(id);
return { success: true };
},
);
// Call from client: await delete_user({ id: '123' });
getRequestEvent() available for cookies/headers accessquery() works with {#await}. Parameterized queries with $derived return Query objects — use .ready/.current or $derived(await ...) with experimental async.current/.error/.loading/.ready only work in reactive contexts (component top-level, $derived, $effect). Outside (event handlers, universal load), use .run() insteadonMount for client-only queries, not browser guards<svelte:boundary> + {@const await} causes infinite navigation loops with shared queries (sveltejs/svelte#17717).updates() accepts query functions (getPosts) or instances. Server must opt-in via requested() from $app/serverquery().refresh() - updates without flicker. No-op if no cached instance.catch() on query().refresh() in intervals — errors reject the Promise and evict the query from cachevoid (not await) for .refresh() inside command/form handlersnpx claudepluginhub spences10/svelte-skills-kit --plugin svelte-skillsSvelte runes-first reactivity and SvelteKit fullstack conventions. Invoke whenever task involves any interaction with Svelte code — writing, reviewing, refactoring, debugging, or understanding .svelte, .svelte.js, .svelte.ts files and SvelteKit projects.
Enforces Svelte 5 best practices in SvelteKit: runes ($state, $derived, $effect), $props(), $bindable(), load functions, form actions, and SSR patterns to fix outdated Svelte 4 code.
Builds full-stack SvelteKit web apps with file-based routing, SSR, SSG, API routes, form actions, and load functions. Activates for +page.svelte, +layout.svelte, or Svelte full-stack queries.