sveltekit_skill

Overview

This skill guides SvelteKit app architecture, routing, data loading, and deployment using official SvelteKit patterns. It focuses on file-based routing, load functions, server vs universal code, adapters, and prerender/SSR configuration. The goal is practical, actionable advice for building and debugging SvelteKit apps.

How this skill works

I inspect your routing layout under src/routes and recommend where to place +page, +layout, +server, and endpoint files. I explain how load functions and form actions should be used, what belongs on the server, and how to pass serialized data to the client. I also map configuration to svelte.config.js, vite.config.js, and deployment adapters so you can choose the right build target.

When to use it

• Designing or refactoring application routing and nested layouts
• Implementing data fetching with load / +page.server and form actions
• Creating API endpoints or server-only logic in +server files
• Configuring SSR, prerendering, or static builds with adapters
• Debugging serialization errors, environment variables, or client/server boundaries

Best practices

• Use file-based routing: place routes in src/routes and use +page/+layout/+server consistently
• Keep secrets and DB calls in +server or hooks.server; never expose them in universal load
• Return only serializable data from load functions; use JSON-friendly primitives and avoid DOM or class instances
• Favor form actions for mutations and POST endpoints in +server to leverage built-in CSRF protections
• Select an adapter that matches deployment (adapter-static for prerendered sites, adapter-node or platform-specific adapters for SSR)

Example use cases

• Create nested layouts: add +layout.svelte and +layout.server.js to load shared data for child pages
• Implement authenticated routes: check session in hooks.server and redirect in load or handle via protected endpoints
• Pre-render a marketing site: configure prerender in svelte.config.js and use adapter-static for deployment
• Build an API endpoint: implement GET/POST handlers in src/routes/api/+server.js and return typed JSON
• Migrate client logic to server: move DB queries from universal load to +page.server to avoid leaking secrets