explainx.ainewsletter3.02k
Frontend

sveltekit-structure▌

spences10/svelte-skills-kit · updated Apr 8, 2026

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

SvelteKit routing, layouts, error handling, and SSR structure guidance.

  • ›File-based routing with +page.svelte for pages, +layout.svelte for nested wrappers, +error.svelte for error boundaries, and +server.ts for API endpoints
  • ›Nested layouts apply to all child routes; use route groups with (name) folders to organize without affecting URLs
  • ›Error boundaries and pending UI patterns via +error.svelte placement and svelte:boundary component-level error/pending states
  • ›SSR and hydration gu
skill.md

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

Discussion

Product Hunt–style comments (not star reviews)
  • No comments yet — start the thread.
general reviews

Ratings

4.7★★★★★46 reviews
  • ★★★★★Dhruvi Jain· Dec 24, 2024

    sveltekit-structure fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.

  • ★★★★★Layla Lopez· Dec 24, 2024

    Useful defaults in sveltekit-structure — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.

  • ★★★★★Oshnikdeep· Nov 15, 2024

    sveltekit-structure is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.

  • ★★★★★Henry Sharma· Nov 15, 2024

    sveltekit-structure has been reliable in day-to-day use. Documentation quality is above average for community skills.

  • ★★★★★Ganesh Mohane· Oct 6, 2024

    Keeps context tight: sveltekit-structure is the kind of skill you can hand to a new teammate without a long onboarding doc.

  • ★★★★★Layla Kapoor· Oct 6, 2024

    Solid pick for teams standardizing on skills: sveltekit-structure is focused, and the summary matches what you get after install.

  • ★★★★★Sakshi Patil· Sep 25, 2024

    I recommend sveltekit-structure for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.

  • ★★★★★Hiroshi Desai· Sep 21, 2024

    sveltekit-structure fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.

  • ★★★★★Anika White· Sep 17, 2024

    Registry listing for sveltekit-structure matched our evaluation — installs cleanly and behaves as described in the markdown.

  • ★★★★★Isabella Jackson· Sep 1, 2024

    sveltekit-structure reduced setup friction for our internal harness; good balance of opinion and flexibility.

showing 1-10 of 46

1 / 5