svelte-runes
installsforks
How to install svelte-runes?
spences10/svelte-skills-kit/svelte-runes
$npx -y skills add spences10/svelte-skills-kit --skill svelte-runesSvelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.
SKILL.md
| 1 | # Svelte Runes |
| 2 | |
| 3 | ## Quick Start |
| 4 | |
| 5 | **Which rune?** Props: `$props()` | Bindable: `$bindable()` | |
| 6 | Computed: `$derived()` | Side effect: `$effect()` | State: `$state()` |
| 7 | |
| 8 | **Key rules:** Runes are top-level only. $derived can be overridden |
| 9 | (use `const` for read-only). Don't mix Svelte 4/5 syntax. |
| 10 | Objects/arrays are deeply reactive by default. |
| 11 | |
| 12 | ## Example |
| 13 | |
| 14 | ```svelte |
| 15 | <script> |
| 16 | let count = $state(0); // Mutable state |
| 17 | const doubled = $derived(count * 2); // Computed (const = read-only) |
| 18 | |
| 19 | $effect(() => { |
| 20 | console.log(`Count is ${count}`); // Side effect |
| 21 | }); |
| 22 | </script> |
| 23 | |
| 24 | <button onclick={() => count++}> |
| 25 | {count} (doubled: {doubled}) |
| 26 | </button> |
| 27 | ``` |
| 28 | |
| 29 | ## Reference Files |
| 30 | |
| 31 | - [reactivity-patterns.md](references/reactivity-patterns.md) - When |
| 32 | to use each rune |
| 33 | - [migration-gotchas.md](references/migration-gotchas.md) - Svelte 4→5 |
| 34 | translation |
| 35 | - [component-api.md](references/component-api.md) - $props, $bindable |
| 36 | patterns |
| 37 | - [snippets-vs-slots.md](references/snippets-vs-slots.md) - New |
| 38 | snippet syntax |
| 39 | - [common-mistakes.md](references/common-mistakes.md) - Anti-patterns |
| 40 | with fixes |
| 41 | |
| 42 | > For `@attach` and other template directives, see the |
| 43 | > **svelte-template-directives** skill. |
| 44 | |
| 45 | ## Notes |
| 46 | |
| 47 | - Use `onclick` not `on:click`, `{@render children()}` in layouts |
| 48 | - `$derived` can be reassigned (5.25+) - use `const` for read-only |
| 49 | - Use `createContext` over `setContext`/`getContext` for type safety |
| 50 | - Use `$inspect.trace` to debug reactivity issues |
| 51 | - **Last verified:** 2026-03-12 |
| 52 | |
| 53 | <!-- |
| 54 | PROGRESSIVE DISCLOSURE GUIDELINES: |
| 55 | - Keep this file ~50 lines total (max ~150 lines) |
| 56 | - Use 1-2 code blocks only (recommend 1) |
| 57 | - Keep description <200 chars for Level 1 efficiency |
| 58 | - Move detailed docs to references/ for Level 3 loading |
| 59 | - This is Level 2 - quick reference ONLY, not a manual |
| 60 | |
| 61 | LLM WORKFLOW (when editing this file): |
| 62 | 1. Write/edit SKILL.md |
| 63 | 2. Format (if formatter available) |
| 64 | 3. Run: npx skills add . --list |
| 65 | 4. If the skill is not discovered, check SKILL.md frontmatter formatting |
| 66 | 5. Validate again to confirm |
| 67 | --> |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
