programming-svelte

What problem does it solve?

This Skill helps you design and implement correct, maintainable Svelte 5 and SvelteKit applications without falling into common pitfalls around reactivity, state, and server/client boundaries.

Core Features & Use Cases

• Runes-first reactivity: Use $state, $derived, and $effect with guidance on when to use each and how to avoid loops.
• SvelteKit architecture clarity: Structure routes, layouts, server-only vs universal code, and shared loading patterns with +page.* and hooks.server.ts.
• Progressive-enhancement forms: Implement mutations using +page.server.ts actions and upgrade with use:enhance while returning validation errors properly.
• Practical performance and testing practices: Favor compiler optimizations, code-splitting patterns, and test strategies using Vitest, Testing Library, and Playwright.

Quick Start

Ask the skill to review your planned SvelteKit page and tell you where to put server-only logic, what runes to use for state and derived values, and how to implement the mutation with progressive-enhancement-friendly form actions.