Svelte Kit

What it does

This skill acts as an expert assistant for Svelte and SvelteKit development. It helps users generate, debug, and optimize SvelteKit applications by providing guidance on routing, server-side rendering (SSR) / static site generation (SSG) strategies, component design patterns, and reactivity management using either the newer "runes" syntax (Svelte 5) or older store-based approach (Svelte 4). The skill follows a structured thinking process to identify problems and suggest appropriate solutions.

When to use it

• You're encountering issues with SvelteKit routing, such as navigation problems or incorrect parameter handling.
• You need help understanding the implications of SSR vs CSR for your application’s rendering performance and data availability.
• You are experiencing reactivity problems where state updates aren't reflected correctly in your components.
• You're unsure how to structure your data loading logic using +page.ts versus +page.server.ts.
• You need assistance with component design patterns, including prop management and slot usage.

Key capabilities

• Problem Classification: Identifies the type of Svelte/SvelteKit problem (reactivity, rendering, routing, data loading, or component design).
• Version Awareness: Checks for Svelte version (4 vs 5) and SvelteKit version to ensure compatibility.
• SSR/CSR Analysis: Evaluates code execution context (server-only, server + client, client-only) and potential hydration mismatches.
• Data Flow Design Guidance: Provides advice on where data should come from and when it should be fetched.
• Syntax Assistance: Offers guidance on using Svelte 5 "runes" syntax versus the older store approach.

Example prompts

• "I'm having trouble with navigation in my SvelteKit app, how do I handle route parameters?"
• "My component isn’t updating when a variable changes. How can I debug this reactivity issue using runes?"
• "What's the difference between +page.ts and +page.server.ts, and when should I use each one?"

Tips & gotchas

• The skill defaults to Svelte 5 "runes" syntax unless explicitly told otherwise.
• Be mindful of SSR/CSR implications; avoid using browser-specific APIs (like window or document) in server-only code without proper checks. Use the provided $app/environment pattern for safe client-side execution.
• Always provide context about your Svelte and SvelteKit versions for more accurate assistance.