{"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.","category":"frontend","tags":["svelte","typescript","website"],"models":["any"],"proven":false,"passing_families":0,"model_testing":"Not yet model-tested; testing Jan 2027","url":"https://theskillvault.ai/skills/build-sveltekit-app","api_url":"https://theskillvault.ai/api/skills/build-sveltekit-app","raw_url":"https://theskillvault.ai/api/skills/build-sveltekit-app/raw","body":"# Build a SvelteKit app\n\nSvelteKit is Svelte's full-stack framework: pages, server code and forms in one project, with very little boilerplate.\n\n## When to use\n- You are starting a new web app and chose SvelteKit.\n- You want a Next.js alternative with less code per component.\n- You are moving an older Svelte 4 app to Svelte 5 runes.\n\n## When not to use\n- You want a mostly static content site. build-astro-site fits that better.\n\n## Steps\n1. Create the app: `npx sv create my-app`, pick TypeScript, then `npm install` and `npm run dev`.\n2. Add pages as folders under `src/routes`: `src/routes/about/+page.svelte` becomes `/about`.\n3. Share layout with `+layout.svelte` and put reusable components in `src/lib`.\n4. Load data on the server in `+page.server.ts` with a `load` function; the page gets it as `data`.\n5. Handle forms with form actions in `+page.server.ts` and `use:enhance` so they work with and without JavaScript.\n6. Use runes for state: `let count = $state(0)`, `let double = $derived(count * 2)`, side effects in `$effect`, props with `$props()`.\n7. Read secrets only on the server through `$env/static/private`; public values use `$env/static/public` with the `PUBLIC_` prefix.\n8. Add API endpoints as `+server.ts` files when you need JSON routes.\n9. Pick an adapter for your host (`adapter-vercel`, `adapter-netlify`, `adapter-cloudflare`, `adapter-node`) and run `npm run build`.\n\n```svelte\n\n\n\n{#each shown as item}

{item.name}

{/each}\n```\n\n## Gotchas\n- Never import `$env/static/private` or database code into a `.svelte` component; keep it in `+page.server.ts` or `+server.ts`.\n- Validate form action input on the server; client checks are only a convenience.\n- Svelte 4 syntax (`export let`, `$:`) still appears in tutorials. Use runes in Svelte 5 code.\n- `$effect` is for side effects, not for computing values. Use `$derived` instead.\n\n## Portability\nWorks 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.\n\n## Example prompt\n\"Build a SvelteKit app with TypeScript that lists my projects from a server load function and has a form action to add one.\"\n\n## Done when\n- Pages load data on the server and forms work with JavaScript turned off.\n- No secret is imported into client code.\n- `npm run build` passes with the adapter for your host.\n\n---\nBased on the SvelteKit TypeScript rules file in PatrickJS/awesome-cursorrules (CC0 1.0, public domain). See LICENSE.txt.","files":["LICENSE.txt"],"license":"CC0-1.0","license_name":"CC0 1.0","license_url":"https://creativecommons.org/publicdomain/zero/1.0/","attribution":"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","install":{"claude_code":"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":"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'","agents":"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'","mcp_url":"https://theskillvault.ai/mcp","cursor_mcp_deeplink":"cursor://anysphere.cursor-deeplink/mcp/install?name=theskillvault&config=eyJ1cmwiOiJodHRwczovL3RoZXNraWxsdmF1bHQuYWkvbWNwIn0%3D","mcp_config":{"mcpServers":{"theskillvault":{"url":"https://theskillvault.ai/mcp"}}}},"bundles":[],"tested_on":[{"family":"chatgpt","name":"ChatGPT","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"claude","name":"Claude","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"gemini","name":"Gemini","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"grok","name":"Grok","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"llama","name":"Llama","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"deepseek","name":"DeepSeek","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"mistral","name":"Mistral","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"qwen","name":"Qwen","outcome":null,"date":null,"source":null,"counts":false,"stale":false},{"family":"kimi","name":"Kimi K","outcome":null,"date":null,"source":null,"counts":false,"stale":false}],"proven_rule":{"threshold":5,"window_days":365,"computed_at":"2026-11-02T03:20:33.817Z"}}