Svelte & SvelteKit Conventions

sveltesveltekitfrontend

Coding conventions and best practices for Svelte and SvelteKit projects

Целевые файлы

Файл	Формат
.cursorrules	plaintext
CLAUDE.md	markdown

Содержимое

Use SvelteKit file-system routing; keep route files in src/routes. Use +page.svelte for page UI and +page.server.ts for server-side data loading. Export a load() function from +page.server.ts; do not fetch in component onMount. Use form actions in +page.server.ts for mutations; avoid client-side fetch for forms. Keep stores in src/lib/stores; use writable() and derived() for shared reactive state. Prefer $derived rune (Svelte 5) over reactive declarations where available. Use $effect() only for real side effects (DOM, timers), not for derived computations. Prefix store variables with $ when accessing their value in templates. Use TypeScript in all .svelte files with <script lang="ts">. Split large components: extract reusable parts as child .svelte files in /components. Use Svelte transitions and animations from svelte/transition, not CSS keyframes. Handle errors with +error.svelte per route segment; always display user-friendly messages. Use $env/static/private for secrets; never expose private env vars to the client. Write end-to-end tests with Playwright for SvelteKit page interactions.

CLI

npx mindaxis apply svelte-rules --target cursor --scope project

Используется в паках

Svelte / SvelteKit Stack

Less code, more performance

Открыть пак →

← Правила