Vibe Index
🎯

svelte-runes

🎯Skill

from spences10/svelte-claude-skills

VibeIndex|
What it does

Provides comprehensive guidance for Svelte runes, helping developers correctly implement reactive state, props, effects, and attachments in Svelte 5.

πŸ“¦

Part of

spences10/svelte-claude-skills(7 items)

svelte-runes

Installation

Add MarketplaceAdd marketplace to Claude Code
/plugin marketplace add spences10/claude-code-toolkit
Add MarketplaceAdd marketplace to Claude Code
/plugin marketplace add spences10/svelte-skills-kit
Install PluginInstall plugin from marketplace
/plugin install toolkit-skills@spences10-claude-code-toolkit
Install PluginInstall plugin from marketplace
/plugin install svelte-skills@spences10-svelte-skills-kit
git cloneClone repository
git clone https://github.com/yourusername/svelte-claude-skills.git ~/.claude/skills/svelte

+ 1 more commands

πŸ“– Extracted from docs: spences10/svelte-claude-skills
Need more details? View full documentation on GitHub β†’
5Installs
-
AddedFeb 4, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

Svelte runes guidance. Use for reactive state, props, effects, attachments, or migration. Covers $state, $derived, $effect, @attach. Prevents reactivity mistakes.

Overview

# 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

```svelte

```

Reference Files

  • [reactivity-patterns.md](references/reactivity-patterns.md) - When

to use each rune

  • [migration-gotchas.md](references/migration-gotchas.md) - Svelte 4β†’5

translation

  • [component-api.md](references/component-api.md) - $props, $bindable

patterns

  • [snippets-vs-slots.md](references/snippets-vs-slots.md) - New

snippet syntax

  • [common-mistakes.md](references/common-mistakes.md) - Anti-patterns

with fixes

  • [attachments.md](references/attachments.md) - @attach replaces use:

actions

Notes

  • Use onclick not on:click, {@render children()} in layouts
  • $derived can be reassigned (5.25+) - use const for read-only
  • Last verified: 2025-01-11

More from this repository6

🎯
sveltekit-structure🎯Skill

Provides comprehensive guidance for structuring SvelteKit projects, covering routing, layouts, error handling, and SSR best practices.

🎯
sveltekit-data-flow🎯Skill

Guides SvelteKit developers through optimal data flow strategies, load function selection, form actions, and server-client data handling patterns.

🎯
svelte-components🎯Skill

Builds and manages Svelte web components, form patterns, and component library integrations with best practices and accessibility.

🎯
sveltekit-remote-functions🎯Skill

Enables type-safe, schema-validated remote function calls in SvelteKit using command(), query(), and form() patterns with server-side execution.

🎯
svelte-deployment🎯Skill

Deploys Svelte projects with adapter configurations, Vite setup, pnpm management, and production build optimizations.

🎯
research🎯Skill

Fetches, reads, and verifies source content to provide accurate research findings by directly examining original documents.