sveltekit

$npx mdskill add EpicenterHQ/epicenter/sveltekit

Handles SvelteKit routing, server logic, and framework behavior for app files and routes

  • Solves route configuration, server data loading, and SvelteKit-specific file handling
  • Uses SvelteKit APIs like load, hooks.server, +page.server, and server routes
  • Analyzes file structure and context to determine correct route or server behavior
  • Returns precise code suggestions or route behavior aligned with SvelteKit conventions

SKILL.md

.github/skills/sveltekitView on GitHub ↗
---
name: sveltekit
description: SvelteKit routing, load functions, server-only modules, form actions, hooks, cookies, env, adapters, and invalidation. Use when editing +page.ts, +page.server.ts, +layout.ts, +server.ts, hooks.server.ts, app.d.ts, or SvelteKit route behavior.
metadata:
  author: epicenter
  version: '1.0'
---

# SvelteKit

## Reference Repositories

- [SvelteKit](https://github.com/sveltejs/kit) - Svelte application framework for routing, server rendering, form actions, and adapters
- [Svelte](https://github.com/sveltejs/svelte) - Svelte 5 compiler and runtime

## Upstream Grounding

When SvelteKit load behavior, invalidation, cookies, hooks, env handling, server-only modules, generated `$types`, or adapter behavior affects correctness, ask DeepWiki a narrow question against `sveltejs/kit` before relying on memory. Verify decisive details against local installed types and source.

Use the `svelte` skill for component runes and template mechanics.

## Server Versus Universal Code

- Use `+page.server.ts` or `+layout.server.ts` for secrets, database access, auth, cookies, and `locals`.
- Use universal `+page.ts` or `+layout.ts` only for client-safe data and behavior.
- Keep server-only code in `$lib/server`, `.server` modules, `hooks.server.ts`, `+server.ts`, or server route files.
- Server `load` return values must be serializable.
- Do not store shared mutable request state in server modules or `load` functions. Put per-request state in `event.locals`.

## Loading, Invalidation, And Forms

- Use `depends`, `invalidate`, `invalidateAll`, and `untrack` deliberately. Do not assume server fetches are invalidation-trackable unless the dependency is explicit.
- Define form actions in `+page.server.ts`.
- Use `fail()` for validation failures so the page keeps form state and status.
- Use `use:enhance` only for `POST` forms.
- Put auth and session lookup in `hooks.server.ts`, then expose the request result through `event.locals`.

## Types And Boundaries

- Import generated route types from `./$types` in route files.
- Keep env reads in server code unless the value is intentionally public.
- Keep redirects and errors explicit with SvelteKit helpers so status codes survive SSR and client navigation.

More from EpicenterHQ/epicenter

SkillDescription
agent-goalWrite `/goal` prompts for long-running agent work in Codex or Claude Code. Use for slash goal, agent goal, durable objective, autonomous coding run.
approachability-auditReview code as a new TypeScript developer. Use when code feels indirect, clever, hard to follow, or needs a pass on abstractions, names, first-read clarity.
arktypeArktype: runtime validation, discriminated unions with .merge()/.or(), spread keys. Use when mentioning arktype, type(), union types, command/event schemas.
attach-primitiveContract and invariants for `attach*` composition primitives in `packages/workspace` (side-effectful building blocks like attachIndexedDb, attachSqlite, attachBroadcastChannel, attachEncryption, attachTable, openCollaboration), and when to use `create*` (pure construction) instead. Use when writing or reviewing an `attach*` or `create*` function, naming a new workspace primitive, composing inside a workspace builder, or deciding whether a primitive registers listeners at call time.
authEpicenter auth packages: `@epicenter/auth`, `@epicenter/auth-svelte`, OAuth sessions, identity state, auth-owned fetch/WebSocket, and workspace lifecycle binding. Use when editing Epicenter auth clients, session state, hosted sign-in, or auth/workspace integration.
autumnAutumn billing in Epicenter: `autumn.config.ts`, `autumn-js` credit checks, `atmn` CLI, plan gates, and metered AI usage. Use when changing billing, pricing, credits, plan access, refunds, or usage events.
better-auth-best-practicesBetter Auth server/client setup: `auth.ts`, generated schema, DB adapters, sessions, cookies, env vars, and plugins. Use when mentioning Better Auth, betterauth, auth handlers, OAuth, email/password, or session configuration.
better-auth-security-best-practicesBetter Auth security hardening: rate limits, secrets, CSRF, trusted origins, cookies, sessions, OAuth tokens, and audit logging. Use when reviewing auth security, brute-force protection, token handling, or deployment safety.
change-proposalPresent proposed code changes visually before implementing. Use when: "show me options", "compare approaches", "what should we do", or when changes need before/after comparison.
claude-code-consultUse this skill when the user asks to consult Claude, ask Claude Code, get another model's take, run a taste check, find cleaner options, or prepare a Claude prompt. Create a bounded second-opinion prompt or run a read-only Claude Code consult, then verify Claude's claims against local files.