# sveltekit-structure

Tells the agent how to lay out routes, nested layouts and error boundaries in SvelteKit. Useful once a project grows and files start to blur.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1000 installs · ★ 94
- Author: spences10
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/spences10/svelte-skills-kit/tree/HEAD/plugins/svelte-skills/skills/sveltekit-structure/SKILL.md
- Updated: 2026-10-12
- HTML: https://affpapa.org/en/nevibecode/skills/sveltekit-structure

## What it does

The skill spells out SvelteKit file rules for the agent: `+page.svelte` for a page, `+layout.svelte` for a wrapper, `+error.svelte` for an error boundary, `+server.ts` for an endpoint. A route like `src/routes/about/+page.svelte` maps to `/about`, and `src/routes/posts/[id]/+page.svelte` maps to `/posts/123`. A layout at any level wraps every descendant route, while folders in brackets such as `(name)` leave the URL alone.

Five reference files sit behind the main one: file naming, nested layouts, where `+error.svelte` goes, component-level `svelte:boundary` for errors and pending UI, plus SSR and browser-only code. The main `SKILL.md` stays short on purpose, with detail pushed into `references/`.

Error boundaries in SvelteKit sit above the failing route, so a `+error.svelte` placed at the wrong level will not catch what you expect. Worth checking your route tree before asking the agent to rewrite anything. Browser-only code needs a `browser` check, otherwise SSR breaks on `window`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill sveltekit-structure -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill sveltekit-structure -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill sveltekit-structure -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install spences10/svelte-skills-kit sveltekit-structure
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill sveltekit-structure -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/spences10/svelte-skills-kit --path plugins/svelte-skills/skills/sveltekit-structure
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill sveltekit-structure -a opencode
```

### 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/spences10/svelte-skills-kit/tree/HEAD/plugins/svelte-skills/skills/sveltekit-structure/SKILL.md

## When to use it
- lay out routes in folders without mixing them up
- wrap one part of the app in its own layout
- place `+error.svelte` at the right level of the tree
- add pending UI with `svelte:boundary`
- split server and browser code under SSR

## Example prompts
- Help me lay out SvelteKit routes: I have /dashboard and /dashboard/settings and want a layout just for them
- Where should `+error.svelte` live so it catches errors inside /posts/[id]?
- SSR breaks on `window` — show me how to split server and client code

## Similar
- [sveltekit](https://affpapa.org/en/nevibecode/skills/claude-mpm-team-sveltekit.md) — skill · 441 installs
- [bun-sveltekit](https://affpapa.org/en/nevibecode/skills/bun-sveltekit.md) — skill · 499 installs
- [sveltekit-typescript-guide-cursorrules-prompt-file](https://affpapa.org/en/nevibecode/rules/sveltekit-typescript-guide-cursorrules-prompt-file.md) — rule · ★ 41011
- [svelte-debug](https://affpapa.org/en/nevibecode/commands/svelte-debug.md) — command · 134 installs
- [svelte-scaffold](https://affpapa.org/en/nevibecode/commands/svelte-scaffold.md) — command · 127 installs
- [svelte5-best-practices](https://affpapa.org/en/nevibecode/skills/svelte5-best-practices.md) — skill · 16600 installs

From the same set: [spences10/svelte-skills-kit](https://affpapa.org/en/nevibecode/by/spences10/svelte-skills-kit.md) — 4 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