playbooks

home / skills / nikiskaarup / skills / svelte-5

svelte-5 skill

/svelte-5

This skill guides Svelte 5 component authorship and migration, using runes, $props, and callback props for modern reactive patterns.

npx playbooks add skill nikiskaarup/skills --skill svelte-5

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

Files (1)
SKILL.md
2.3 KB
---
name: svelte-5
description: Guide Svelte 5 development with runes and migration-aware practices.
---

# Svelte 5

## Purpose
Guide responses for Svelte 5 component authoring, reactivity, and migration from Svelte 4 based on official docs.

## Scope
- Included: Svelte 5 runes, component APIs, props, events, snippets, reactivity, effects, and TypeScript usage.
- Excluded: SvelteKit topics unless required by user context, and unrelated tooling.

## When to Use
- You are building or migrating Svelte components to Svelte 5.
- You need guidance on runes, reactivity, props, events, snippets, or Svelte 5 API changes.

## Response Guidance
- Prefer runes ($state, $derived, $effect) over legacy $: and implicit reactivity.
- Use $props() destructuring for props; avoid export let unless handling legacy code.
- Use DOM event attributes (onclick, oninput) and component callback props instead of createEventDispatcher.
- Favor snippets (children + {@render ...}) over slots.
- Call out bindable props with $bindable and warn against mutating non-owned state.

## Key Changes: Svelte 4 -> 5
- Reactivity: runes replace implicit reactivity and most $: usage.
- Props: $props() replaces export let; bindable props require $bindable.
- Events: DOM event attributes replace on:; component events become callback props.
- Slots: snippets replace slot and let: patterns.
- Components: function-based mount/hydrate replace class instance APIs ($on/$set/$destroy).
- Modules: <script module> replaces <script context="module">.
- New file types: .svelte.js and .svelte.ts support runes.
- Migration helper: npx sv migrate svelte-5.

## TypeScript Guidance
- Prefer explicit prop interfaces with $props() destructuring:

```ts
interface Props {
  class?: ClassValue;
  text: string;
}

let { class: className, text }: Props = $props();
```

- If using snippet props, type them with Snippet:

```ts
import type { Snippet } from 'svelte';

interface Props {
  children?: Snippet;
}
```

- Use .svelte.ts and .svelte.js for shared reactive logic; do not export reassigned $state directly.
- For wrapper component typing, use DOM types from svelte/elements when needed.
- Recommend the Svelte VS Code extension and the TypeScript plugin for best editor support.

## References
- https://svelte.dev/docs/svelte/llms.txt

Overview

This skill guides Svelte 5 component development, reactivity patterns, and migration-aware practices. It emphasizes Svelte 5 runes, updated props and event conventions, TypeScript usage, and pragmatic snippets for component composition. Use it to write new Svelte 5 components or modernize Svelte 4 code safely.

How this skill works

The skill inspects component design choices and recommends Svelte 5 idioms: $state, $derived, and $effect runes for reactivity; $props() destructuring for typed props; DOM event attributes and callback props for events; and snippets + {@render ...} in place of slots. It flags legacy patterns, suggests migration steps, and offers TypeScript typings and file-organization best practices.

When to use it

  • Building new Svelte 5 components with idiomatic reactivity
  • Migrating Svelte 4 components to Svelte 5 using npx sv migrate svelte-5
  • Adding TypeScript typings for props, snippets, and wrapper components
  • Converting slots/let: patterns to snippets and render functions
  • Updating event handling to DOM attributes and callback props

Best practices

  • Prefer runes ($state, $derived, $effect) instead of legacy $: and implicit reactive statements
  • Use $props() destructuring for props and declare explicit interfaces for TypeScript
  • Mark bindable props with $bindable; do not mutate state you don’t own
  • Use DOM event attributes (onclick, oninput) and component callback props rather than createEventDispatcher
  • Favor snippets and {@render ...} over slots and let: patterns for child composition

Example use cases

  • Convert a Svelte 4 reactive block to $effect and $derived runes for clearer dependencies
  • Define a typed Props interface and destructure it with $props() in a TypeScript component
  • Replace <slot> and let: with a children Snippet and {@render children} for flexible composition
  • Migrate component events to callback props and replace on: usage with native DOM attributes
  • Create shared reactive logic in .svelte.ts/.svelte.js modules and import into multiple components

FAQ

How do I type props in Svelte 5 with TypeScript?

Declare an interface for props and destructure with $props(): e.g. let { text }: Props = $props(); use Snippet for children props when needed.

When should I use $bindable?

Use $bindable to mark props that the parent can bind. Avoid mutating props that aren’t marked bindable; treat non-bindable props as read-only.

What replaces the $: reactive label?

Use runes: $state for state declarations, $derived for computed values, and $effect for side effects and subscriptions.