Agent skill · software engineering · davila7
sveltekit
Build full-stack web applications with SvelteKit — file-based routing, SSR, SSG, API routes, and form actions in one framework.
Why this skill is useful
Provides specific patterns for file-based routing and API routes in SvelteKit that the AI wouldn't reliably generate on its own.
What it needs
Requires npm installed locally. About 5k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
SvelteKit Full-Stack Development Overview SvelteKit is the official full-stack framework built on top of Svelte. It provides file-based routing, server-side rendering (SSR), static site generation (SSG), API routes, and progressive form actions — all with Svelte's compile-time reactivity model that ships zero runtime overhead to the browser. Use this skill when building fast, modern web apps where both DX and performance matter. When to Use This Skill Use when building a new full-stack web application with Svelte Use when you need SSR or SSG with fine-grained control per route Use when migrating a SPA to a framework with server capabilities Use when working on a project that needs file-based routing and collocated API endpoints Use when the user asks about +page.svelte, +layout.svelte, load functions, or form actions How It Works Step 1: Project Setup Choose Skeleton project + TypeScript + ESLint/Prettier when prompted. Directory structure after scaffolding: Step 2: File-Based Routing Every +page.svelte file in src/routes/ maps directly to a URL: Route groups (no URL segment): wrap in (group)/ folder. Private routes (not accessible as URLs): prefix with or (group). Step 3: Loading Data with load Functions Use a +page.ts (universal) or +page.server.ts (server-only) file alongside the page: Step 4: API Routes (Server Endpoints) Create +server.ts files for REST-style endpoints: Step 5: Form Actions Form actions are the SvelteKit-native way to handle mutations — no client-side fetch required: Step 6: Layouts and Nested Routes Step 7: Rendering Modes Control per-route rendering with page options: Examples Example 1: Protected Dashboard Route Example 2: Hooks — Session Middleware Example 3: Preloading and Invalidation Best Practices ✅ Use +page.server.ts for database/auth logic — it never ships to the client ✅ Use $lib/server/ for shared server-only modules (DB client, auth helpers) ✅ Use form actions for mutations instead of client-side fetch — works without JS ✅ Type al …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/sveltekit