Can it help with styling child components?

Yes, it provides idiomatic patterns for styling children using CSS custom properties and the :global modifier where necessary.

How does it help with performance?

It provides guidance on using keyed each blocks for surgical DOM updates and suggests $state.raw for large objects to avoid unnecessary proxy overhead.

Does this skill support Svelte 4 legacy features?

While it understands legacy syntax, this skill is specifically designed to prioritize and migrate code toward modern Svelte 5 patterns like Runes and Snippets.

Why use $derived instead of $effect?

The skill enforces the Svelte best practice of using $derived for computed values to keep reactivity predictable and avoid the common pitfalls of state synchronization inside effects.

Does it support the latest experimental Svelte features?

Yes, it includes guidance on modern async Svelte features like await expressions and hydratable promises for versions 5.36 and higher.

Svelte Core Best Practices

Name: Svelte Core Best Practices
Author: sveltejs

bysveltejs

•

225

•

Herramientas para Desarrolladores

Provides expert guidance and implementation patterns for writing modern, high-performance Svelte 5 applications.

This skill equips Claude with deep expertise in Svelte 5, focusing on the correct implementation of runes like $state, $derived, and $effect. It ensures that generated code follows modern standards, such as using snippets over slots, implementing keyed each blocks for performance, and managing state through context rather than shared modules. By loading this skill, developers ensure their Svelte projects remain robust, maintainable, and free from legacy patterns like 'on:click' or 'export let' props.

Características Principales

01Modern event handling guidance using attribute-based listeners

02Performance-optimized rendering patterns using snippets and keyed each blocks

03225 GitHub stars

04Expert implementation of Svelte 5 runes including $state, $derived, and $props

05Scoped styling best practices including CSS custom property integration

06Proactive migration advice to move from legacy Svelte features to modern alternatives

Casos de Uso

01Refactoring legacy Svelte components to the modern Svelte 5 runes syntax

02Optimizing high-frequency state updates and reactivity chains for better performance

03Implementing complex UI components with reusable snippets and type-safe context

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sveltejs/ai-tools svelte-core-bestpractices

For use in Claude.ai and ChatGPT

Características Principales

01Modern event handling guidance using attribute-based listeners

02Performance-optimized rendering patterns using snippets and keyed each blocks

03225 GitHub stars

04Expert implementation of Svelte 5 runes including $state, $derived, and $props

05Scoped styling best practices including CSS custom property integration

06Proactive migration advice to move from legacy Svelte features to modern alternatives

Casos de Uso

01Refactoring legacy Svelte components to the modern Svelte 5 runes syntax

02Optimizing high-frequency state updates and reactivity chains for better performance

03Implementing complex UI components with reusable snippets and type-safe context

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sveltejs/ai-tools svelte-core-bestpractices

For use in Claude.ai and ChatGPT