Claude Code & Svelte: Komponenten, SvelteKit und Stores im KI-Workflow

Svelte ist das Framework, das Entwickler entweder sofort lieben oder erst gar nicht kennen. Wer einmal eine .svelte-Datei gesehen hat — Markup, Script und Style in einer Datei, Reaktivität ohne boilerplate, kein Virtual DOM — versteht schnell, warum. Und Claude Code Svelte ist eine besonders produktive Kombination: Claude Code versteht die Svelte-Syntax tief genug, um echte, idiomatische Komponenten zu generieren, die kein nachträgliches Umschreiben benötigen.

Dieser Artikel erklärt, was Svelte besonders macht, wie SvelteKit das Framework zur vollwertigen Web-Plattform ausbaut — und wie du Claude Code konkret einsetzt, um schneller produktiven Svelte-Code zu schreiben.

1. Was ist Svelte? Das Compiler-Framework

Svelte unterscheidet sich fundamental von React und Vue: Es ist kein Laufzeit-Framework, sondern ein Compiler. Der Build-Schritt übersetzt .svelte-Dateien in hochoptimierten, vanillen JavaScript-Code — ohne Virtual DOM, ohne Framework-Overhead zur Laufzeit.

Was das bedeutet: Die Reaktivität entsteht nicht durch einen Diff-Algorithmus, der den virtuellen Baum mit dem echten DOM vergleicht. Stattdessen generiert der Compiler präzise DOM-Updates direkt an den Stellen, wo sich Daten ändern. Das Ergebnis sind kleinere Bundle-Größen und schnellere Laufzeit-Performance — besonders auf leistungsschwachen Geräten.

2. Svelte-Syntax: .svelte-Dateien verstehen

Eine .svelte-Datei besteht aus drei Abschnitten: <script> für die Logik, Markup für die Vorlage und optional <style> für scoped CSS. Das Besondere: Der Compiler versteht, welche Variablen im Template verwendet werden — und instrumentiert genau diese für Updates.

<script>
  let count = 0;

  // Reaktives Statement: wird neu berechnet, wenn count sich ändert
  $: doubled = count * 2;

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

<button on:click={increment}>
  Geklickt: {count} — Doppelt: {doubled}
</button>

<style>
  button {
    background: #ff3e00;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

Das $:-Präfix markiert reaktive Statements. Alles dahinter wird automatisch neu ausgeführt, sobald sich eine der referenzierten Variablen ändert. Kein useMemo, kein computed — nur ein vorangestelltes $:.

Bindings und Events

Svelte bietet direktes Two-Way-Binding mit der bind:-Direktive sowie feingranulare Event-Handler über on::

<script>
  let name = '';
  let checked = false;
</script>

<!-- Two-way binding -->
<input bind:value={name} placeholder="Dein Name" />
<p>Hallo, {name || 'Unbekannt'}!</p>

<!-- Checkbox binding -->
<label>
  <input type="checkbox" bind:checked />
  Newsletter abonnieren
</label>

<!-- Event mit Modifier -->
<form on:submit|preventDefault={handleSubmit}>
  <button type="submit">Absenden</button>
</form>

3. SvelteKit: Routing, SSR und Form Actions

SvelteKit ist das offizielle Full-Stack-Framework für Svelte — vergleichbar mit Next.js für React. Es bringt dateibasiertes Routing, Server-Side Rendering, API-Routen und das eleganteste Form-Handling im modernen Web-Ecosystem.

Die Verzeichnisstruktur ist intuitiv: Jede +page.svelte wird zu einer Route, jede +page.server.ts liefert Daten via load-Funktion aus.

// src/routes/produkte/[id]/+page.server.ts
export async function load({ params }) {
  const produkt = await db.produkte.findUnique({
    where: { id: params.id }
  });

  if (!produkt) {
    throw error(404, 'Produkt nicht gefunden');
  }

  return { produkt };
}

// src/routes/produkte/[id]/+page.svelte
<script>
  export let data;  // wird von load() befüllt
</script>

<h1>{data.produkt.name}</h1>
<p>{data.produkt.beschreibung}</p>

Form Actions: Formulare ohne JavaScript-Overhead

Form Actions sind eines der Killer-Features von SvelteKit. Sie erlauben serverseitige Formularverarbeitung — mit progressivem Enhancement: Das Formular funktioniert auch ohne JavaScript im Browser.

// src/routes/kontakt/+page.server.ts
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const email = data.get('email');

    await sendEmail(email);
    return { success: true };
  }
};

// src/routes/kontakt/+page.svelte
<script>
  import { enhance } from '$app/forms';
  export let form;
</script>

<form method="POST" use:enhance>
  <input name="email" type="email" required />
  <button type="submit">Absenden</button>
</form>

{#if form?.success}
  <p>Danke! Wir melden uns.</p>
{/if}

4. Stores: Reaktiver Zustand ohne Kontext-Magie

Svelte Stores sind der Mechanismus für geteilten Zustand außerhalb von Komponenten. Drei Grundtypen decken die meisten Anwendungsfälle ab:

import { writable, readable, derived } from 'svelte/store';

// Veränderbarer Store
export const warenkorb = writable([]);

// Nur-Lese-Store (z.B. Uhrzeit)
export const uhrzeit = readable(new Date(), (set) => {
  const interval = setInterval(() => set(new Date()), 1000);
  return () => clearInterval(interval);
});

// Abgeleiteter Store
export const artikelAnzahl = derived(
  warenkorb,
  $warenkorb => $warenkorb.reduce((sum, item) => sum + item.menge, 0)
);

In Komponenten greift man mit dem $-Präfix auf Store-Werte zu — Svelte abonniert und kündigt automatisch:

<script>
  import { warenkorb, artikelAnzahl } from '$lib/stores';
</script>

<p>{$artikelAnzahl} Artikel im Warenkorb</p>
<button on:click={() => warenkorb.update(w => [...w, neuerArtikel])}>
  Hinzufügen
</button>

5. Transitions und Animationen

Svelte hat Animationen im Kern eingebaut — kein externes Package nötig. Die svelte/transition- und svelte/animate-Module liefern deklarative Animationen direkt im Markup:

<script>
  import { fade, fly, slide } from 'svelte/transition';
  import { flip } from 'svelte/animate';

  let sichtbar = true;
  let liste = ['A', 'B', 'C'];
</script>

{#if sichtbar}
  <div transition:fly={{ y: 20, duration: 300 }}>
    Ich fliege herein und heraus
  </div>
{/if}

{#each liste as item (item)}
  <div animate:flip={{ duration: 200 }}>{item}</div>
{/each}

Der Vorteil gegenüber CSS-Animationen: Svelte berechnet automatisch Ein- und Ausgangs-States und koordiniert gegenläufige Animationen — ohne dass man selbst den Timing-Ablauf managen muss.

6. Svelte vs. React vs. Vue: Was wirklich zählt

Der häufigste Vergleich: React ist das Industrie-Standard-Framework mit dem größten Ecosystem, Vue der sanfte Einstieg mit Two-Way-Binding, Svelte das radikalste Konzept mit dem besten DX (Developer Experience) für viele Entwickler.

• Bundle-Größe: Svelte gewinnt deutlich. Eine Todo-App kommt mit < 10 KB aus — React bringt allein das Framework mit > 40 KB.
• Performance: Svelte ist bei DOM-Updates schnell, weil es kein Virtual DOM diff betreiben muss. Für die meisten Apps ist der Unterschied marginal, bei vielen kleinen Updates messbar.
• Lernkurve: Svelte ist für viele Entwickler einfacher zu lernen — weniger Konzepte, weniger boilerplate, näher am HTML.
• Ecosystem: React führt klar. Svelte/SvelteKit holen auf, aber wer auf bestimmte React-Bibliotheken angewiesen ist, muss Alternativen suchen.
• DX im täglichen Einsatz: Subjektiv, aber viele Entwickler berichten von weniger kognitivem Overhead — weniger Hooks-Regeln, weniger explizites Dependency-Management.

7. Claude Code Svelte: Konkrete Tipps

Claude Code versteht die Svelte-Syntax idiomatisch — es generiert keine React-Komponenten die nach Svelte aussehen, sondern echtes, sveltes Svelte. Drei Einsatzszenarien, die besonders gut funktionieren:

Komponenten generieren lassen

claude "Erstelle eine Svelte-Komponente für ein Datepicker-Widget.
Anforderungen:
- Kalender-Popup beim Klick auf ein Input-Feld
- Auswahl von Einzel- oder Zeitraum-Datum
- Tastatur-Navigation (Pfeiltasten, Enter, Escape)
- bind:value für Two-Way-Binding von außen
- Scoped CSS ohne externe Abhängigkeiten"

Claude Code generiert eine vollständige .svelte-Datei mit reaktivem Zustand, Keyboard-Events, korrektem Binding und idiomatischem Svelte-Stil — kein Framework-Import, keine externen Deps.

SvelteKit-Seiten mit load() und Actions aufsetzen

claude "Erstelle eine SvelteKit-Route für eine Benutzer-Einstellungsseite.
- +page.server.ts: load() liest Nutzerdaten aus der DB (Prisma)
- +page.server.ts: action 'updateProfile' validiert und speichert
- +page.svelte: Formular mit use:enhance, Fehlermeldungen pro Feld
- Typ-Sicherheit: PageData und ActionData Typen verwenden"

Stores aufsetzen und integrieren

claude "Erstelle ein Store-System für eine Shopping-App in SvelteKit:
- warenkorb: writable Store mit Artikel-Objekten
- gesamtpreis: derived Store der Summe berechnet
- addToCart / removeFromCart / clearCart Funktionen
- Persistenz via localStorage (nur client-side)
- TypeScript-Typen für Artikel und Warenkorb"

Claude Code generiert nicht nur die Stores, sondern auch den Persistenz-Wrapper mit korrektem browser-Check (SvelteKit läuft auch serverseitig, localStorage gibt es dort nicht) und vollständigen TypeScript-Definitionen.

"Das Besondere an Claude Code Svelte: Es kennt die Fallstricke. Der fehlende browser-Check für localStorage in SvelteKit, der $app/environment-Import für SSR-Schutz, das korrekte Tippen von PageData — das alles kommt von Haus aus."

Zwei verwandte Artikel, die auf diesem Thema aufbauen:

• Claude Code Debugging — Bugs systematisch finden, egal in welchem Framework
• Claude Code für Unternehmen — Deployment, Zugriffskontrolle und Team-Workflows