forked from mirror/crumbs-original
Frederic CabassutandClaude Opus 4.6
3ff08f9e35
Install project-level skills via skills.sh CLI: - svelte5-best-practices (runes, snippets, events, migration) - sveltekit-structure (routing, layouts, error boundaries) - sveltekit-data-flow (load functions, form actions, serialization) - typescript-best-practices (type-first development, discriminated unions) - drizzle-migrations (SQLite schema, query patterns) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
80 lines
2.4 KiB
Markdown
80 lines
2.4 KiB
Markdown
---
|
|
name: sveltekit-structure
|
|
# IMPORTANT: Keep description on ONE line for Claude Code compatibility
|
|
# prettier-ignore
|
|
description: SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
|
|
---
|
|
|
|
# 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
|
|
<!-- +layout.svelte -->
|
|
<script>
|
|
let { children } = $props();
|
|
</script>
|
|
|
|
<nav><!-- Navigation --></nav>
|
|
<main>{@render children()}</main>
|
|
<footer><!-- Footer --></footer>
|
|
```
|
|
|
|
## 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
|
|
|
|
<!--
|
|
PROGRESSIVE DISCLOSURE GUIDELINES:
|
|
- Keep this file ~50 lines total (max ~150 lines)
|
|
- Use 1-2 code blocks only (recommend 1)
|
|
- Keep description <200 chars for Level 1 efficiency
|
|
- Move detailed docs to references/ for Level 3 loading
|
|
- This is Level 2 - quick reference ONLY, not a manual
|
|
|
|
LLM WORKFLOW (when editing this file):
|
|
1. Write/edit SKILL.md
|
|
2. Format (if formatter available)
|
|
3. Run: claude-skills-cli validate <path>
|
|
4. If multi-line description warning: run claude-skills-cli doctor <path>
|
|
5. Validate again to confirm
|
|
-->
|