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

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:

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).