home / skills / trevors / dot-claude / svelte5

svelte5 skill

safe

/skills/svelte5

This skill helps you write Svelte 5 components correctly by using runes and avoiding outdated Svelte 4 patterns.

npx playbooks add skill trevors/dot-claude --skill svelte5

Review the files below or copy the command above to add this skill to your agents.

Files (4)

SKILL.md

3.8 KB

---
name: svelte5
description: Svelte 5 syntax reference. Use when writing ANY Svelte component. Svelte 5 uses runes ($state, $derived, $effect, $props) instead of Svelte 4 patterns. Training data is heavily Svelte 4—this skill prevents outdated syntax.
---

# Svelte 5 Syntax

Always use Svelte 5 runes. Never use Svelte 4 patterns.

## Svelte 4 → Svelte 5

| Svelte 4 ❌                    | Svelte 5 ✅                                            |
| ------------------------------ | ------------------------------------------------------ |
| `export let foo`               | `let { foo } = $props()`                               |
| `export let foo = 'default'`   | `let { foo = 'default' } = $props()`                   |
| `$: doubled = x * 2`           | `let doubled = $derived(x * 2)`                        |
| `$: { sideEffect() }`          | `$effect(() => { sideEffect() })`                      |
| `on:click={handler}`           | `onclick={handler}`                                    |
| `on:input={handler}`           | `oninput={handler}`                                    |
| `on:click\|preventDefault={h}` | `onclick={e => { e.preventDefault(); h(e) }}`          |
| `<slot />`                     | `{@render children()}`                                 |
| `<slot name="x" />`            | `{@render x?.()}`                                      |
| `$$props`                      | Use `$props()` with rest: `let { ...rest } = $props()` |
| `$$restProps`                  | `let { known, ...rest } = $props()`                    |
| `createEventDispatcher()`      | Pass callback props: `let { onchange } = $props()`     |

## Stores → Runes

| Svelte 4 ❌                               | Svelte 5 ✅             |
| ----------------------------------------- | ----------------------- |
| `import { writable } from 'svelte/store'` | Remove import           |
| `const count = writable(0)`               | `let count = $state(0)` |
| `$count` (auto-subscribe)                 | `count` (direct access) |
| `count.set(1)`                            | `count = 1`             |
| `count.update(n => n + 1)`                | `count += 1`            |

## Quick Reference

```svelte
<script>
  // Props (with defaults and rest)
  let { required, optional = 'default', ...rest } = $props();

  // Two-way bindable prop
  let { value = $bindable() } = $props();

  // Reactive state
  let count = $state(0);
  let items = $state([]);      // arrays are deeply reactive
  let user = $state({ name: '' }); // objects too

  // Derived values
  let doubled = $derived(count * 2);
  let complex = $derived.by(() => {
    // multi-line logic here
    return expensiveCalc(count);
  });

  // Side effects
  $effect(() => {
    console.log(count);
    return () => cleanup(); // optional cleanup
  });
</script>

<!-- Events: native names, no colon -->
<button onclick={() => count++}>Click</button>
<input oninput={e => value = e.target.value} />

<!-- Render snippets (replaces slots) -->
{@render children?.()}
```

## Snippets (Replace Slots)

```svelte
<!-- Parent passes snippets -->
<Dialog>
  {#snippet header()}
    <h1>Title</h1>
  {/snippet}

  {#snippet footer(close)}
    <button onclick={close}>Done</button>
  {/snippet}
</Dialog>

<!-- Child renders them -->
<script>
  let { header, footer, children } = $props();
</script>
{@render header?.()}
{@render children?.()}
{@render footer?.(() => open = false)}
```

## References

Load these when needed:

- **[references/typescript.md](references/typescript.md)** — Typing props, state, derived, snippets, events, context
- **[references/patterns.md](references/patterns.md)** — Context API, controlled inputs, forwarding props, async data, debouncing
- **[references/gotchas.md](references/gotchas.md)** — Reactivity edge cases, effect pitfalls, binding quirks

Overview

This skill is a concise Svelte 5 syntax reference for writing any Svelte component using the new rune-based API. It ensures you use $state, $derived, $effect, and $props instead of legacy Svelte 4 patterns. Use it to prevent outdated syntax and to convert mental models from stores and slots to runes and render snippets.

How this skill works

The skill inspects component code patterns and provides the correct Svelte 5 equivalents, focusing on props, reactive values, side effects, events, and snippet rendering. It replaces store imports and auto-subscription idioms with $state and direct assignments, converts reactive statements to $derived, and maps slots to {@render} snippets. It also shows proper $props usage for defaults and rest props.

When to use it

When authoring or refactoring any Svelte component to Svelte 5
When converting Svelte 4 store and $: reactive code to runes
When defining props with defaults, two-way bindables, or rest props
When replacing slots with render snippets and snippet APIs
When updating event handlers from on:click syntax to native attributes

Best practices

Always declare props via let { ... } = $props() so defaults and rest are explicit
Use let state = $state(initial) for reactive state; assign directly instead of .set/.update
Use let derived = $derived(expr) or $derived.by(fn) for multi-line computations
Wrap side effects in $effect(() => { ... }) and return cleanup functions when needed
Prefer passing callbacks as props instead of createEventDispatcher()

Example use cases

Replace export let foo = 'x' with let { foo = 'x' } = $props() in component headers
Convert writable stores to local state: const count = writable(0) → let count = $state(0)
Replace $: reactive assignments with let doubled = $derived(x * 2)
Swap slot usage for render snippets: <slot/> → {@render children?.()}
Handle native events without colon: on:click → onclick with e.preventDefault inline

FAQ

How do I handle multiple derived values with complex logic?

Use $derived.by(() => { /* multi-line logic */ return result; }) for readable, multi-step computations.

How do I forward unknown props or collect rest props?

Destructure $props(): let { known, ...rest } = $props() and spread rest onto elements as needed.