Svelte Knowledge Patch Skill

Svelte Knowledge Patch

Claude Opus 4.6 knows Svelte through 4.x and SvelteKit through 1.x. It is unaware of the features below, which cover Svelte 5.0 (released 2024-10-22).

Index

| Topic | Reference | Key features | |---|---|---| | Runes | references/runes.md | $state, $state.raw, $state.snapshot, $derived, $derived.by, $effect, $effect.pre, $props, $bindable, $inspect | | Snippets & events | references/snippets-and-events.md | {#snippet}, {@render}, children prop, callback props, mount/hydrate/unmount, Component type |

Quick Reference: Svelte 4 to 5 Migration

| Svelte 4 | Svelte 5 | |---|---| | let count = 0 (top-level) | let count = $state(0) | | $: doubled = count * 2 | let doubled = $derived(count * 2) | | $: { sideEffect() } | $effect(() => { sideEffect() }) | | export let name | let { name } = $props() | | export let value + bind:value | let { value = $bindable() } = $props() | | <slot /> | {@render children?.()} with let { children } = $props() | | <slot name="header" /> | {@render header()} with let { header } = $props() | | <slot item={entry} /> + let:item | {@render item(entry)} + {#snippet item(data)}...{/snippet} | | on:click={handler} | onclick={handler} | | on:click\|preventDefault | onclick={(e) => { e.preventDefault(); handler(e) }} | | createEventDispatcher() | Callback props: let { onclick } = $props() | | <svelte:component this={C} /> | <C /> (dynamic by default) | | new Component({ target }) | mount(Component, { target }) | | $$props / $$restProps | let props = $props() / let { ...rest } = $props() |

Runes

Runes are $-prefixed compiler instructions for reactivity. They work in .svelte, .svelte.js, and .svelte.ts files.

<script>
  // Reactive state
  let count = $state(0);
  let items = $state([{ text: 'hello' }]); // deeply reactive

  // Computed values
  let doubled = $derived(count * 2);

  // Side effects (browser-only, runs after DOM update)
  $effect(() => {
    document.title = `Count: ${count}`;
    return () => { /* cleanup */ };
  });
</script>

<button onclick={() => count++}>
  {count} (doubled: {doubled})
</button>

Props and bindings

<script>
  let { label, count = 0, class: klass, ...rest } = $props();
  let { value = $bindable('') } = $props(); // opt-in two-way binding
</script>

Snippets

Replace slots with {#snippet} and {@render}:

<!-- Card.svelte -->
<script>
  let { title, children, footer } = $props();
</script>
<div class="card">
  <h2>{title}</h2>
  {@render children?.()}
  {#if footer}
    <div class="footer">{@render footer()}</div>
  {/if}
</div>

<!-- Usage -->
<Card title="Hello">
  <p>Default content goes here</p>
  {#snippet footer()}
    <button>OK</button>
  {/snippet}
</Card>

Events

Event handlers are regular properties. No more on: directive or createEventDispatcher.

<button onclick={handler}>Click</button>

Components accept callback props:

<!-- Child -->
<script>
  let { onchange } = $props();
</script>
<input onchange={(e) => onchange?.(e.target.value)} />

Component API

Components are functions. Use mount, hydrate, unmount from 'svelte':

import { mount, unmount } from 'svelte';
import App from './App.svelte';
const app = mount(App, { target: document.body, props: { name: 'world' } });
// unmount(app, { outro: true });

SSR: import { render } from 'svelte/server'

Shared Reactive Logic

Use .svelte.js / .svelte.ts files for runes outside components:

// store.svelte.js
export function createTodos() {
  let items = $state([]);
  return {
    get items() { return items },
    add: (text) => items.push({ text, done: false }),
  };
}

Reference Files

| File | Contents | |---|---| | runes.md | $state, $state.raw, $state.snapshot, $derived, $derived.by, $effect, $effect.pre, $props, $bindable, $inspect, .svelte.js files | | snippets-and-events.md | {#snippet}, {@render}, children prop, event properties, callback props, mount/hydrate/unmount, Component type, migration |

Agent Skills: Svelte Knowledge Patch

Install this agent skill to your local

Skill Files