mcpField
S
sveltekit-structure

sveltekit-structure

github.com/spences10Development941.1k installsUpdated 2w ago
Repository

About sveltekit-structure

sveltekit-structure is a development skill for SvelteKit developers, covering routing and file organization. It explains nested layouts, error boundaries, and related reference material.

Key features

  1. 01Explains page, layout, and server file types
  2. 02Shows route and dynamic-route mappings
  3. 03Describes the scope of nested layouts
  4. 04Provides error-handling and SSR references

Use cases

  1. 01Planning a SvelteKit route structure
  2. 02Applying layouts to nested routes
  3. 03Finding guidance on error boundaries and browser-only code

Install

Copy the command and run it in a terminal.

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

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

Bundled files

References and scripts installed along with SKILL.md.

README.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: 2025-01-11

Comments

Markdown supported