skills.rest
Tobbe3108
Tobbe3108COMMUNITY
Explore all skills by this author →
WebsiteGitHub

sveltekit-structure

Standardize SvelteKit project structure with routing, layouts, and error boundaries.

3|1|Updated Jun 3, 2025
Search Tags:#routing#ssr#hydration#sveltekit#layouts#project-structure#error-boundaries
One-click install
npx skills add https://github.com/Tobbe3108/GoPayShortcuts --skill sveltekit-structure-tobbe3108
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sveltekit-structure
Source: https://github.com/Tobbe3108/GoPayShortcuts/tree/main/.opencode/skills/sveltekit-structure
Command: npx skills add https://github.com/Tobbe3108/GoPayShortcuts --skill sveltekit-structure-tobbe3108

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

SvelteKit projects often struggle with consistent structure, routing, and component boundaries; this Skill provides a clear guide to organize pages, layouts, error boundaries, and SSR hydration patterns.

Core Features & Use Cases

  • Routing guidance: recommended file names and folder layouts using +page.svelte, +layout.svelte, +server.ts, and +error.svelte.
  • Layout composition: explains root vs nested layouts, and how to apply layouts to route groups.
  • Error handling patterns: explains +error.svelte placement and how to implement error boundaries in SvelteKit.
  • SSR & hydration: covers when to run code on server vs browser and how to ensure hydration works safely.
  • Reference material: points to accompanying references in the skill for deeper learning.

Quick Start

Review the SvelteKit structure guidance and apply it to your project by aligning your routes and layouts with the patterns shown in the examples. The Quick Start does not require installing additional tooling.

Frequently Asked Questions about sveltekit-structure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure SvelteKit routing and layouts for a scalable app?▼

SvelteKit layout composition separates root vs nested layouts using +layout.svelte files. You apply layouts to specific route groups by placing these layout files in the corresponding folder directories within your project structure.

How do I implement error boundaries in SvelteKit?▼

Implement SvelteKit error boundaries by adding +error.svelte files within your route directories. Correct +error.svelte placement ensures localized error handling and prevents the entire application from crashing during route failures.

How do SSR and hydration patterns work in SvelteKit?▼

SvelteKit project structure guidance requires no additional tooling installation to apply. You simply review the routing and layout patterns, align your existing routes with the recommended file naming conventions, and refactor accordingly.

What is the recommended file naming convention for SvelteKit pages and server endpoints?▼

The recommended SvelteKit file naming convention uses +page.svelte for UI, +server.ts for API endpoints, +layout.svelte for wrappers, and +error.svelte for error boundaries. These names standardize routing, SSR, and hydration logic.

Related Skills

Explore More Software Engineering Skills→
kvnapontekvnaponte

sveltekit-structure

Guide SvelteKit project directory and routing structure with layout examples.

Community
Intermediate
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
dotlab-hqdotlab-hq
1

baseline-ui

Enforce UI consistency baselines for Tailwind CSS and React projects.

Official
Intermediate
koralliskorallis
90

nextjs-server-components

Develop Next.js applications with React Server Components for server-side data fetching.

Community
Intermediate