svelte-development_skill

Overview

This skill delivers practical, up-to-date guidance for building modern Svelte applications, including Svelte 5 runes, components, stores, lifecycle hooks, and transitions. It focuses on patterns that produce small bundles, predictable reactivity, and better TypeScript support. Use it to accelerate component design, state management, and migration to Svelte 5.

How this skill works

The skill explains Svelte 5 runes ($state, $derived, $effect, $props) and how they create reactive state, derived values, and side effects with improved typing and clearer semantics. It covers component structure, props, slots, events, and composition, plus store patterns (writable, readable, derived, and custom stores) for shared state. Lifecycle hooks (onMount, onDestroy, beforeUpdate, afterUpdate, tick) and built-in transitions/animations are included with practical examples and cleanup patterns.

When to use it

• Building high-performance SPAs or PWAs with minimal runtime overhead
• Creating interactive, reactive UIs with compile-time optimizations
• Sharing state across components or apps using stores and derived values
• Implementing reusable component libraries with strong TypeScript support
• Migrating from virtual-DOM frameworks to a compiled reactive approach

Best practices

• Prefer $state and $derived runes for local reactive state and computed values to improve TypeScript inference
• Encapsulate complex state logic in custom stores with clear methods (add/remove/update)
• Use onMount and onDestroy for setup and deterministic cleanup of side effects
• Keep components focused and composable: prefer slots and small props surfaces over large monolithic components
• Use transitions and animations sparingly for user feedback; prefer CSS for simple effects to keep bundle size small

Example use cases

• A dashboard with real-time metrics using readable time and mousePosition stores plus derived aggregations
• A shopping cart implemented as a custom cart store with cartTotal and itemCount derived values
• A modal and dialog system using slots and events for accessibility and composition
• Migrating a Vue/React widget to Svelte 5 to reduce bundle size and simplify reactivity
• A component library with typed props via $props and event dispatching for framework-agnostic integration