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?
This rule provides best practices for building SvelteKit applications with TypeScript, covering code style, naming conventions, component development, and state management patterns. Use it when developing SvelteKit projects to ensure consistent TypeScript integration, proper use of Svelte 5 runes, and effective state management with classes.
- Apply TypeScript best practices across SvelteKit projects
- Use Svelte 5 runes for reactive state management
- Implement class-based state machines for complex state logic
- Follow consistent naming conventions and code structure
- Integrate with Supabase and Drizzle ORM patterns
- Style components using shadcn color conventions
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();
Related rules
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.