using-remote-functions - SKILL.md Agent Skill

name: using-remote-functions description: 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.

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