svelte-remote-functions

Create type-safe .remote.ts files for SvelteKit client-server communication.

Updated Dec 29, 2025
One-click install
npx skills add https://github.com/justEstif/sv-100-hours-tracker --skill svelte-remote-functions
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: svelte-remote-functions
Source: https://github.com/justEstif/sv-100-hours-tracker/tree/main/.opencode/skill/svelte-remote-functions
Command: npx skills add https://github.com/justEstif/sv-100-hours-tracker --skill svelte-remote-functions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Remote functions enable type-safe client-server communication in a SvelteKit app. They reduce runtime errors by validating data contracts between the client and server and streamline data fetching, forms, and mutations.

Core Features & Use Cases

  • Query: Read dynamic data from the server with type-safe validation.
  • Form: Submit forms with server-side validation and handling.
  • Command: Perform server mutations (create, update, delete) from the client.
  • Prerender: Pre-fetch and cache static data at build time for faster pages.
  • Use Case: Build dashboards that fetch user data, submit updates, and reflect changes with minimal boilerplate.

Quick Start

Install and enable remote functions in your SvelteKit project, then create sample files like src/routes/data.remote.ts using query, form, command, and prerender. Run the dev server to test type-safe endpoints.

Frequently Asked Questions about svelte-remote-functions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create type-safe server mutations in SvelteKit?

SvelteKit enables type-safe server mutations through remote functions created in .remote.ts files. You use the command helper to execute operations like create, update, or delete while maintaining strict data validation between client and server.

What is the best way to handle form submission with server-side validation in SvelteKit?

Handling form submissions in SvelteKit is streamlined using the form helper within remote functions. It submits forms with server-side validation and handling directly from your client code, reducing boilerplate and ensuring data contract integrity.

How do I fetch dynamic data from the server with type safety in SvelteKit?

Fetch dynamic data with type safety in SvelteKit by using the query helper in your .remote.ts files. This remote function validates the data contracts between client and server, ensuring the data structure is strictly enforced during retrieval.

Can I pre-fetch and cache static data at build time in SvelteKit?

Yes, you can pre-fetch and cache static data at build time in SvelteKit using the prerender helper. This remote function caches data during the build process to generate faster, static pages without runtime server queries.

Do I need to enable remote functions in svelte.config.js to use them?

Yes, you must enable remote functions by setting remoteFunctions in your svelte.config.js file. This configuration is required before creating .remote.ts or .remote.js files to handle data fetching, forms, and server mutations.