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

## 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
<script lang="ts">
  interface Props {
    count: number;
    name?: string;
  }
  let { count, name = 'Guest' } = $props<Props>();
</script>
```

## Mastering Svelte Runes

Reactive state with `$state`, derivations via `$derived`, effects through `$effect`, props with `$props`, and bindables using `$bindable`.

**Rune Examples:**
```svelte
<script lang="ts">
  let count = $state(0);
  let doubled = $derived(count * 2);
  let { userName = $bindable('') } = $props();

  $effect(() => {
    console.log(`Count: ${count}`);
  });
</script>
<button onclick={() => count++}>Increment</button>
<p>Doubled: {doubled}</p>
```

## 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
<div class="bg-primary text-primary-foreground p-4">
  Styled Content
</div>
```

## 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
<script lang="ts">
  import { appCounter } from './counter.svelte.ts';
</script>
<button onclick={() => appCounter.add()}>
  {appCounter.count}
</button>
```

## 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
<!-- +page.svelte -->
<form method="POST">
  <input name="email" />
  <button>Submit</button>
</form>
```
```typescript
// +page.server.ts
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    // Process
  }
};
```

## SEO, i18n, and Accessibility

Meta via `<svelte:head>`. i18n with Paraglide.js `t()` function. Ensure ARIA, semantics, keyboard nav.

**i18n Snippet:**
```svelte
<script>
  import { t } from '@inlang/paraglide-js';
</script>
<h1>{t('welcome')}</h1>