Best Svelte 5 + SvelteKit Skills for Claude Code (2026)

Svelte 5 is the most breaking change the Svelte ecosystem has seen-runes ($state, $derived, $effect) replace the implicit let-reactivity model entirely. Claude Code needs the right skills to generate correct .svelte files in 2026; without them it defaults to Svelte 4 syntax that won't compile. Browse all frontend-design skills.

Key takeaways

• svelte-code-writer (5,796 installs, 266 stars, skills.sh registry) teaches Claude Code Svelte 5 .svelte file structure, $props() declarations, and typed slot patterns.
• svelte5-best-practices (3,717 installs) adds runes syntax: $state, $derived, $effect, $inspect-the signal primitives Claude Code must know to generate correct Svelte 5.
• gsap-frameworks (21,977 installs, 8,497 stars) covers Svelte + GSAP animation integration and is the highest-install skill that touches Svelte.
• sveltekit-structure (633 installs) handles file-based routing, load functions, and +server.ts API endpoints for full-stack SvelteKit generation.
• Svelte 5 skills must be installed before svelte-core-bestpractices (2,402 installs)-the core skill builds on runes knowledge.

What are the best Svelte 5 skills for Claude Code?

svelte-code-writer (5,796 installs, 266 stars, skills.sh registry, GitHub) is the entry point-it teaches Claude Code the Svelte 5 component contract: <script> with $props(), reactive declarations with $state(), and {#each} / {#if} template syntax. Add svelte5-best-practices (3,717 installs) immediately after.

claude skill install svelte-code-writer
claude skill install svelte5-best-practices

For broader animation coverage, gsap-frameworks (21,977 installs, 8,497 stars) includes Svelte-specific GSAP integration alongside React and Vue paths.

Does Claude Code understand Svelte 5 runes?

svelte5-best-practices (3,717 installs) teaches the four core runes: $state() for reactive variables, $derived() for computed values, $effect() for side effects, and $props() for component inputs. Without this skill, Claude Code generates Svelte 4 syntax (export let x, $: computed = ...) that throws compiler errors in Svelte 5 projects. It also covers the untrack() helper for breaking reactive chains.

How do you scaffold a SvelteKit route with Claude Code?

sveltekit-structure (633 installs, 84 stars) covers the SvelteKit filesystem router: +page.svelte for UI, +page.ts for isomorphic load functions, +server.ts for API endpoints, and +layout.svelte for shared shell components. It teaches Claude Code the correct PageData type inference so generated load functions don't produce TypeScript errors.

How does Svelte animation work in Claude Code?

gsap-frameworks (21,977 installs, 8,497 stars) is the highest-install motion skill that includes Svelte, covering GSAP ScrollTrigger and timeline integration with onMount lifecycle hooks. For Svelte-native motion, svelte-core-bestpractices (2,402 installs) teaches the built-in transition:, animate:, and use: action directives-a zero-JS-overhead alternative that doesn't require an external library. See the full web animation guide.

How does Svelte 5 fit a design system workflow?

Svelte 5 component props are typed via $props() with interface inference, making design token consumption explicit. Pair svelte5-best-practices with a design system skill to get Claude Code generating components that consume CSS custom properties from a token file rather than hardcoded values. Svelte's <style> scoping also eliminates class-name collision-no CSS Modules or styled-components needed.

A complete starter stack

• svelte-code-writer - .svelte file structure, $props(), slot patterns
• svelte5-best-practices - $state, $derived, $effect rune syntax
• sveltekit-structure - file-based routing, load functions, API endpoints
• svelte-core-bestpractices - Svelte-native transitions, actions, animations
• gsap-frameworks - GSAP + Svelte for scroll-driven and timeline animations

Common pitfalls

• Installing skills in the wrong order-svelte-core-bestpractices expects Claude Code to already know runes from svelte5-best-practices.
• Mixing Svelte 4 and Svelte 5 patterns-export let prop and $props() are not interchangeable and produce runtime warnings in Svelte 5's dev mode.
• Using $effect for derived state-$effect is for side effects (DOM mutations, subscriptions); $derived is for computed values. The distinction matters for Svelte's fine-grained update scheduling.

Explore the complete Svelte + frontend toolkit and see how it compares in the UI design guide.

Common questions