spences10/sveltekit-structure
plugins/svelte-skills/skills/sveltekit-structure/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.
$ install --global
skillsauthnpx skillsauth add spences10/svelte-skills-kit sveltekit-structureInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 25, 2026, 7:24 AM9.6s7 files scanned
SKILL.md
- name:
- sveltekit-structure
- # IMPORTANT:
- Keep description on ONE line for agent compatibility
- 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
<!-- +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
Related Skills
spences10/sveltekit-remote-functions
databases
VerifiedTrustedCommunity
SvelteKit remote functions guidance. Use for query(), form(), command(), and prerender() patterns in .remote.ts files.
75SKILL.mdUpdated Apr 25, 2026
spences10/sveltekit-data-flow
tools
VerifiedTrustedCommunity
SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().
75SKILL.mdUpdated Apr 25, 2026
spences10/svelte-template-directives
tools
VerifiedTrustedCommunity
Svelte template directives ({@attach}, {@html}, {@render}, {@const}, {@debug}). Use for DOM manipulation, third-party libs, tooltips, canvas, dynamic HTML. @attach replaces use: actions.
75SKILL.mdUpdated Apr 25, 2026
spences10/svelte-styling
development
VerifiedTrustedCommunity
Svelte CSS styling patterns. Use for scoped styles, CSS custom properties, style: directive, :global, or styling child components.
75SKILL.mdUpdated Apr 25, 2026