Full-stack#sveltekit#typescript
Sveltekit TypeScript Guide
Cursor rules for SvelteKit development with TypeScript integration.
Use it with Cursor, or export as AGENTS.md / CLAUDE.md for other AI coding agents — pick a format below.
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();How to use: save the file at your project root (e.g.
.cursorrules or AGENTS.md) and your AI editor picks it up automatically.Related rules
Full-stack→
Next.js Supabase Todo App
Cursor rules for Next.js development with Supabase integration for a Todo app.
#nextjs#supabase#todo#app
Full-stack→
Next.js Tailwind TypeScript Appsmpt
Cursor rules for Next.js development with Tailwind CSS and TypeScript integration.
#nextjs#tailwind#typescript#appsmpt
Full-stack→
Next.js Vercel Supabase
Cursor rules for Next.js development with Vercel and Supabase integration.
#nextjs#vercel#supabase