# svelte-runes

Guides coding agents on Svelte 5 runes without mixing legacy syntax. It helps set up reactive state, derived values, effects, and component props.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1000 installs · ★ 94
- Author: spences10
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/spences10/svelte-skills-kit/tree/HEAD/plugins/svelte-skills/skills/svelte-runes/SKILL.md
- Updated: 2026-10-12
- HTML: https://affpapa.org/en/nevibecode/skills/svelte-runes

## What it does

This skill equips your coding agent with core Svelte 5 reactivity conventions. It covers fundamental runes like `$state` for mutable state, `$derived` for computed data, `$effect` for side effects, plus `$props` and `$bindable` for component interfaces. Objects and arrays placed in state are deeply reactive right away.

Runes belong strictly at the top level. Mixing Svelte 4 and Svelte 5 patterns breaks reactivity, so the guidelines enforce modern template habits like `onclick` over `on:click` and snippet rendering via `{@render children()}`. Starting with Svelte 5.25, `$derived` can be reassigned. Declaring it with `const` keeps computed values strictly read-only.

For shared state, the skill favors type-safe `createContext` over traditional context functions. It also directs models to debug reactive chains with `$inspect.trace`. Template directives like `@attach` are separated into a different skill.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill svelte-runes -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/svelte-runes/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/svelte-runes/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill svelte-runes -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/svelte-runes/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill svelte-runes -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/svelte-runes/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install spences10/svelte-skills-kit svelte-runes
```

2. **Manually: put the files in place**
- File: `.github/skills/svelte-runes/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill svelte-runes -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/spences10/svelte-skills-kit --path plugins/svelte-skills/skills/svelte-runes
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/svelte-runes/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill svelte-runes -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/spences10/svelte-skills-kit/tree/HEAD/plugins/svelte-skills/skills/svelte-runes/SKILL.md

## When to use it
- migrate components from Svelte 4 syntax to Svelte 5 runes
- declare state and computed values using `$state` and `$derived`
- configure two-way prop bindings with `$bindable`
- debug reactivity issues via `$inspect.trace`

## Example prompts
- Refactor this component from Svelte 4 reactivity to `$state` and `$derived` runes.
- Make the `value` prop two-way using `$bindable` and switch `on:click` to `onclick`.

## Similar
- [svelte-core-bestpractices](https://affpapa.org/en/nevibecode/skills/svelte-core-bestpractices.md) — skill · 10900 installs
- [svelte](https://affpapa.org/en/nevibecode/skills/claude-mpm-team-svelte.md) — skill · 343 installs
- [svelte5-best-practices](https://affpapa.org/en/nevibecode/skills/svelte5-best-practices.md) — skill · 16600 installs
- [svelte-scaffold](https://affpapa.org/en/nevibecode/commands/svelte-scaffold.md) — command · 127 installs
- [tauri-svelte-typescript-guide-cursorrules-prompt-f](https://affpapa.org/en/nevibecode/rules/tauri-svelte-typescript-guide-cursorrules-prompt-f.md) — rule · ★ 41011
- [svelte-debug](https://affpapa.org/en/nevibecode/commands/svelte-debug.md) — command · 134 installs

From the same set: [spences10/svelte-skills-kit](https://affpapa.org/en/nevibecode/by/spences10/svelte-skills-kit.md) — 4 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md