svelte-frontend_skill

Overview

This skill provides Svelte 5 coding guidelines tailored for the Windmill frontend and must be used when writing or modifying files in the frontend directory. It codifies Runes-based reactivity, event and snippet conventions, component design, store segmentation, and performance rules so code is consistent, fast, and SSR-friendly. Follow these rules for new Svelte 5 files; do not apply them to Svelte 4 files unless explicitly directed.

How this skill works

The skill inspects Svelte files for adherence to Svelte 5 idioms: use of $state, $derived, and $effect; $props and $bindable for props; direct DOM event attributes; snippet-based content projection; and list keys. It flags anti-patterns like excessive $effect logic, single monolithic stores, missing list keys, direct DOM manipulation in main script, and unscoped styles. It also suggests performance improvements such as lazy loading, optimized images, and splitting large components.

When to use it

• When creating or updating any file in the frontend directory written for Svelte 5.
• When introducing or refactoring component state, props, or events.
• When designing global or localized state and deciding between stores and context.
• Before committing performance-sensitive UI changes (lists, images, routes).
• When ensuring components remain SSR-compatible and hydrate efficiently.

Best practices

• Use $state for local reactive variables, $derived for computed values, and $effect only for true side effects.
• Declare props with $props() and $bindable for bindable props; prefer callback props over createEventDispatcher for component events.
• Split global state into focused stores; use context API for subtree-local state and custom stores for related methods.
• Always provide stable key attributes when rendering lists with {#each} to avoid unnecessary DOM churn.
• Favor small, single-responsibility components, lazy-load noncritical components, and prefer CSS or Svelte transitions for animations.

Example use cases

• Convert a component’s local state to $state and compute values with $derived to reduce re-renders.
• Replace slot-based content projection with {#snippet} and {@render} for richer parent-child composition.
• Refactor a large monolithic store into multiple focused stores (userStore, themeStore) to limit reactivity scope.
• Implement dynamic import for a rarely used admin panel component to reduce initial bundle size.
• Add keys to an {#each} list that previously re-rendered items on every update.