Installs into .claude/skills of the current project.
Are you the author of Svelte?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/skeletorflet-svelte)
---
name: svelte
description: Svelte 5 runes ($state, $derived, $effect, $props), component props, event handling, logic blocks, stores, snippets, transitions, actions, and reactivity. Use when building Svelte components.
---
## svelte
Svelte shifts reactivity from runtime to compile time.
### Core Concepts
- Svelte 5 runes: $state for reactive state, $derived for computed values
- $effect for side effects that auto-track dependencies
- $props for component inputs with type safety
### Common Patterns
- Logic blocks: {#if}, {#each}, {#await} for declarative control flow
- Stores: writable, derived, readable for cross-component state
- Snippets (Svelte 5) replace slots for content projection
### Best Practices
- Prefer runes over stores for local component state
- Use $derived instead of $effect for computations
- Apply transitions sparingly for deliberate UX polish
### Common Code Patterns
- on:click, on:submit for native DOM event handling
- use:action for DOM element behavior encapsulation
- Transition directives: transition:fade, transition:fly for animations
