Svelte

What This Skill Does

The Svelte skill acts as your expert assistant for building robust, reactive applications with Svelte and SvelteKit. It encapsulates deep knowledge of the Svelte lifecycle, reactivity model, store management, and SSR patterns, helping you debug issues that commonly arise from Svelte's compilation-based reactivity system. Whether you are migrating to Svelte 5 Runes or troubleshooting component lifecycle hooks, this skill provides the context needed to write idiomatic and performant code. It covers everything from simple prop handling and event forwarding to complex server-side data fetching patterns and memory management with store subscriptions.

Installation

To integrate this skill into your OpenClaw agent, execute the following command in your terminal: clawhub install openclaw/skills/skills/ivangdavila/svelte

Use Cases

• Debugging reactivity issues in complex arrays or deeply nested objects that aren't triggering updates.
• Implementing lifecycle-safe browser API calls by correctly wrapping code in onMount or checking the browser environment.
• Refactoring older Svelte 4 component logic into the cleaner, more efficient Svelte 5 Rune-based syntax.
• Optimizing state management by choosing the right store type or leveraging $derived to prevent unnecessary re-computations.
• Resolving SvelteKit SSR hydration errors and properly managing data loading through +page.server.ts.

Example Prompts

• "I'm trying to update a nested property in an object, but my Svelte component isn't re-rendering. How do I fix the reactivity without using a full assignment?"
• "Can you help me refactor this store-based subscription into Svelte 5 Runes for better performance?"
• "I'm getting a 'window is not defined' error in my SvelteKit app. How do I properly access browser APIs only after the component mounts?"

Tips & Limitations

When using this skill, always specify if you are working with Svelte 4 or Svelte 5, as the reactivity paradigms differ significantly. Remember that while this skill excels at identifying patterns, it is a static analysis tool; it cannot execute your code or inspect your runtime state. When dealing with complex state, prioritize immutability where possible to avoid the common pitfalls of direct mutation in Svelte's reassignment-based reactivity system.