catalyst: Skill for Claude Code

Svelte Development Skill

Expert guidance for building modern web applications with Svelte 5

This skill provides comprehensive documentation for Svelte 5, the revolutionary web framework that compiles declarative components into highly optimized JavaScript. Use this skill when working with .svelte files, implementing reactive state management, or building component-based user interfaces.

What is Svelte?

Svelte is a compiler-based framework for building user interfaces. Unlike traditional frameworks that do their work in the browser, Svelte shifts that work into a compile step that happens at build time. This means:

• No virtual DOM - Svelte compiles components to highly efficient imperative code
• True reactivity - Reactive values update automatically without manual subscriptions
• Small bundle sizes - Only the code you use is included
• Simple syntax - Familiar HTML, CSS, and JavaScript with minimal boilerplate

Quick Start

Creating a new Svelte project with SvelteKit:

npx sv create myapp
cd myapp
npm install
npm run dev

Basic component structure:

<script>
  let count = $state(0);

  function increment() {
    count++;
  }
</script>

<button onclick={increment}>
  Clicks: {count}
</button>

<style>
  button {
    font-size: 1.5em;
    padding: 0.5em 1em;
  }
</style>

When to Use This Skill

Activate this skill when:

• Creating or editing .svelte component files
• Implementing reactive state with runes ($state, $derived, $effect)
• Working with component props and two-way bindings
• Using template syntax (conditionals, loops, await blocks)
• Styling components with scoped CSS
• Integrating with SvelteKit for full-stack applications
• Migrating from Svelte 4 to Svelte 5
• Debugging reactivity or component lifecycle issues

Core Concepts Overview

1. Components → See resources/components.md

• .svelte file structure (<script>, markup, <style>)
• Component lifecycle and instantiation
• .svelte.js and .svelte.ts modules for shared reactive logic