Svelte Development

What it does

This skill provides guidance for building modern Svelte applications, leveraging features introduced in Svelte 5 like reactivity runes. It covers components, stores, lifecycle hooks, transitions, and animations, all based on official Svelte documentation. The goal is to help you create performant web apps with a focus on compile-time optimization and minimal JavaScript overhead.

When to use it

• Building high-performance web applications.
• Creating single-page applications (SPAs) with reactive UI elements.
• Developing interactive user interfaces.
• Migrating from frameworks using virtual DOM to Svelte's compiled approach.
• Building component libraries with native reactivity.

Key capabilities

• Reactivity with Runes (Svelte 5): Utilizing $state, $derived, $effect, and $props runes for reactive state management, improved TypeScript support, and clearer semantics.
• Component development using Svelte's component model.
• Store implementation for managing application data.
• Lifecycle hook usage to control component behavior at different stages.
• Implementation of transitions and animations in Svelte applications.

Example prompts

• "How do I use the $state rune to create a reactive counter?"
• "Can you show me an example of using $derived runes for complex data transformations?"
• "Explain how to implement a lifecycle hook in a Svelte component."

Tips & gotchas

• This skill focuses on Svelte 5 features, particularly reactivity runes. Familiarity with basic Svelte concepts is helpful.
• The examples provided demonstrate specific rune usage; adapt them to your application's needs.