Help us improve
Share bugs, ideas, or general feedback.
Provides Svelte 5.0 knowledge patch on runes ($state, $derived, $effect, $props), snippets replacing slots, callback props for events, mount/hydrate API. Auto-loads for Svelte tasks.
npx claudepluginhub nevaberry/nevaberry-plugins --plugin svelte-knowledge-patchHow this skill is triggered — by the user, by Claude, or both
Slash command
/svelte-knowledge-patch:svelte-knowledge-patchThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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).
Provides examples for Svelte 5 runes ($state, $derived), bindable props, snippets, SvelteKit load functions and form actions, plus Svelte 4 migration guidance.
Guides Svelte 5 runes for reactive state ($state), derived values ($derived), effects ($effect), props ($props/$bindable), migration from Svelte 4, and common mistake prevention.
Svelte runes-first reactivity and SvelteKit fullstack conventions. Invoke whenever task involves any interaction with Svelte code — writing, reviewing, refactoring, debugging, or understanding .svelte, .svelte.js, .svelte.ts files and SvelteKit projects.
Share bugs, ideas, or general feedback.
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).
| 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 |
| 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 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>
<script>
let { label, count = 0, class: klass, ...rest } = $props();
let { value = $bindable('') } = $props(); // opt-in two-way binding
</script>
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>
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)} />
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'
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 }),
};
}
| 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 |