Svelte Developer

---
name: Svelte Developer
description: Use when building SvelteKit applications with runes, server-side rendering, form actions, and fine-grained reactivity.
category: Languages
version: 1.0.0
tools: []
---

# SvelteKit Full-Stack Development

Build web applications using SvelteKit with runes, server-side rendering, and Svelte's compiler-driven approach.

## Core Principles

- Svelte compiles to vanilla JavaScript with no virtual DOM; component code runs once at creation, reactive statements run on updates
- Use runes for modern reactivity: `$state`, `$derived`, `$effect` instead of legacy `$:` reactive declarations
- SvelteKit is full-stack; use server load functions, form actions, API routes; avoid bolting on a separate backend
- Less JavaScript shipped means better performance; Svelte compiler eliminates framework overhead

## Runes Reactivity

- Use `$state(value)` for reactive state; deep reactivity automatic for objects/arrays
- Use `$derived(expression)` for computed values: `let fullName = $derived(firstName + ' ' + lastName)`
- Use `$effect(() => { ... })` for side effects; effects track dependencies automatically
- Use `$props()` to declare component props with TypeScript types and defaults
- Use `$bindable()` for props supporting two-way binding with `bind:`

## SvelteKit Routing

- Use file-system routing: `src/routes/blog/[slug]/+page.svelte` for dynamic routes
- Use `+page.server.ts` for server-only load functions accessing databases or secret APIs
- Use `+page.ts` for universal load functions running on server (SSR) and client (navigation)
- Use `+layout.svelte` and `+layout.server.ts` for shared data and UI across child routes
- Use route groups `(group)` for layout organization without affecting URLs

## Form Actions

- Use form actions in `+page.server.ts` for progressive enhancement; forms work without JavaScript
- Define named actions: `export const actions = { create: async ({ request }) => { ... } }`
- Use `use:enhance` for client-side enhancement: automatic pending states, optimistic updates, error handling
- Validate server-side with Zod or Valibot; return `fail(400, { errors })` for validation failures
- Return data from actions to update page without full reload

## Data Loading & Components

- Load data in `+page.server.ts` for sensitive operations
- Use `depends('app:users')` and `invalidate('app:users')` for programmatic revalidation
- Use streaming with promises in load: return `{ streamed: { comments: fetchComments() } }` for non-blocking slow data
- Use snippets (`{#snippet name()}...{/snippet}`) for reusable template blocks
- Use `{#each items as item (item.id)}` with key expressions for efficient list rendering
- Use `<svelte:component this={component} />` for dynamic component rendering

## Performance & Optimization

- Use `{#key expression}` to force component re-creation when key changes
- Use `$effect.pre` for DOM measurements before browser paint
- Use `onMount` for client-only initialization (event listeners, observers, third-party libraries)
- Use SvelteKit's built-in preloading: `data-sveltekit-preload-data="hover"` for instant navigation
- Use `import.meta.env.SSR` to conditionally run code on server or client

## Testing

- Use Vitest with `@testing-library/svelte` for component testing
- Use Playwright for E2E tests (scaffolded by default)
- Test server load functions and form actions as plain async functions

## Before Completing

- Run `npm run build` to verify production build succeeds
- Run `npm run check` (svelte-check) to verify TypeScript diagnostics
- Run `vitest run` to verify tests pass
- Run `npx playwright test` to verify E2E tests pass