Agent skill
sveltekit-remote-functions
SvelteKit remote functions guidance. Use for command(), query(), form() patterns in .remote.ts files.
Install this agent skill to your Project
npx add-skill https://github.com/spences10/svelte-skills-kit/tree/main/plugins/svelte-skills/skills/sveltekit-remote-functions
SKILL.md
SvelteKit Remote Functions
Quick Start
File naming: *.remote.ts for remote function files
Which function? One-time action → command() | Repeated reads →
query() | Forms → form()
Example
// 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' });
Reference Files
- references/remote-functions.md - Complete guide with all patterns
Notes
- Remote functions execute on server when called from browser
- Args/returns must be JSON-serializable
- Schema validation via StandardSchemaV1 (Valibot/Zod)
getRequestEvent()available for cookies/headers access- In components: No-param
query()works with{#await}. Parameterized queries with$derivedreturn Query objects — use.ready/.currentor$derived(await ...)with experimental async - Warning:
<svelte:boundary>+{@const await}causes infinite navigation loops with shared queries (sveltejs/svelte#17717) - Refresh queries: Call
query().refresh()- updates without flicker - Polling safety: Always
.catch()onquery().refresh()in intervals — errors reject the Promise and evict the query from cache - Last verified: 2026-02-21
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
sveltekit-data-flow
SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().
sveltekit-structure
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
layerchart-svelte5
LayerChart Svelte 5 patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.
svelte-runes
Svelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.
svelte-deployment
Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.
svelte-styling
Didn't find tool you were looking for?