sveltekit

Getting Started

1. Install the skill using the command above
2. Open your AI coding agent (Claude Code, Codex, Gemini CLI, or Cursor)
3. Reference the skill in your prompt
4. The AI will use the skill's capabilities automatically

Example Prompts

• "Review the open pull requests and summarize what needs attention"
• "Generate a changelog from the last 20 commits on the main branch"

Overview

SvelteKit is a full-stack framework built on Svelte's compiler-first approach, shipping minimal JavaScript with no virtual DOM runtime. It provides file-based routing for pages and API endpoints, server-side form actions with progressive enhancement, and deployment adapters for any hosting platform.

Instructions

• When setting up routing, use file-based conventions: +page.svelte for pages, +layout.svelte for shared layouts, +server.ts for API endpoints, and route groups (name) for shared layouts without URL impact.
• When loading data, use +page.server.ts for server-only loading (database queries, secrets) and +page.ts for universal loading. Keep load() functions thin and move business logic to $lib/server/.
• When handling forms, use server-side form actions in +page.server.ts with fail() for validation errors and redirect() for success. Add use:enhance for progressive enhancement.
• When creating API routes, export GET, POST, PUT, DELETE handlers from +server.ts files, returning json(), text(), or error() responses.
• When configuring rendering, default to SSR, use export const prerender = true for static pages (marketing, docs, blog), and export const ssr = false for client-only pages.
• When adding middleware, use src/hooks.server.ts with the handle function for auth, logging, and redirects, and sequence() to compose multiple hooks.
• When deploying, choose the appropriate adapter: adapter-auto for auto-detection, adapter-node for self-hosted, adapter-static for full SSG, or platform-specific adapters for Vercel, Cloudflare, or Netlify.

Examples

Example 1: Build a CRUD app with form actions

User request: "Create a SvelteKit app with form-based task management"

Actions:

1. Define routes for task list (/tasks/+page.svelte) and detail (/tasks/[id]/+page.svelte)
2. Implement load() in +page.server.ts to fetch tasks from the database
3. Add form actions for create, update, and delete with Zod validation
4. Enhance forms with use:enhance for no-JS fallback

Output: A full-stack task management app with progressive enhancement and server-side validation.

Example 2: Deploy a hybrid SvelteKit app

User request: "Set up a SvelteKit site with static marketing pages and dynamic dashboard"

Actions:

1. Create marketing pages with export const prerender = true
2. Build dashboard routes with SSR and +page.server.ts for authenticated data loading
3. Add auth hook in src/hooks.server.ts to protect dashboard routes
4. Configure adapter-vercel with edge functions for the dashboard

Output: A hybrid app with pre-rendered marketing pages and server-rendered authenticated dashboard.

Guidelines

• Use +page.server.ts for data loading that touches databases or secrets; never expose credentials in +page.ts.
• Default to server-side form handling with actions; add use:enhance for progressive enhancement.
• Use export const prerender = true on marketing pages, docs, and blog posts.
• Keep load() functions thin: fetch data and return it, move business logic to $lib/server/.
• Use route groups (name) to share layouts without affecting URLs.
• Set data-sveltekit-preload-data="hover" on links for perceived-instant navigation.
• Always handle the form prop in +page.svelte to display validation errors after failed actions.