Agent skill

svelte-runes

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

View SKILL.md on GitHub Repository
Stars 64
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/spences10/svelte-skills-kit/tree/main/plugins/svelte-skills/skills/svelte-runes

SKILL.md

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

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

  • reactivity-patterns.md - When to use each rune
  • migration-gotchas.md - Svelte 4→5 translation
  • component-api.md - $props, $bindable patterns
  • snippets-vs-slots.md - New snippet syntax
  • common-mistakes.md - Anti-patterns with fixes

For @attach and other template directives, see the svelte-template-directives skill.

Notes

  • Use onclick not on:click, {@render children()} in layouts
  • $derived can be reassigned (5.25+) - use const for read-only
  • Use createContext over setContext/getContext for type safety
  • Use $inspect.trace to debug reactivity issues
  • Last verified: 2026-03-12

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

spences10/svelte-skills-kit

sveltekit-data-flow

SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().

64 1
Explore
spences10/svelte-skills-kit

sveltekit-structure

SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.

64 1
Explore
spences10/svelte-skills-kit

layerchart-svelte5

LayerChart Svelte 5 patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.

64 1
Explore
spences10/svelte-skills-kit

svelte-deployment

Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.

64 1
Explore
spences10/svelte-skills-kit

svelte-styling

64 1
Explore
spences10/svelte-skills-kit

svelte-template-directives

64 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results