🎯

sveltekit-structure

🎯Skill

from spences10/svelte-claude-skills

What it does

Provides comprehensive guidance for structuring SvelteKit projects, covering routing, layouts, error handling, and SSR best practices.

📦

Part of

spences10/svelte-claude-skills(7 items)

sveltekit-structure

Installation

Add MarketplaceAdd marketplace to Claude Code

/plugin marketplace add spences10/claude-code-toolkit

Add MarketplaceAdd marketplace to Claude Code

/plugin marketplace add spences10/svelte-skills-kit

Install PluginInstall plugin from marketplace

/plugin install toolkit-skills@spences10-claude-code-toolkit

Install PluginInstall plugin from marketplace

/plugin install svelte-skills@spences10-svelte-skills-kit

git cloneClone repository

git clone https://github.com/yourusername/svelte-claude-skills.git ~/.claude/skills/svelte

+ 1 more commands

📖 Extracted from docs: spences10/svelte-claude-skills

Need more details? View full documentation on GitHub →

6Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.

Overview

# 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

```

```svelte

{@render children()}

```

Reference Files

[file-naming.md](references/file-naming.md) - File naming

conventions

[layout-patterns.md](references/layout-patterns.md) - Nested layouts
[error-handling.md](references/error-handling.md) - +error.svelte

placement

[svelte-boundary.md](references/svelte-boundary.md) -

Component-level error/pending

[ssr-hydration.md](references/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: check

browser

Last verified: 2025-01-11

More from this repository6

🎯

sveltekit-data-flow🎯Skill

Guides SvelteKit developers through optimal data flow strategies, load function selection, form actions, and server-client data handling patterns.

🎯

svelte-components🎯Skill

Builds and manages Svelte web components, form patterns, and component library integrations with best practices and accessibility.

🎯

svelte-runes🎯Skill

Provides comprehensive guidance for Svelte runes, helping developers correctly implement reactive state, props, effects, and attachments in Svelte 5.

🎯

sveltekit-remote-functions🎯Skill

Enables type-safe, schema-validated remote function calls in SvelteKit using command(), query(), and form() patterns with server-side execution.

🎯

research🎯Skill

Fetches, reads, and verifies source content to provide accurate research findings by directly examining original documents.

🎯

svelte-deployment🎯Skill

Deploys Svelte projects with adapter configurations, Vite setup, pnpm management, and production build optimizations.