## Core Development Principles Focus on efficient, performant code using SvelteKit's SSR and SSG features. Aim for minimal client-side JS, descriptive naming, and file-based routing to streamline modern web projects. ## Code Organization and Style Adopt functional patterns, modular code, and separate concerns: logic in `.svelte.ts`, markup/styles in `.svelte`. Avoid duplication through reusable helpers and iterations. **Example Project Layout:** ``` src/ lib/ routes/ app.html static/ svelte.config.js vite.config.js ``` ## Naming Standards Component files: `my-component.svelte` (kebab-case). Imports/usage: `MyComponent` (PascalCase). Variables/props: `myVar` (camelCase). ## TypeScript Best Practices Mandate TypeScript with strict mode. Favor interfaces for props, replace enums with const objects. **Functional Component Props:** ```svelte ``` ## Mastering Svelte Runes Reactive state with `$state`, derivations via `$derived`, effects through `$effect`, props with `$props`, and bindables using `$bindable`. **Rune Examples:** ```svelte

Doubled: {doubled}

``` ## Styling with Tailwind and Shadcn Apply Tailwind utilities, import Shadcn from `$lib/components/ui`, and use `cn()` helper for class merging. Follow background/foreground color schemes. **Color Vars Example:** ```css :root { --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; } ``` ```svelte

Styled Content

``` ## Advanced State Machines For complex logic, use classes with runes. **State Class:** ```typescript // counter.svelte.ts export class Counter { count = $state(0); step = $state(1); add() { this.count += this.step; } reset() { this.count = 0; } } export const appCounter = new Counter(); ``` **Usage:** ```svelte ``` ## Routing, SSR, and SSG Leverage `src/routes/` for pages, `[slug]` for dynamics, `load()` for data. Enable SSR/SSG with adapters. **Load Function:** ```typescript // +page.server.ts export const load = async () => { return { data: 'Server-fetched' }; }; ``` ## Performance Enhancements Use `{#key}`, dynamic imports, `$effect.tracking()`, lazy images. Prioritize SSR/SSG for Core Web Vitals. ## API Routes and Forms Place APIs in `src/routes/api/`. Handle forms with actions and validation. **Form Action:** ```svelte ``` ```typescript // +page.server.ts export const actions = { default: async ({ request }) => { const data = await request.formData(); // Process } }; ``` ## SEO, i18n, and Accessibility Meta via ``. i18n with Paraglide.js `t()` function. Ensure ARIA, semantics, keyboard nav. **i18n Snippet:** ```svelte

{t('welcome')}

Rules

Svelte 5 & SvelteKit Ultimate Development Guide: Runes, TypeScript, Tailwind CSS & Performance Tips