From hostack
When working with SvelteKit 2 — routes (+page, +layout, +server, +error), load functions, form actions, hooks (src/hooks.server.ts), or anything in src/routes/. Triggers on questions about routing, data loading, form submission, redirects, errors, environment variables, or hooks. Use the svelte skill for component-level concerns.
How this skill is triggered — by the user, by Claude, or both
Slash command
/hostack:sveltekitThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Project targets **SvelteKit 2 + Svelte 5**. Most LLM mistakes here are **SvelteKit 1 patterns**. **Read [references/breaking-changes.md](references/breaking-changes.md) first** before writing or reviewing any SvelteKit code — half the bugs are in that one file.
Project targets SvelteKit 2 + Svelte 5. Most LLM mistakes here are SvelteKit 1 patterns. Read references/breaking-changes.md first before writing or reviewing any SvelteKit code — half the bugs are in that one file.
| If you need to … | Read |
|---|---|
| Anything (mandatory first read for SK code) | references/breaking-changes.md |
| Add or modify a route, layout, matcher, route group | references/routing.md |
Write a load function, use parent/depends/invalidate, stream data, guard auth | references/load.md |
| Write or enhance form actions, handle file uploads | references/forms.md |
Add hooks.server.ts, hooks.client.ts, type App.Locals, handle errors | references/hooks.md |
Use environment variables, server-only modules ($lib/server) | references/env.md |
src/routes/<path>/)| File | Purpose |
|---|---|
+page.svelte | Page UI |
+page.ts | Universal load (SSR + browser) |
+page.server.ts | Server-only load + form actions |
+layout.svelte | Layout wrapping children — uses {@render children()} |
+layout.ts / +layout.server.ts | Shared load for children |
+server.ts | REST endpoint (GET/POST/PUT/DELETE/PATCH/OPTIONS/fallback) returning Response |
+error.svelte | Local error boundary (walks up tree to find one) |
Underscore-prefix folders/files (_components/, _utils.ts) are private — not routes.
error() and redirect() are called as statements, not thrown. error(404, 'x'), NOT throw error(404, 'x'). Don't wrap in try/catch — redirect() will fall into the catch.cookies.set / cookies.delete require { path: '/' } — throws otherwise.<slot /> is gone in +layout.svelte → let { children } = $props() + {@render children()}.$app/stores is deprecated → $app/state. No $ prefix: page.url.pathname, not $page.url.pathname.load are streamed, not auto-awaited. Use await to block render; leave bare to stream.goto() does NOT accept external URLs → use window.location.href = ....enctype="multipart/form-data" — throws at submission otherwise.use:enhance only works on +page.server.ts actions, not on +server.ts endpoints, not on GET forms.+layout.server.ts is wrong — layouts don't always rerun on navigation. Use hooks.server.ts to populate locals, then guard per-route.throw an error() from a streamed promise — headers are already flushed; the page partially renders, then explodes.breaking-changes.md first — it's short and catches most bugs../$types — never hand-roll PageLoad/Actions.npx claudepluginhub id-ego/hostack --plugin hostackProvides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.