sveltekit-structure
installsforks
How to install sveltekit-structure?
spences10/svelte-skills-kit/sveltekit-structure
$npx -y skills add spences10/svelte-skills-kit --skill sveltekit-structureSvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
SKILL.md
| 1 | # SvelteKit Structure |
| 2 | |
| 3 | ## Quick Start |
| 4 | |
| 5 | **File types:** `+page.svelte` (page) | `+layout.svelte` (wrapper) | |
| 6 | `+error.svelte` (error boundary) | `+server.ts` (API endpoint) |
| 7 | |
| 8 | **Routes:** `src/routes/about/+page.svelte` → `/about` | |
| 9 | `src/routes/posts/[id]/+page.svelte` → `/posts/123` |
| 10 | |
| 11 | **Layouts:** Apply to all child routes. `+layout.svelte` at any level |
| 12 | wraps descendants. |
| 13 | |
| 14 | ## Example |
| 15 | |
| 16 | ``` |
| 17 | src/routes/ |
| 18 | ├── +layout.svelte # Root layout (all pages) |
| 19 | ├── +page.svelte # Homepage / |
| 20 | ├── about/+page.svelte # /about |
| 21 | └── dashboard/ |
| 22 | ├── +layout.svelte # Dashboard layout (dashboard pages only) |
| 23 | ├── +page.svelte # /dashboard |
| 24 | └── settings/+page.svelte # /dashboard/settings |
| 25 | ``` |
| 26 | |
| 27 | ```svelte |
| 28 | <!-- +layout.svelte --> |
| 29 | <script> |
| 30 | let { children } = $props(); |
| 31 | </script> |
| 32 | |
| 33 | <nav><!-- Navigation --></nav> |
| 34 | <main>{@render children()}</main> |
| 35 | <footer><!-- Footer --></footer> |
| 36 | ``` |
| 37 | |
| 38 | ## Reference Files |
| 39 | |
| 40 | - [file-naming.md](references/file-naming.md) - File naming |
| 41 | conventions |
| 42 | - [layout-patterns.md](references/layout-patterns.md) - Nested layouts |
| 43 | - [error-handling.md](references/error-handling.md) - +error.svelte |
| 44 | placement |
| 45 | - [svelte-boundary.md](references/svelte-boundary.md) - |
| 46 | Component-level error/pending |
| 47 | - [ssr-hydration.md](references/ssr-hydration.md) - SSR and |
| 48 | browser-only code |
| 49 | |
| 50 | ## Notes |
| 51 | |
| 52 | - Layouts: `{@render children()}` | Errors: +error.svelte _above_ |
| 53 | failing route |
| 54 | - Groups: `(name)` folders don't affect URL | Client-only: check |
| 55 | `browser` |
| 56 | - **Last verified:** 2025-01-11 |
| 57 | |
| 58 | <!-- |
| 59 | PROGRESSIVE DISCLOSURE GUIDELINES: |
| 60 | - Keep this file ~50 lines total (max ~150 lines) |
| 61 | - Use 1-2 code blocks only (recommend 1) |
| 62 | - Keep description <200 chars for Level 1 efficiency |
| 63 | - Move detailed docs to references/ for Level 3 loading |
| 64 | - This is Level 2 - quick reference ONLY, not a manual |
| 65 | |
| 66 | LLM WORKFLOW (when editing this file): |
| 67 | 1. Write/edit SKILL.md |
| 68 | 2. Format (if formatter available) |
| 69 | 3. Run: npx skills add . --list |
| 70 | 4. If the skill is not discovered, check SKILL.md frontmatter formatting |
| 71 | 5. Validate again to confirm |
| 72 | --> |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
