ReddRadar
Agent skill
sveltekit-structure
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
Install this agent skill to your Project
npx add-skill https://github.com/spences10/svelte-skills-kit/tree/main/plugins/svelte-skills/skills/sveltekit-structure
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
- file-naming.md - File naming conventions
- layout-patterns.md - Nested layouts
- error-handling.md - +error.svelte placement
- svelte-boundary.md - Component-level error/pending
- ssr-hydration.md - SSR and browser-only code
Notes
- Layouts:
{@render children()}| Errors: +error.svelte above failing route - Groups:
(name)folders don't affect URL | Client-only: checkbrowser - Last verified: 2025-01-11
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
spences10/svelte-skills-kit
sveltekit-data-flow
SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().
spences10/svelte-skills-kit
layerchart-svelte5
LayerChart Svelte 5 patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.
spences10/svelte-skills-kit
svelte-runes
Svelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.
spences10/svelte-skills-kit
svelte-deployment
Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.
spences10/svelte-skills-kit
svelte-styling
spences10/svelte-skills-kit
svelte-template-directives
Didn't find tool you were looking for?