How do I install svelte-runes?

Run `npx skills add https://github.com/spences10/svelte-skills-kit --skill svelte-runes` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does svelte-runes support?

svelte-runes works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is svelte-runes free to use?

Yes. svelte-runes is free to install and use. It is available from the open explainx.ai skill registry published by spences10.

Where can I read ratings and reviews for svelte-runes?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

Frontend

svelte-runes▌

spences10/svelte-skills-kit · updated Apr 8, 2026

$npx skills add https://github.com/spences10/svelte-skills-kit --skill svelte-runes

0 commentsdiscussion

summary

Which rune? Props: $props() | Bindable: $bindable() |

›Computed: $derived() | Side effect: $effect() | State: $state()

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

<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

Discussion

Product Hunt–style comments (not star reviews)

No comments yet — start the thread.

general reviews

Ratings

4.5★★★★★52 reviews

★★★★★Dhruvi Jain· Dec 28, 2024
Solid pick for teams standardizing on skills: svelte-runes is focused, and the summary matches what you get after install.
★★★★★Benjamin Khan· Dec 28, 2024
svelte-runes has been reliable in day-to-day use. Documentation quality is above average for community skills.
★★★★★Kwame Sethi· Dec 12, 2024
We added svelte-runes from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
★★★★★Sophia Menon· Dec 8, 2024
svelte-runes reduced setup friction for our internal harness; good balance of opinion and flexibility.
★★★★★Mei Agarwal· Dec 4, 2024
Keeps context tight: svelte-runes is the kind of skill you can hand to a new teammate without a long onboarding doc.
★★★★★Ren Sanchez· Nov 27, 2024
I recommend svelte-runes for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
★★★★★Oshnikdeep· Nov 19, 2024
We added svelte-runes from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
★★★★★Benjamin Martinez· Nov 19, 2024
svelte-runes fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
★★★★★Ira Dixit· Nov 11, 2024
svelte-runes is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
★★★★★Sakura Nasser· Nov 3, 2024
Solid pick for teams standardizing on skills: svelte-runes is focused, and the summary matches what you get after install.

showing 1-10 of 52

1 / 6