home / skills / linehaul-ai / linehaulai-claude-marketplace / svelte5-runes

svelte5-runes skill

unsafe

This skill guides Svelte 5 runes for reactive state, props, and effects, helping you write safe, consistent, and performant components.

npx playbooks add skill linehaul-ai/linehaulai-claude-marketplace --skill svelte5-runes

Review the files below or copy the command above to add this skill to your agents.

Files (11)

SKILL.md

2.2 KB

---
name: svelte5-runes
description: Svelte 5 runes guidance. Use for reactive state, props, and effects. Covers $state, $derived, $effect, $props, $bindable. Prevents mixing syntaxes and reactivity mistakes.
keywords: [svelte, svelte5, reactivity, state-management, runes, frontend]
disable-model-invocation: false
user-invocable: true
---

# Svelte 5 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). Use consistent Svelte 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

**Before suggesting code, check these:**

- [references/reactivity-patterns.md](references/reactivity-patterns.md) -
  When to use each rune
- [references/component-api.md](references/component-api.md) -
  $props,
  $bindable patterns
- [references/snippets-vs-slots.md](references/snippets-vs-slots.md) -
  New snippet syntax
- [references/common-mistakes.md](references/common-mistakes.md) -
  Anti-patterns with fixes

## Notes

- Event handlers: Use `onclick` not `on:click` in Svelte 5
- Children: Use `{@render children()}` in layouts
- Check Svelte version before suggesting syntax
- **Svelte 5.25+ breaking change:** `$derived` can now be reassigned
  (use `const` for read-only)
- **Last verified:** 2025-01-11

<!--
PROGRESSIVE DISCLOSURE GUIDELINES:
- Keep this file ~50 lines total (max ~150 lines)
- Use 1-2 code blocks only (recommend 1)
- Keep description <200 chars for Level 1 efficiency
- Move detailed docs to references/ for Level 3 loading
- This is Level 2 - quick reference ONLY, not a manual

LLM WORKFLOW (when editing this file):
1. Write/edit SKILL.md
2. Format (if formatter available)
3. Run: claude-skills-cli validate <path>
4. If multi-line description warning: run claude-skills-cli doctor <path>
5. Validate again to confirm
-->

Overview

This skill provides compact, practical guidance for Svelte 5 runes: $state, $derived, $effect, $props, and $bindable. It helps you choose the right rune for reactive state, computed values, side effects, and component APIs while avoiding common reactivity mistakes. Use it to enforce consistent Svelte 5 syntax and top-level rune placement.

How this skill works

The skill inspects component intent and suggests which rune to use for mutable state, read-only derived values, effects, and prop or bindable patterns. It enforces top-level rune usage, warns about mixing incompatible syntaxes, and flags anti-patterns such as local overrides of computed values. It also checks Svelte version constraints (e.g., $derived reassignment behavior) before recommending code.

When to use it

Introduce mutable local state with $state() for values that change over time.
Create computed values with $derived(), and use const when you want them read-only.
Run side effects with $effect() at the top level rather than inside event handlers.
Expose component inputs with $props() and two-way APIs with $bindable().
When migrating to Svelte 5 or upgrading, to catch breaking changes and syntax updates.

Best practices

Declare runes only at the top level of the <script> block; avoid nested rune calls.
Use const for derived values you never reassign to guarantee read-only semantics.
Prefer onclick (Svelte 5) for handlers and {@render children()} for layout children.
Treat arrays and objects as deeply reactive; avoid manual mutation workarounds.
Check Svelte version before suggesting $derived reassignment or other breaking changes.

Example use cases

Simple counter: $state for count, $derived for computed doubles, $effect for logging.
Form component: $props to read inputs, $bindable to expose two-way fields to parents.
Performance: replace expensive recalculation inside templates with $derived.
Side effects tied to reactive values, such as syncing to localStorage via $effect.
Migration: update components to Svelte 5 event syntax and top-level runes.

FAQ

Can I call runes inside functions or event handlers?

No — runes are top-level only. Calling them inside functions breaks Svelte 5 reactivity rules.

When should I use const with $derived?

Use const when you want a read-only computed value. $derived can be reassigned in newer Svelte 5 versions, so const prevents accidental overrides.