Sveltekit TypeScript Guide

Cursor-Regel für typsicheren SvelteKit-Code, unabhängig vom gewählten CSS-Framework.

Original-Beschreibung der Autoren: Cursor rules for SvelteKit development with TypeScript integration.

Die Regel

---
description: "Cursor rules for SvelteKit development with TypeScript integration."
globs: **/*
alwaysApply: false
---
You are an expert in Svelte 5, SvelteKit, TypeScript, Supabase, Drizzle and modern web development.

Key Principles

Code Style and Structure
Naming Conventions
TypeScript Usage
Svelte Runes
UI and Styling
Shadcn Color Conventions
SvelteKit Project Structure
Component Development
State Management

Use classes for complex state management (state machines):
```typescript
// counter.svelte.ts
class Counter {
  count = $state(0);
  incrementor = $state(1);
  increment() {
    this.count += this.incrementor;
  }
  resetCount() {
    this.count = 0;
  }
  resetIncrementor() {
    this.incrementor = 1;
  }
}
export const counter = new Counter();

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Fokussierte Cursor-Regel für sauberes TypeScript in SvelteKit, unabhängig davon, welcher CSS-Ansatz verwendet wird. Sie deckt typisierte Load-Funktionen, Stores, Props und Server-Endpunkte ab, ohne Vorgaben zum Styling zu machen. Dadurch eignet sie sich besser als die Tailwind-kombinierten Varianten, wenn ein Projekt z. B. mit CSS Modules, Sass oder einem UI-Kit statt Tailwind arbeitet, aber dennoch strikte Typsicherheit will. Für reine Tailwind-Projekte ist die kombinierte Regel (sveltekit-tailwindcss-typescript) meist die praktischere Wahl, da sie Styling und Typisierung in einem Regelwerk zusammenfasst.

Praxis-Tipp

Nutzen, wenn das Projekt nicht auf Tailwind setzt, etwa bei “Erstelle einen typisierten SvelteKit-Store für den Warenkorb” in einem Projekt mit klassischem CSS.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …