skillby spences10
remote-functions
Use when building, auditing, or reviewing SvelteKit remote functions for validation, batching, and optimistic UI patterns
Installs: 0
Used in: 1 repos
Updated: 8h ago
$
npx ai-builder add skill spences10/remote-functionsInstalls to .claude/skills/remote-functions/
# Remote Functions
## Quick Start
```ts
/// file: src/routes/counter/count.remote.ts
import * as v from 'valibot'
import { query, command } from '$app/server'
let count = 0
export const getCount = query(async () => count)
export const increment = command(
v.object({ delta: v.optional(v.number(), 1) }),
async ({ delta = 1 }) => {
count += delta
getCount().set(count) // keep cached query in sync without extra fetch
},
)
```
Trigger optimistic single-flight updates via
`increment({ delta: 1 }).updates(getCount().withOverride((n = 0) => n + 1))`
inside the component.
## Core Principles
- Validate every argument with a Standard Schema; use
`getRequestEvent` for auth/cookies but never treat
`route/params/url` as an authorization boundary.
- Queries are cached promises — refresh, `set`, or `withOverride` them
explicitly from commands/forms to prevent stale UI and redundant
roundtrips.
## Common Patterns
### Single-flight optimistic mutations
Pair a `command`/`form` with its sibling `query`: perform the
mutation, then call `query.refresh()`/`set()` or
`.updates(query.withOverride(...))` so the UI updates once per
request, even with high latency.
## Reference Files
For detailed documentation, see:
- [references/remote-functions-overview.md](references/remote-functions-overview.md)
- [references/remote-functions-demos.md](references/remote-functions-demos.md)
## Notes
- Prefer `form` for progressive enhancement; reserve `command` for
imperative or cross-component workflows.
- Use `query.batch` for n+1 scenarios (e.g., weather demo) and
`prerender({ inputs, dynamic })` for data that should be cached at
build time yet remain opt-in for runtime refreshes.
<!--
PROGRESSIVE DISCLOSURE GUIDELINES:
- Keep this file ~50 lines total (max ~150 lines)
- Use 1-2 code blocks only (recommend 1)
- Keep description <200 chars for Level 1 efficiency
- Move detailed docs to references/ for Level 3 loading
- This is Level 2 - quick reference ONLY, not a manual
LLM WORKFLOW (when editing this file):
1. Write/edit SKILL.md
2. Format (if formatter available)
3. Run: claude-skills-cli validate <path>
4. If multi-line description warning: run claude-skills-cli doctor <path>
5. Validate again to confirm
-->Quick Install
$
npx ai-builder add skill spences10/remote-functionsDetails
- Type
- skill
- Author
- spences10
- Slug
- spences10/remote-functions
- Created
- 3d ago