using-remote-functions
Outlines configuration, query handling, and data mapping for implementing SvelteKit component-level Remote Functions.
Install
mkdir -p .claude/skills/using-remote-functions && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4964" && unzip -o skill.zip -d .claude/skills/using-remote-functions && rm skill.zipInstalls to .claude/skills/using-remote-functions
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Create SvelteKit components using Remote Functions for type-safe client-server communication. Use when building components that need to fetch data, submit forms, or execute server commands. Remote Functions work at the component level, not page level.Key capabilities
- →Define type-safe server-side Remote Functions
- →Execute component-level data fetching with query functions
- →Handle server-side form submissions
- →Map server-side data types directly to Svelte components
How it works
It enables an experimental configuration flag in SvelteKit to allow server-side code execution triggered directly from UI components.
Inputs & outputs
When to use using-remote-functions
- →Fetching data in Svelte components
- →Handling form submissions
- →Executing server-side commands
- →Implementing remote-first architecture
About this skill
Using Remote Functions
Remote Functions are a SvelteKit feature for type-safe client-server communication. They run on the server but can be called from any component.
Key Concepts
- Component-level: Unlike load functions, Remote Functions work in any component
- Type-safe: Full TypeScript support between client and server
- Progressive enhancement: Forms work without JavaScript
- Experimental: Requires config flags (see below)
Configuration
Add to svelte.config.js:
const config = {
kit: {
experimental: {
remoteFunctions: true
}
},
compilerOptions: {
experimental: {
async: true // Optional: enables await in components
}
}
}
Remote-First Architecture
Put as little as possible in +page.svelte, as much as possible in data.remote.ts.
Build final data structures server-side. Pages should be pure renderers that map types to components.
See REMOTE-FIRST.md for patterns and examples.
Four Types of Remote Functions
| Type | Purpose | Reference |
|---|---|---|
query | Read dynamic data | QUERY.md |
form | Handle form submissions | FORM.md |
command | Programmatic mutations, avoid if possible. Always prefer form | COMMAND.md |
prerender | Static data at build time | (not covered) |
Combining Functions
For refreshing queries after mutations, see SINGLE-FLIGHT.md.
Code Templates
For starter code blocks, see TEMPLATES.md.
When to Use Remote Functions vs Load Functions
Use Remote Functions when:
- Data is needed at the component level, not page level
- You want colocated data fetching with the component
- Building reusable components with their own data needs
Use Load Functions when:
- Never
When not to use it
- →When the project requires classic Load functions for page-level data
- →When the project cannot enable experimental configuration flags
Prerequisites
Limitations
- →Experimental feature; API may change
- →Requires explicit experimental configuration in svelte.config.js
How it compares
It promotes a remote-first architecture where data logic lives in components rather than page-load pipelines.
Compared to similar skills
using-remote-functions side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| using-remote-functions (this skill) | 1 | 7mo | No flags | Advanced |
| svelte-ui-design | 23 | 9mo | No flags | Intermediate |
| tanstack-form | 16 | 2mo | No flags | Intermediate |
| tanstack-query | 7 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by svelte-society
View all by svelte-society →You might also like
svelte-ui-design
XIYO
ALWAYS use this skill for ANY Svelte component styling, design, or UI work. Svelte 5 UI design system using Tailwind CSS 4, Skeleton Labs design tokens/presets/Tailwind Components, and Bits UI headless components. Covers class composition, color systems, interactive components, forms, overlays, and all visual design.
tanstack-form
exceptionless
TanStack Form with Zod validation in Svelte 5. Form state management, field validation, error handling, and ProblemDetails integration. Keywords: TanStack Form, createForm, Field, form validation, zod schema, form errors, onSubmit, onSubmitAsync, problemDetailsToFormErrors
tanstack-query
exceptionless
Data fetching and caching with TanStack Query in Svelte. Query patterns, mutations, cache invalidation, WebSocket-driven updates, and optimistic updates. Keywords: createQuery, createMutation, TanStack Query, query keys, cache invalidation, optimistic updates, refetch, stale time, @exceptionless/fetchclient, WebSocket
svelte
EpicenterHQ
Svelte 5 patterns including TanStack Query mutations, shadcn-svelte components, and component composition. Use when writing Svelte components, using TanStack Query, or working with shadcn-svelte UI.
svelte-migrate
temporalio
Migrate a Svelte 4 component to Svelte 5 runes syntax. Use when asked to migrate, convert, or upgrade a .svelte file to Svelte 5.
admin-crud-page
svelte-society
Create admin dashboard pages with tables, forms, and actions