Asi sveltekit-structure

SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.

install

source · Clone the upstream repo

git clone https://github.com/plurigrid/asi

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/plurigrid/asi "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/sveltekit-structure" ~/.claude/skills/plurigrid-asi-sveltekit-structure && rm -rf "$T"

manifest: skills/sveltekit-structure/SKILL.md

source content

SvelteKit Structure

Quick Start

File types:

+page.svelte

(page) |

+layout.svelte

(wrapper) |

+error.svelte

(error boundary) |

+server.ts

(API endpoint)

Routes:

src/routes/about/+page.svelte

→

/about

src/routes/posts/[id]/+page.svelte

→

/posts/123

Layouts: Apply to all child routes.

+layout.svelte

at any level wraps descendants.

Example

src/routes/
├── +layout.svelte              # Root layout (all pages)
├── +page.svelte                # Homepage /
├── about/+page.svelte          # /about
└── dashboard/
    ├── +layout.svelte          # Dashboard layout (dashboard pages only)
    ├── +page.svelte            # /dashboard
    └── settings/+page.svelte   # /dashboard/settings

<!-- +layout.svelte -->
<script>
	let { children } = $props();
</script>

<nav><!-- Navigation --></nav>
<main>{@render children()}</main>
<footer><!-- Footer --></footer>

Reference Files

file-naming.md - File naming conventions
layout-patterns.md - Nested layouts
error-handling.md - +error.svelte placement
svelte-boundary.md - Component-level error/pending
ssr-hydration.md - SSR and browser-only code

Notes

Layouts:
```
{@render children()}
```
| Errors: +error.svelte above failing route
Groups:
```
(name)
```
folders don't affect URL | Client-only: check
```
browser
```
Last verified: 2025-01-11