svelte

Develops Svelte 5 and SvelteKit 2 applications with runes, routing, and server data flows.

22|Updated Sep 10, 2026
One-click install
npx skills add https://github.com/Lynricsy/HyperSkills --skill svelte-lynricsy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte
Source: https://github.com/Lynricsy/HyperSkills/tree/main/skills/svelte
Command: npx skills add https://github.com/Lynricsy/HyperSkills --skill svelte-lynricsy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Svelte 5's runes reactivity model and SvelteKit 2's server/client boundary introduce subtle failure modes — silently non-reactive effects, cross-request state leaks, secrets serialized into HTML, and broken form actions — that compile fine but fail in production. This Skill encodes the invariants, migration paths, and verification gates needed to write, review, debug, and migrate Svelte and SvelteKit code correctly. ## Core Features & Use Cases - 25 enforced core rules: Covers runes reactivity ($state, $derived, $effect tracking traps), component composition (snippets, attachments, keyed each), SvelteKit data loading (universal vs server load, devalue serialization, invalidation), form actions, cookies, auth placement, and SSR state isolation. - Five gated workflows: implement-component, implement-route, migrate-to-runes, debug-reactivity, and review-svelte, each ending in a verifiable gate such as a clean svelte-autofixer and sv check run. - Eight topic references: Deep documentation on reactivity, templates, state sharing and SSR, routing, forms and mutations, hooks and deployment, testing with Vitest browser mode, and Svelte 4→5 / SvelteKit 1→2→3 migration tables. - Use Case: A developer ports a Svelte 4 dashboard to Svelte 5. The Skill maps each legacy construct ($:, export let, createEventDispatcher, slots, stores) to its runes equivalent, flags the judgement calls sv migrate cannot make, and verifies the result with the official autofixer. ## Quick Start Ask the agent to review your SvelteKit route files or migrate a Svelte 4 component to runes, and it will apply the svelte skill's rules and verification gates.

Frequently Asked Questions about svelte

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

FAQPage Schema
How do I migrate a Svelte 4 component to Svelte 5 runes?▼

Run npx sv migrate svelte-5 on a clean git tree, then resolve what the script leaves behind: convert $: assignment blocks to $derived rather than $effect, replace createEventDispatcher with callback props, turn slots into snippets rendered with {@render children()}, and set compilerOptions.runes last so leftovers become compile errors.

Why does my Svelte 5 effect stop re-running?▼

The usual causes are dependency tracking traps: optional chaining like chart?.update(scheme) never registers scheme when chart is nullish, state read after an await falls outside the tracking scope, and destructuring snapshots a value. Read every dependency unconditionally before branching or awaiting.

What is the difference between universal load and server load in SvelteKit?▼

A universal load in +page.js runs in both the browser and on the server, so it cannot import server-only modules and must guard window or localStorage with browser from $app/environment. A server load in +page.server.js runs only on the server and can read secrets, but its return value is serialized into the HTML.

Does SvelteKit serialize load return values as JSON?▼

No, SvelteKit uses devalue, so Date, Map, Set, BigInt, RegExp, and cyclical references cross the boundary intact without stringifying. Class instances are the exception: they need a transport transporter registered in hooks, or should be flattened to plain data.

Why is module-scope state dangerous in a SvelteKit app?▼

A server process is shared by every visitor, so a mutable let at module scope in +page.server.js or a .svelte.js module leaks one user's data to the next. Per-user state belongs in a cookie plus database read through event.locals, or in context scoped to the request's component tree.

When should I use form actions versus remote functions in SvelteKit?▼

Form actions are stable and feature-complete, so default to them for existing projects. Remote functions (SvelteKit 2.27+) are still experimental and require opting into kit.experimental.remoteFunctions plus compilerOptions.experimental.async, which changes effect ordering app-wide, so recommend them only for new projects that accept API churn.