---
name: svelte-kit-builder
description: "Build fast SvelteKit apps: file-based routing, SvelteKit actions, and Svelte 5 runes. A SvelteKit expert who scaffolds pages, layouts, and API routes using Svelte 5's new rune syntax, handles server-side form actions, wires up Supabase/PlanetScale backends, and deploys to Vercel or Cloudflare."
license: MIT
---

# SvelteKit App Builder

A SvelteKit specialist that scaffolds and wires up production apps using Svelte 5 runes, file-based routing, and server-side form actions. It's for developers who want idiomatic SvelteKit code — proper `+page.server.ts` boundaries, typed `load` functions, and progressive-enhancement forms — without re-reading the docs for every route. Equally useful when starting fresh or grafting features onto an existing repo.

## When to use it

- Spinning up a new app with `npx sv create` and a sensible route tree.
- Converting Svelte 4 components (`$:`, `export let`, stores) to Svelte 5 runes.
- Adding authenticated routes with form actions instead of ad-hoc fetch handlers.
- Connecting a Supabase or PlanetScale backend and threading typed data through `load`.
- Configuring an adapter and shipping to Vercel or Cloudflare Pages.

## What it does

It works against the real SvelteKit conventions:

- **Routing:** `src/routes/` with `+page.svelte`, `+page.ts`/`+page.server.ts`, `+layout.svelte`, `+server.ts` for JSON endpoints, and `+error.svelte`. Dynamic segments like `[slug]` and `[...rest]`.
- **Runes:** `$state`, `$derived`, `$effect`, `$props`, and `$bindable` — not the legacy reactive label.
- **Form actions:** named `actions` exports plus the `use:enhance` action for progressive enhancement, returning `fail()` / `redirect()` from `@sveltejs/kit`.
- **Data:** `load` functions returning typed data via generated `./$types`, with `depends`/`invalidate` for re-fetching.
- **Backends:** Supabase client/SSR setup with `@supabase/ssr`, or a serverless MySQL driver for PlanetScale.
- **Deploy:** `adapter-vercel` or `adapter-cloudflare` in `svelte.config.js`.

## Example

```bash
curl -fsSL --create-dirs -o ~/.claude/skills/svelte-kit-builder/SKILL.md https://claudeskil.com/skills/svelte-kit-builder/SKILL.md
# then, in your project:
"Scaffold a /dashboard route with a server load that
 reads from Supabase, plus a form action to add a todo."
```

It generates `+page.server.ts` with a typed `load` and an `actions.default`:

```ts
export const actions = {
  default: async ({ request, locals }) => {
    const data = await request.formData();
    const title = data.get('title');
    if (!title) return fail(400, { missing: true });
    await locals.supabase.from('todos').insert({ title });
    return { success: true };
  }
};
```

## Tips & gotchas

- `$effect` runs only in the browser and during component lifecycle — don't use it for derived values; reach for `$derived` instead.
- Mutating `$state` objects works, but reassigning is clearest; arrays need a real reassignment or `.push` on the proxy, not a detached copy.
- Anything in `+page.server.ts` never ships to the client — put secrets and DB calls there, and keep `+page.ts` for universal loads only.
- Set your adapter before deploying; the default `adapter-auto` guesses the platform but pinning `adapter-vercel`/`adapter-cloudflare` avoids edge surprises.

## FAQ

**Does it use the new CLI or the old `create-svelte`?** The current `npx sv create` flow, which scaffolds Svelte 5 projects by default.

**Can it migrate my Svelte 4 code?** Yes — it converts `export let` to `$props()`, `$:` to `$derived`/`$effect`, and store auto-subscriptions where appropriate.

**Vercel or Cloudflare?** Either. It swaps the adapter in `svelte.config.js` and adjusts any platform-specific env access (e.g. `platform.env` on Cloudflare).