Agent-Skills.md

Agent Skills: Svelte 5 Syntax

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.

UncategorizedID: TrevorS/dot-claude/svelte5

Repository

TrevorS/dot-claude
TrevorS
2

Skill Files

Browse the full folder contents for svelte5.

Download Skill

Loading file tree…

skills/svelte5/SKILL.md

Skill Metadata

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

<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)

<!-- 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: