All databases

Cursor rule

Sveltekit Typescript Guide Cursorrules Prompt File

Cursor rules for SvelteKit development with TypeScript integration.

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

More Frontend rules

Frequently asked questions

What is the Sveltekit Typescript Guide Cursorrules Prompt File Cursor rule?

Cursor rules for SvelteKit development with TypeScript integration. It is a Frontend rule, stored as sveltekit-typescript-guide-cursorrules-prompt-file.mdc.

How do I use the Sveltekit Typescript Guide Cursorrules Prompt File rule in Cursor?

Copy the rule from this page and save it as sveltekit-typescript-guide-cursorrules-prompt-file.mdc in your project's .cursor/rules folder, or paste it into Cursor's project rules settings.