How does it handle component communication?

The skill provides patterns for using $props, Snippets for reusable markup, and type-safe context management via createContext.

Does it provide styling guidance?

Yes, it covers scoped CSS best practices, using CSS custom properties for parent-child communication, and the correct use of the :global modifier.

Does this skill support Svelte 5 Runes?

Yes, it is specifically designed to provide guidance on Svelte 5 features including $state, $derived, $effect, and $props.

Can it help me optimize application performance?

Absolutely. It offers strategies for using $state.raw for large data sets and keyed each blocks for efficient DOM updates.

Svelte Core Best Practices

Name: Svelte Core Best Practices
Author: sveltejs

bysveltejs

•

225

•

Design Tools

Guides the development of high-performance, modern Svelte applications using official best practices and Svelte 5 Runes.

This skill equips Claude with specialized knowledge to write, analyze, and optimize Svelte code according to the latest framework standards. It focuses on the transition to Svelte 5 features, specifically Runes like $state, $derived, and $effect, while providing patterns for robust event handling, styling, and component composition. By loading this skill, developers ensure their Svelte projects are efficient, avoid common pitfalls like state leakage in SSR, and leverage the most modern reactivity models available.

Key Features

01Advanced UI composition strategies using Snippets and the {@render} tag.

02Optimization of reactive state using $state.raw for large objects and API responses.

03Expert implementation of Svelte 5 Runes including $state, $derived, and $effect.

04225 GitHub stars

05Migration guidance from legacy patterns like 'export let' and 'on:click' to $props and attributes.

06Best practices for scoped styling and CSS custom property integration between components.

Use Cases

01Building type-safe, server-side rendering (SSR) compatible state management using context.

02Refactoring Svelte 3/4 legacy codebases to modern Svelte 5 Runes and Snippets.

03Debugging complex reactivity issues in large-scale frontend applications.

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

Key Features

01Advanced UI composition strategies using Snippets and the {@render} tag.

02Optimization of reactive state using $state.raw for large objects and API responses.

03Expert implementation of Svelte 5 Runes including $state, $derived, and $effect.

04225 GitHub stars

05Migration guidance from legacy patterns like 'export let' and 'on:click' to $props and attributes.

06Best practices for scoped styling and CSS custom property integration between components.

Use Cases

01Building type-safe, server-side rendering (SSR) compatible state management using context.

02Refactoring Svelte 3/4 legacy codebases to modern Svelte 5 Runes and Snippets.

03Debugging complex reactivity issues in large-scale frontend applications.

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