# sveltekit

A Claude skill that guides work on SvelteKit apps: routes from files, server rendering, endpoints and form handling.

- skill · `type=skill` · Claude Code · 50 installs
- Author: suhaibjanjua
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/web-development/sveltekit
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/sveltekit

## What it does

The skill covers SvelteKit, the full-stack framework built on Svelte. Your agent gets instructions on routing driven by the file tree, server-side rendering and static generation, API endpoints, and form actions. The walkthrough goes step by step: scaffolding a project, the directory layout, fetching data in `load`, endpoints in `+server.ts`, forms with `use:enhance`, nested layouts, and per-route rendering options.

There are also examples of a guarded route, hooks used as session middleware, and re-running loaders with `invalidateAll`. A short practice list follows: keep database and auth code in `+page.server.ts`, share server-only modules under `$lib/server/`, type loader results with the generated `$types`.

The skill assumes a project created with `npm create svelte@latest`. Without Node.js and npm on the machine its steps go nowhere, so check your setup first. It earns its place when you start a fresh SvelteKit app or move a single-page app onto a framework with a server side.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill web-development/sveltekit
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill sveltekit -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/sveltekit/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/sveltekit/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/sveltekit/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/sveltekit/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates sveltekit
```

2. **Manually: put the files in place**
- File: `.github/skills/sveltekit/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/sveltekit
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/sveltekit/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/web-development/sveltekit

## When to use it
- map URLs to files instead of hand-writing a router
- turn on server rendering or static output for chosen pages
- put an endpoint next to the page that uses it
- handle a form submit without a client-side request
- gate a section of the site behind a session check in a hook

## Example prompts
- Scaffold a new SvelteKit project with TypeScript and show me the `src/routes` layout
- Add a `+server.ts` endpoint that lists posts and accepts a `limit` parameter
- Build a subscribe form with an action in `+page.server.ts` and `use:enhance`

## Similar
- [bun-sveltekit](https://affpapa.org/en/nevibecode/skills/bun-sveltekit.md) — skill · 499 installs
- [sveltekit-structure](https://affpapa.org/en/nevibecode/skills/sveltekit-structure.md) — skill · 1000 installs
- [sveltekit-svelte5-tailwind-skill](https://affpapa.org/en/nevibecode/skills/sveltekit-svelte5-tailwind-skill.md) — skill · 561 installs
- [sveltekit-data-flow](https://affpapa.org/en/nevibecode/skills/sveltekit-data-flow.md) — skill · 492 installs
- [sveltekit-typescript-guide-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/sveltekit-typescript-guide-cursorrules-prompt-file.md) — rule · ★ 41024
- [nuxt](https://affpapa.org/en/nevibecode/skills/nuxt.md) — skill · 24100 installs

## Other versions with the same name
- [sveltekit · mindrally](https://affpapa.org/en/nevibecode/skills/mindrally-sveltekit.md) — 720 installs
- [sveltekit · bobmatnyc](https://affpapa.org/en/nevibecode/skills/claude-mpm-team-sveltekit.md) — 441 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md