---
name: build-sveltekit-app
description: 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.
license: CC0-1.0
metadata:
  category: frontend
  tags: "svelte,typescript,website"
  author: johnny-bravo
  version: "1.0"
  updated: "2026-11-02"
  status: published
  aliases: "sveltekit, svelte 5, svelte runes"
  source_url: "https://github.com/PatrickJS/awesome-cursorrules/blob/b044f956f021b6e8877f16781bcfc466a6a120e9/rules/sveltekit-typescript-guide-cursorrules-prompt-file.mdc"
  source_license: CC0-1.0
  copyright: "Public domain (CC0 1.0) - rules contributed to PatrickJS/awesome-cursorrules"
  original_author: "awesome-cursorrules contributors (sveltekit-typescript-guide rules)"
  modified: "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."
  imported_on: "2026-11-02"
---

# Build a SvelteKit app

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

```svelte
<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.