OpenClaw Skills for Svelte Developers: SvelteKit and Beyond

Svelte 5 changed everything. Runes replaced the implicit reactivity model, SvelteKit matured into a full-stack framework, and the compiler got even smarter. If your AI agent is still generating Svelte 4 code — reactive declarations with $:, stores with $store syntax, and the old event system — it is writing code that looks increasingly foreign in a Svelte 5 codebase.

The OpenClaw skills listed here teach your agent Svelte as it exists today. Each skill focuses on a specific area of the Svelte and SvelteKit ecosystem, and together they give your agent the context it needs to produce idiomatic, modern Svelte code. Browse the full collection on the OpenClaw Bazaar.

Runes

svelte-runes-patterns

Installs: 9,800 | Author: rune-craft

Runes are the new reactivity primitives in Svelte 5, and they represent the biggest API change in the framework's history. This skill is essential for any agent working on a Svelte 5 project.

The skill teaches your agent:

• $state: declaring reactive state explicitly instead of relying on top-level let declarations
• $derived: computing values from other reactive state, replacing $: reactive declarations
• $effect: running side effects when dependencies change, with proper cleanup patterns
• $props: declaring component props with the new runes syntax instead of export let
• $bindable: marking props that support two-way binding
• $inspect: debugging reactive state during development

Without this skill, agents produce a confusing mix of Svelte 4 and Svelte 5 syntax. With it installed, your agent writes pure runes-based code that takes full advantage of the new reactivity model — including fine-grained reactivity for object properties and array elements.

openclaw skill install svelte-runes-patterns

svelte-runes-migration

Installs: 5,200 | Author: rune-craft

If your project is migrating from Svelte 4 to Svelte 5, this skill teaches your agent the mechanical transformations: converting $: declarations to $derived, let bindings to $state, stores to runes-based state, and event handlers from createEventDispatcher to callback props.

The skill handles the edge cases that make migration tricky — reactive statements with side effects, store subscriptions in non-component files, and the interaction between runes and legacy component mode.

Server-Side Rendering

sveltekit-ssr-patterns

Installs: 8,600 | Author: kit-guild

SvelteKit's server-side rendering model is elegant but nuanced. This skill teaches your agent the data loading and rendering patterns that make SvelteKit applications fast and reliable.

Core patterns covered:

• +page.server.ts load functions: fetching data on the server with proper typing and error handling
• +page.ts universal load functions: understanding when to use universal vs server-only loaders
• +layout.server.ts: sharing data across nested routes via layout load functions
• Streaming: using promises in load function returns for progressive rendering
• Error pages: implementing +error.svelte at the right level of the route hierarchy
• Hooks: using handle, handleError, and handleFetch in hooks.server.ts for request-level logic

The skill also covers the critical distinction between server-only and shared code. Your agent will understand which modules run on the server, which run on the client, and which run in both environments — preventing the common mistake of importing server-only dependencies into client-rendered components.

openclaw skill install sveltekit-ssr-patterns

sveltekit-streaming-patterns

Installs: 3,700 | Author: kit-guild

A focused skill on SvelteKit's streaming capabilities. Covers deferred data loading with nested promises, streaming server-sent events, and progressive enhancement patterns that work with and without JavaScript.

Form Actions

sveltekit-form-actions

Installs: 7,900 | Author: form-guild

Form actions are SvelteKit's answer to form handling — server-side mutation handlers that work with progressive enhancement. This skill teaches your agent the full form actions workflow.

The skill covers:

• Default actions: handling form submissions in +page.server.ts with the actions export
• Named actions: multiple action handlers per page for forms with different purposes
• Validation: server-side validation with typed return values and the fail() helper
• Progressive enhancement: using use:enhance to upgrade forms to AJAX while maintaining no-JS fallback
• File uploads: handling multipart form data in actions
• Redirect after mutation: using redirect() for the post-redirect-get pattern

Without this skill, agents tend to handle forms with client-side event handlers and fetch calls — ignoring SvelteKit's built-in form actions that provide better accessibility, progressive enhancement, and type safety.

openclaw skill install sveltekit-form-actions

sveltekit-superforms

Installs: 6,100 | Author: form-guild

Superforms is the most popular form library for SvelteKit, building on top of native form actions with Zod validation, nested object support, and client-side validation. This skill teaches your agent to use Superforms for complex form scenarios that go beyond what basic form actions handle cleanly.

Svelte 5 Patterns

svelte5-component-patterns

Installs: 8,300 | Author: svelte-patterns

Beyond runes, Svelte 5 introduced new patterns for component composition. This skill covers the full range of Svelte 5 component design:

• Snippets: using the {#snippet} block and {@render} tag for reusable template fragments, replacing slots
• Event handling: callback props instead of createEventDispatcher, and the onclick attribute syntax
• Generic components: using TypeScript generics in Svelte components for type-safe reusable patterns
• Component composition: patterns for building compound components (tabs, accordions, dialogs) using context and snippets
• Transition API: applying transitions and animations with the updated Svelte 5 syntax

The skill also teaches your agent the CSS scoping rules in Svelte 5 and when to use :global() versus component-level styles.

openclaw skill install svelte5-component-patterns

svelte5-state-management

Installs: 6,800 | Author: svelte-patterns

State management in Svelte 5 looks different from Svelte 4. Writable stores still work, but runes provide a more integrated alternative. This skill teaches your agent the decision framework:

• $state in modules: sharing reactive state by exporting $state from .svelte.ts files
• Context API: using setContext and getContext for component-tree-scoped state
• Class-based stores: using classes with $state properties for complex state with methods
• When to use Svelte stores: cases where the subscribe/set/update API is still the best choice

The skill helps your agent avoid the common trap of importing state management libraries designed for other frameworks when Svelte's built-in primitives handle most use cases.

sveltekit-testing

Installs: 5,900 | Author: test-svelte

Testing SvelteKit applications with Vitest and Playwright. The skill covers component testing with @testing-library/svelte, load function testing, form action testing, and end-to-end testing patterns specific to SvelteKit's routing and SSR model.

Key patterns:

• Rendering Svelte 5 components in tests with proper runes support
• Testing load functions by calling them directly with mock event objects
• Testing form actions with mock RequestEvent objects
• E2E patterns for testing SSR content, client-side hydration, and form submissions with progressive enhancement

openclaw skill install sveltekit-testing

Recommended Stack

For a complete Svelte 5 agent setup:

1. svelte-runes-patterns — the foundation for Svelte 5 reactivity
2. sveltekit-ssr-patterns — data loading and rendering
3. sveltekit-form-actions — form handling and mutations
4. svelte5-component-patterns — component design and composition
5. sveltekit-testing — test generation

With these five skills, your agent writes Svelte 5 code that uses runes, snippets, and form actions — not the Svelte 4 patterns that most training data contains. The difference is especially stark with component composition, where agents without these skills default to the old slot-based patterns instead of the new snippet syntax.

Browse the Skills Directory

Find the right skill for your workflow. The OpenClaw Bazaar skills directory has over 2,300 community-rated skills — searchable, sortable, and free to install.

Browse Skills →

Built a Skill? List It on the Bazaar

If you have built a skill that others would find useful, publish it on the Bazaar. Reach thousands of developers and get feedback from the community.

Learn how to publish →