mcpField
S
sveltekit-structure

sveltekit-structure

github.com/spences10Development16101 installsUpdated 16w ago
Repository

About sveltekit-structure

A reference skill for organizing SvelteKit routes, layouts, and error boundaries. It is for developers structuring SvelteKit applications, with concise file-path examples and notes on routing and browser-only code.

Key features

  1. 01Maps SvelteKit files to their roles
  2. 02Explains route paths from directory structure
  3. 03Shows nested layout organization
  4. 04Covers route error-boundary placement
  5. 05Notes route groups and browser-only code

Use cases

  1. 01Setting up a SvelteKit route tree
  2. 02Choosing files for pages and API endpoints
  3. 03Organizing layouts for nested sections

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/spences10/skills --skill sveltekit-structure

After installing, type/sveltekit-structurein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
error-handling.md
file-naming.md
layout-patterns.md
ssr-hydration.md
svelte-boundary.md

Details

From the project README

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

Notes

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

Comments

Markdown supported