sveltekit-builder

# SvelteKit Builder

Expert guidance for building production-ready SvelteKit applications with Svelte 5 runes, remote functions, and modern best practices.

## When to Use This Skill

Use this skill when:
- **Scaffolding new SvelteKit projects** with Svelte 5
- **Migrating from Svelte 4 to Svelte 5** (reactivity model changed fundamentally)
- **Implementing remote functions** (SvelteKit's type-safe server functions)
- **Optimizing performance** (bundle size, SSR, hydration, rendering)
- **Applying security patterns** (XSS prevention, input validation, secret management)
- **Integrating recommended stack** (Kysely, Better Auth, shadcn-svelte, Lucide, AI SDK)
- **Code reviews** where Svelte/SvelteKit patterns need validation
- **Debugging reactivity issues** or SSR hydration mismatches

## Knowledge Base Structure

This skill contains **105+ best practice rules** organized by impact and category:

### Svelte 5 Specific (`svelte5/`) - 66 rules

**CRITICAL Impact:**
- **Reactivity** (`reactivity-*`): $state, $derived, $effect - The foundation changed completely from Svelte 4
- **Remote Functions** (`remote-*`): Type-safe server functions in .remote.ts files
- **Security** (`template-html-*`): XSS prevention with {@html}
- **Async & Data Fetching** (`async-*`): Waterfalls, {#await}, svelte:boundary

**HIGH Impact:**
- **Component Patterns** (`component-*`): $props, callbacks, snippets (not slots anymore)
- **SSR & Hydration** (`ssr-*`): Server rendering, hydration mismatches
- **SvelteKit Patterns** (`sveltekit-*`): Load functions, form actions, error handling
- **Actions** (`actions-*`): Reusable DOM behavior
- **Accessibility** (`a11y-*`): Compiler warnings

**MEDIUM Impact:**
- **State Management** (`state-*`): Shared state, context, stores vs runes
- **Rendering Optimization** (`rendering-*`): Keyed {#each}, unnecessary reactivity
- **CSS & Styling** (`css-*`): Scoped styles, theming
- **Forms** (`forms-*`): Form handling patterns
- **Transitions & Animation** (`tran