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.
npx claudepluginhub spences10/svelte-skills-kit --plugin svelte-skillsThis skill uses the workspace's default tool permissions.
**File types:** `+page.svelte` (page) | `+layout.svelte` (wrapper) |
Provides expert SvelteKit guidance for full-stack apps with Svelte 5 runes ($state, $derived), SSR, form actions (+page.server.ts), load functions, and adapters like adapter-vercel.
Build full-stack web applications with SvelteKit: file-based routing, SSR, SSG, API routes, form actions, and load functions.
Enforces Svelte 5 best practices in SvelteKit: runes ($state, $derived, $effect), $props(), $bindable(), load functions, form actions, and SSR patterns to fix outdated Svelte 4 code.
Share bugs, ideas, or general feedback.
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
browser