Sveltekit TypeScript Guide

Cursor-Regel für sauberes TypeScript in SvelteKit-Projekten, unabhängig vom CSS-Ansatz.

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

Reine SvelteKit/TypeScript-Regel ohne Styling-Vorgabe — regelt Konventionen für Load-Funktionen, Stores, Typdefinitionen und Routing, lässt aber offen, mit welchem CSS-Ansatz gearbeitet wird. Damit die richtige Wahl für Projekte, die kein Tailwind nutzen oder ein eigenes Design-System haben. Wer Tailwind fest im Stack hat, fährt mit einer der Tailwind-kombinierten SvelteKit-Regeln konsistenter, weil dort Styling-Konventionen mit abgedeckt sind.

Praxis-Tipp

Prompt-Beispiel: „erkläre und implementiere einen typisierten Store für den Warenkorb inklusive Load-Funktion“.

Lizenz & Quelle

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

Lade …