Menu
Implement Svelte 5 runes correctly. Use for reactive state, props, effects, $state.raw, $derived.by, $props, and $bindable.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Coordinate parallel agent work. Use when decomposing complex tasks, running review/implementation in parallel, managing task lists, or choosing shared vs isolated workspaces.
Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.
SvelteKit data flow guidance. Use when working with load functions, form actions, server/client boundaries, serialization, or invalidation.
Implement SvelteKit remote functions. Use for query(), query.live(), form(), command(), and prerender() patterns in .remote.ts files.
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
Svelte 5 core best practices. Use when creating, editing, or reviewing .svelte, .svelte.ts, or .svelte.js files. Routes to deeper Svelte skills.
| name | svelte-runes |
| description | Implement Svelte 5 runes correctly. Use for reactive state, props, effects, $state.raw, $derived.by, $props, and $bindable. |
| metadata | {"last_updated":"2026-05-14","verified_against":"Svelte 5 official docs and current local skill refresh"} |
Which rune? Props: $props() | Bindable: $bindable() |
Computed: $derived() | Side effect: $effect() | State: $state()
Key rules: Runes are top-level only. $derived can be overridden
(use const for read-only). Objects/arrays are deeply reactive by
default; use $state.raw for large data replaced wholesale.
<script>
let count = $state(0); // Mutable state
const doubled = $derived(count * 2); // Computed (const = read-only)
$effect(() => {
console.log(`Count is ${count}`); // Side effect
});
</script>
<button onclick={() => count++}>
{count} (doubled: {doubled})
</button>
For
@attachand other template directives, see the svelte-template-directives skill.
onclick, and {@render children()} in layouts$derived can be reassigned (5.25+) - use const for read-onlycreateContext over setContext/getContext for type safety$inspect.trace to debug reactivity issues$derived.by for multi-line derivations$effect; effects are an escape hatchif (browser)