Can it help with .svelte.ts and .svelte.js files?

Absolutely, it provides the required patterns for using runes in logic files outside of standard .svelte components.

Does this skill support SvelteKit applications?

Yes, it includes specific patterns for SSR safety to ensure that shared state does not bleed between different user requests.

How does this skill help with Svelte 4 to 5 migration?

It provides specific mapping from legacy stores and syntax, such as moving from 'on:click' to 'onclick' and replacing 'writable' with '$state'.

What is the benefit of using this skill with Claude?

It ensures Claude follows the latest idiomatic Svelte 5 patterns rather than hallucinating or mixing older Svelte 4 syntax.

Does it cover the replacement for slots?

Yes, it provides guidance on transitioning from the element to the new {@render ...} snippet system.

Svelte 5 Runes & Reactivity

Name: Svelte 5 Runes & Reactivity
Author: joshuadavidthomas

byjoshuadavidthomas

•

Design Tools

Guides the implementation of Svelte 5 applications using runes, class-based state management, and modern reactive patterns.

This skill provides specialized guidance for Svelte 5, helping developers transition from Svelte 4's stores and component syntax to the new runes-based system ($state, $derived, $effect). It offers idiomatic patterns for class-based state management in .svelte.ts files, ensures SSR safety in SvelteKit environments, and provides a comprehensive migration path for updating legacy codebases to the latest Svelte standards, preventing the common mistake of mixing incompatible version syntaxes.

Key Features

01Step-by-step Svelte 4 to Svelte 5 migration strategies and syntax mapping

02Idiomatic class-based state management patterns for .svelte.ts files

03Comprehensive guidance on Svelte 5 Runes including $state, $derived, and $props

04Best practices for the Svelte 5 Context API and shared state encapsulation

05Guidance on modern component patterns using snippets and the @render tag

064 GitHub stars

Use Cases

01Architecting scalable, type-safe global state using classes instead of stores

02Debugging reactivity issues or SSR leaks in complex SvelteKit applications

03Migrating a Svelte 4 project to Svelte 5 runes and modern event handling

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add joshuadavidthomas/agent-skills svelte5

For use in Claude.ai and ChatGPT

Download Skill