sveltekit

Build full-stack SvelteKit applications with file-based routing, SSR, API routes, and form actions.

1|Updated Aug 17, 2025
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill sveltekit-ratnesh-maurya
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sveltekit
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/sveltekit
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill sveltekit-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building full-stack web applications requires coordinating routing, server-side rendering, API endpoints, and form handling across separate tools. This Skill provides structured guidance for implementing all of these in SvelteKit's unified framework, avoiding common mistakes like leaking server code to the client or mishandling form redirects. ## Core Features & Use Cases - File-Based Routing: Map +page.svelte files to URLs with dynamic segments, catch-all routes, and route groups. - Server-Side Data Loading: Use +page.server.ts load functions and hooks.server.ts to fetch data and manage sessions securely on the server. - API Routes & Form Actions: Create REST endpoints with +server.ts and handle mutations with progressive-enhancement form actions that work without JavaScript. - Use Case: Build a blog with a protected dashboard — server load functions fetch posts, hooks validate session cookies, and form actions handle a contact form with validation and redirects. ## Quick Start Scaffold a new SvelteKit project with TypeScript and build a page that loads data from a server load function and submits a form action.

Frequently Asked Questions about sveltekit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load data in SvelteKit pages?

Use a load function in +page.ts for universal loading or +page.server.ts for server-only loading. The returned data is passed to the page component as a typed data prop using the generated PageData type.

How do I create API routes in SvelteKit?

Create a +server.ts file inside a route directory and export HTTP method handlers like GET or POST typed as RequestHandler. Use the json helper from @sveltejs/kit to return responses with appropriate status codes.

What is the difference between +page.ts and +page.server.ts?

+page.ts runs on both server and client during navigation, while +page.server.ts runs exclusively on the server. Use the server variant for database queries, secrets, and auth logic that must never ship to the browser.

Why is locals.user undefined in my SvelteKit load function?

The locals object is only populated if you set it in src/hooks.server.ts before calling resolve(). Add a handle function that reads the session cookie and assigns the verified user to event.locals.

Why does my SvelteKit form action not redirect after submit?

Form actions require redirect(303, '/path') from @sveltejs/kit rather than a plain return statement. The 303 status is required for POST redirects so the browser issues a GET request to the target.

Can SvelteKit control SSR and prerendering per route?

Yes, export prerender, ssr, and csr constants from a page's load file to control rendering per route. Setting prerender to true generates the page at build time, while ssr false disables server rendering.