From svelte-skills
Provides SvelteKit structure guidance for routing, layouts, error handling, SSR, and svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
How this skill is triggered — by the user, by Claude, or both
Slash command
/svelte-skills:sveltekit-structureThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**File types:** `+page.svelte` (page) | `+layout.svelte` (wrapper) |
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.
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>
{@render children()} | Errors: +error.svelte above
failing route(name) folders don't affect URL | Client-only: check
browsernpx claudepluginhub spences10/svelte-skills-kit --plugin svelte-skillsBuilds SvelteKit routes using file-system conventions: +page.svelte, +layout.svelte, dynamic segments, route groups, and navigation patterns.
Builds full-stack SvelteKit web apps with file-based routing, SSR, SSG, API routes, form actions, and load functions. Activates for +page.svelte, +layout.svelte, or Svelte full-stack queries.
Svelte runes-first reactivity and SvelteKit fullstack conventions. Invoke whenever task involves any interaction with Svelte code — writing, reviewing, refactoring, debugging, or understanding .svelte, .svelte.js, .svelte.ts files and SvelteKit projects.