Svelte runes

Portable Agent Skills for coding agents, including Svelte/SvelteKit and workflow tooling skills.

Install

npx -y skills add spences10/skills --skill svelte-runes

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
13 stars13 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Implement Svelte 5 runes correctly. Use for reactive state, props, effects, $state.raw, $derived.by, $props, and $bindable.

SKILL.md

2.5 KB, as published. Nobody here has run it

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). Objects/arrays are deeply reactive by default; use $state.raw for large data replaced wholesale.

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

reactivity-patterns.md - When to use each rune
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 event properties like onclick, and {@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
Prefer $derived.by for multi-line derivations
Avoid state updates inside $effect; effects are an escape hatch
Effects do not run on the server; don't wrap effect bodies in if (browser)
Last verified: 2026-05-14