sveltekit-structure
Structural and best-practice guidance for SvelteKit applications, including routing and layout design.
Install
mkdir -p .claude/skills/sveltekit-structure && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/345" && unzip -o skill.zip -d .claude/skills/sveltekit-structure && rm skill.zipInstalls to .claude/skills/sveltekit-structure
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.Key capabilities
- →Structure SvelteKit routing with +page, +layout, and +server files
- →Implement nested layout patterns
- →Configure error boundaries using +error.svelte
- →Manage SSR and hydration patterns
- →Organize API routes and component-level boundaries
How it works
The skill provides structural guidance based on SvelteKit file naming conventions and routing patterns. It uses specific file types to define page behavior, layouts, and error handling.
Inputs & outputs
When to use sveltekit-structure
- →Configure nested layouts
- →Implement error boundaries with +error.svelte
- →Structure API routes
- →Handle SSR and hydration issues
About this skill
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
When not to use it
- →When working outside of a SvelteKit project structure
Limitations
- →Limited to SvelteKit-specific file conventions
- →Requires knowledge of SvelteKit routing mechanics
How it compares
It offers framework-specific structural best practices rather than generic web development advice.
Compared to similar skills
sveltekit-structure side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| sveltekit-structure (this skill) | 7 | 8mo | No flags | Intermediate |
| svelte-ui-design | 23 | 9mo | No flags | Intermediate |
| skeleton-svelte | 15 | 9mo | No flags | Beginner |
| svelte-expert | 11 | 9mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
svelte-ui-design
XIYO
ALWAYS use this skill for ANY Svelte component styling, design, or UI work. Svelte 5 UI design system using Tailwind CSS 4, Skeleton Labs design tokens/presets/Tailwind Components, and Bits UI headless components. Covers class composition, color systems, interactive components, forms, overlays, and all visual design.
skeleton-svelte
martinemde
Use this skill when working with Skeleton UI components in Svelte projects. It provides guidelines for Skeleton's component composition pattern, theme-aware color system, design presets, and layout patterns. Trigger when building UI components, styling elements, creating layouts, or working with Skeleton-specific features in Svelte 5 and SvelteKit 2+ projects.
svelte-expert
Raudbjorn
Expert Svelte/SvelteKit development assistant for building components, utilities, and applications. Use when creating Svelte components, SvelteKit applications, implementing reactive patterns, handling state management, working with stores, transitions, animations, or any Svelte/SvelteKit development task. Includes comprehensive documentation access, code validation with svelte-autofixer, and playground link generation.
svelte5-development
splinesreticulating
Comprehensive Svelte 5 and SvelteKit development guidance. Use this skill when building Svelte components, working with runes, or developing SvelteKit applications. Covers reactive patterns, component architecture, routing, and data loading.
tanstack-form
exceptionless
TanStack Form with Zod validation in Svelte 5. Form state management, field validation, error handling, and ProblemDetails integration. Keywords: TanStack Form, createForm, Field, form validation, zod schema, form errors, onSubmit, onSubmitAsync, problemDetailsToFormErrors
web-component-design
wshobson
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.