sveltekit-structure — Claude Code skill: SvelteKit layout rules
Tells the agent how to lay out routes, nested layouts and error boundaries in SvelteKit. Useful once a project grows and files start to blur.
npx skills add spences10/svelte-skills-kit --skill sveltekit-structure -a claude-codeWhat sveltekit-structure does
The skill spells out SvelteKit file rules for the agent: +page.svelte for a page, +layout.svelte for a wrapper, +error.svelte for an error boundary, +server.ts for an endpoint. A route like src/routes/about/+page.svelte maps to /about, and src/routes/posts/[id]/+page.svelte maps to /posts/123. A layout at any level wraps every descendant route, while folders in brackets such as (name) leave the URL alone.
Five reference files sit behind the main one: file naming, nested layouts, where +error.svelte goes, component-level svelte:boundary for errors and pending UI, plus SSR and browser-only code. The main SKILL.md stays short on purpose, with detail pushed into references/.
Error boundaries in SvelteKit sit above the failing route, so a +error.svelte placed at the wrong level will not catch what you expect. Worth checking your route tree before asking the agent to rewrite anything. Browser-only code needs a browser check, otherwise SSR breaks on window.
What it helps with
- lay out routes in folders without mixing them up
- wrap one part of the app in its own layout
- place
+error.svelteat the right level of the tree - add pending UI with
svelte:boundary - split server and browser code under SSR
Example prompts for the agent
- Help me lay out SvelteKit routes: I have /dashboard and /dashboard/settings and want a layout just for them
- Where should
+error.sveltelive so it catches errors inside /posts/[id]? - SSR breaks on
window— show me how to split server and client code
How to install sveltekit-structure
1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill sveltekit-structure -a claude-code2Manually: put the files in place
~/.claude/skills/sveltekit-structure/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/sveltekit-structure/
1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill sveltekit-structure -a codex2Manually: put the files in place
.agents/skills/sveltekit-structure/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill sveltekit-structure -a cursor2Manually: put the files in place
.cursor/skills/sveltekit-structure/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install spences10/svelte-skills-kit sveltekit-structure2Manually: put the files in place
.github/skills/sveltekit-structure/SKILL.md1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill sveltekit-structure -a gemini-cli2Platform CLI
gemini skills install https://github.com/spences10/svelte-skills-kit --path plugins/svelte-skills/skills/sveltekit-structureManually: put the files in place
.devin/skills/sveltekit-structure/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill sveltekit-structure -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about sveltekit-structure
How do I install sveltekit-structure in Claude?
Run npx skills add spences10/svelte-skills-kit --skill sveltekit-structure -a claude-code. The skill lands in ~/.claude/skills/sveltekit-structure/SKILL.md.
What does sveltekit-structure do?
It gives the agent SvelteKit structure rules: file naming, nested layouts, +error.svelte placement, svelte:boundary, and separating SSR from browser code.
Which platforms can use the skill?
Besides Claude there are install commands for Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode, each with its own SKILL.md path.
