Rule

sveltekit typescript guide

via PatrickJS/awesome-cursorrules

Expert guidance for SvelteKit development with TypeScript, Svelte 5 runes, and modern state management.

What is sveltekit typescript guide?

Comprehensive Cursor rule for building SvelteKit applications with TypeScript. Covers code style, naming conventions, Svelte runes, component development, and state management patterns using classes and reactive state.

Enforce TypeScript best practices in SvelteKit projects
Guide Svelte 5 runes and reactive state patterns
Provide class-based state management examples using $state runes
Structure SvelteKit projects with clear component and file organization
Integrate Supabase and Drizzle ORM patterns
Apply shadcn color conventions for UI styling

Applies to

File patterns this rule matches.

**/*

Rule definition (reference)

Source of truth, from the repository.

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):

// 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();