Frontend · Skill

Build a SvelteKit app

build-sveltekit-app

Builds a SvelteKit app with TypeScript and Svelte 5 runes - create the project, use file-based routes, load data in +page.server.ts, handle forms with actions, manage state with $state and $derived, keep secrets server-side, and deploy with the right adapter. Use when the user wants to build with SvelteKit or Svelte, or asks about runes, load functions or form actions.

Works with: Any AI Not yet model-tested; testing Jan 2027

View raw SKILL.mdInstall

Paste it into ChatGPT, Claude, Gemini or any AI chat, then tell it about your project. How it works

Install in Claude Code, Cursor or Codex (optional)

Only for AI coding tools that read skill folders. Run one line in a terminal, in your project folder. It downloads this skill's text files from TheSkillVault and nothing else; you can read them first with “View raw SKILL.md”.

Claude Code (all your projects)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-sveltekit-app/raw' -o ~/'.claude/skills/build-sveltekit-app/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-sveltekit-app/files/LICENSE.txt' -o ~/'.claude/skills/build-sveltekit-app/LICENSE.txt'

Cursor (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-sveltekit-app/raw' -o '.cursor/skills/build-sveltekit-app/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-sveltekit-app/files/LICENSE.txt' -o '.cursor/skills/build-sveltekit-app/LICENSE.txt'

Codex and other Agent Skills tools (this project)

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-sveltekit-app/raw' -o '.agents/skills/build-sveltekit-app/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-sveltekit-app/files/LICENSE.txt' -o '.agents/skills/build-sveltekit-app/LICENSE.txt'

Or connect the whole library over MCP

Add TheSkillVault to Cursor or add this to your app's MCP settings (read-only; help):

{
  "mcpServers": {
    "theskillvault": {
      "url": "https://theskillvault.ai/mcp"
    }
  }
}

SvelteKit is Svelte's full-stack framework: pages, server code and forms in one project, with very little boilerplate.

When to use

  • You are starting a new web app and chose SvelteKit.
  • You want a Next.js alternative with less code per component.
  • You are moving an older Svelte 4 app to Svelte 5 runes.

When not to use

  • You want a mostly static content site. build-astro-site fits that better.

Steps

  1. Create the app: npx sv create my-app, pick TypeScript, then npm install and npm run dev.
  2. Add pages as folders under src/routes: src/routes/about/+page.svelte becomes /about.
  3. Share layout with +layout.svelte and put reusable components in src/lib.
  4. Load data on the server in +page.server.ts with a load function; the page gets it as data.
  5. Handle forms with form actions in +page.server.ts and use:enhance so they work with and without JavaScript.
  6. Use runes for state: let count = $state(0), let double = $derived(count * 2), side effects in $effect, props with $props().
  7. Read secrets only on the server through $env/static/private; public values use $env/static/public with the PUBLIC_ prefix.
  8. Add API endpoints as +server.ts files when you need JSON routes.
  9. Pick an adapter for your host (adapter-vercel, adapter-netlify, adapter-cloudflare, adapter-node) and run npm run build.
<script lang="ts">
  let { data } = $props();
  let query = $state("");
  let shown = $derived(data.items.filter((i) => i.name.includes(query)));
</script>

<input bind:value={query} placeholder="Filter" />
{#each shown as item}<p>{item.name}</p>{/each}

Gotchas

  • Never import $env/static/private or database code into a .svelte component; keep it in +page.server.ts or +server.ts.
  • Validate form action input on the server; client checks are only a convenience.
  • Svelte 4 syntax (export let, $:) still appears in tutorials. Use runes in Svelte 5 code.
  • $effect is for side effects, not for computing values. Use $derived instead.

Portability

Works on Vercel, Netlify, Cloudflare or any Node host through adapters. If you use plain Svelte with Vite instead of SvelteKit, the runes parts are the same.

Example prompt

"Build a SvelteKit app with TypeScript that lists my projects from a server load function and has a form action to add one."

Done when

  • Pages load data on the server and forms work with JavaScript turned off.
  • No secret is imported into client code.
  • npm run build passes with the adapter for your host.

---

Based on the SvelteKit TypeScript rules file in PatrickJS/awesome-cursorrules (CC0 1.0, public domain). See LICENSE.txt.

Bundled files

Licence

Adapted from awesome-cursorrules contributors (sveltekit-typescript-guide rules) (Public domain (CC0 1.0) - rules contributed to PatrickJS/awesome-cursorrules), CC0 1.0. Adapted by TheSkillVault: turned a long rules file into a build order for beginners with original examples; dropped the Supabase, Drizzle and shadcn specifics; added safety notes, gotchas, portability and done-when.

Licence: CC0 1.0. Attribution when you reuse it: Based on work by awesome-cursorrules contributors (sveltekit-typescript-guide rules) (Public domain (CC0 1.0) - rules contributed to PatrickJS/awesome-cursorrules, CC0 1.0), https://github.com/PatrickJS/awesome-cursorrules/blob/b044f956f021b6e8877f16781bcfc466a6a120e9/rules/sveltekit-typescript-guide-cursorrules-prompt-file.mdc; adapted by TheSkillVault, https://theskillvault.ai