Agent skill

svelte-remote-functions

Use SvelteKit remote functions (query, form, command, prerender) for type-safe client-server communication, data fetching, form handling, and mutations.

Stars 0
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/justEstif/sv-100-hours-tracker/tree/main/.opencode/skill/svelte-remote-functions

Metadata

Additional technical details for this skill

audience
developers
workflow
sveltekit-development

SKILL.md

SvelteKit Remote Functions

Remote functions enable type-safe client-server communication in SvelteKit. They run on the server but can be called from anywhere in your app.

When to Use This Skill

  • Creating .remote.ts or .remote.js files
  • Type-safe data fetching from components
  • Form handling with schema validation
  • Server-side mutations (likes, updates, deletes)
  • Prerendering static data at build time

Function Types

Function Purpose Returns
query Read dynamic data Promise-like with refresh()
query.batch Batched queries (n+1 solution) Promise-like
form Form submissions with validation Spreadable form attributes
command Programmatic mutations Promise
prerender Static data at build time Cached Promise-like

Configuration

Enable in svelte.config.js:

js
const config = {
  kit: {
    experimental: {
      remoteFunctions: true,
    },
  },
  compilerOptions: {
    experimental: {
      async: true, // Optional: enables await in components
    },
  },
};

Basic Pattern

ts
// src/routes/data.remote.ts
import * as v from "valibot";
import { query, form, command } from "$app/server";

export const getItems = query(async () => {
  // fetch from database
});

export const getItem = query(v.string(), async (id) => {
  // validated id parameter
});

export const createItem = form(v.object({ name: v.string() }), async (data) => {
  // handle form submission
});

export const deleteItem = command(v.string(), async (id) => {
  // handle mutation
});

Full Documentation

Use the svelte-mcp skill and fetch documentation with section kit/remote-functions for complete API reference, form fields, validation, single-flight mutations, and advanced patterns.

Expand your agent's capabilities with these related and highly-rated skills.

justEstif/sv-100-hours-tracker

svelte-mcp

Use the Svelte MCP server tools for Svelte 5 and SvelteKit documentation, code analysis, and playground links

0 0
Explore
justEstif/sv-100-hours-tracker

brand-guidelines

Apply the 100 Hours Tracker "Lazy Lofi" brand styling to UI components, pages, and design elements. Use when creating or modifying any visual elements in the application.

0 0
Explore
justEstif/sv-100-hours-tracker

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

0 0
Explore
justEstif/dotfiles

philosophy-software-design

Apply "A Philosophy of Software Design" (John Ousterhout) principles to code review and architectural design. Dual mode — reviews existing code for design quality AND advises on new module/API/abstraction design. Use when reviewing code, refactoring modules, designing APIs or abstractions, discussing architecture decisions, or when explicitly asked to apply software design principles. Triggers on code reviews, refactoring tasks, module/API design, architecture discussions, and explicit requests like "review software design", "check design quality", "apply philosophy of software design", "review design complexity", "check module depth".

0 0
Explore
justEstif/dotfiles

qry-search

Web search using qry, a terminal-native agent-first search CLI that routes queries through pluggable adapters and always outputs JSON. Use this skill whenever you need to search the web for documentation, APIs, error messages, package info, changelogs, or any current information. Triggers on "search the web", "look up", "find docs for", "what's the latest version of", "check if X exists", or whenever current information is needed. Prefer this over ddgr or other search tools when qry is available.

0 0
Explore
justEstif/dotfiles

defuddle

Extract clean markdown content from web pages using Defuddle CLI, removing clutter and navigation to save tokens. Use instead of curl, or WebFetch when the user provides a URL to read or analyze, for online documentation, articles, blog posts, or any standard web page.

0 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results