svelte-runes

spences10's avatarfrom spences10

Svelte runes guidance. Use for reactive state, props, effects, attachments, or migration. Covers $state, $derived, $effect, @attach. Prevents reactivity mistakes.

⭐107stars🔀8forks📁View on GitHub🕐Updated Jan 1, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill provides expert guidance on Svelte Runes, the modern reactivity system introduced in Svelte 5. It assists developers in implementing reactive state, derived values, and side effects using , , and , while ensuring best practices and preventing common reactivity pitfalls during development and migration.

Use Cases

  • Svelte 4 to 5 Migration: Efficiently transitioning legacy Svelte codebases to the new Runes API by identifying equivalent patterns and avoiding syntax mixing errors.
  • Reactive State Management: Implementing deeply reactive objects and arrays using to simplify complex component logic and state synchronization.
  • Performance Optimization: Utilizing for efficient computed values and for managed side effects to ensure optimal rendering performance and clean code architecture.
  • Component API Design: Defining robust and type-safe component interfaces using and patterns for clearer data flow between parent and child components.
namesvelte-runes
# IMPORTANTKeep description on ONE line for Claude Code compatibility
descriptionSvelte runes guidance. Use for reactive state, props, effects, attachments, or migration. Covers $state, $derived, $effect, @attach. Prevents reactivity mistakes.

Svelte Runes

Quick Start

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). Don't mix Svelte 4/5 syntax. Objects/arrays are deeply reactive by default.

Example

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

Reference Files

Notes

  • Use onclick not on:click, {@render children()} in layouts
  • $derived can be reassigned (5.25+) - use const for read-only
  • Last verified: 2025-01-11