svelte

Scaffold a new SvelteKit + Svelte 5 + shadcn-svelte project with optional testing and remote functions setup

Proactively reviews Svelte 5 and SvelteKit code for antipatterns, performance issues, and best practice violations after .svelte file edits. <example> User edits src/routes/+page.svelte → Review for runes misuse, reactivity issues </example> <example> User creates src/lib/components/Card.svelte → Verify best practices </example>

Accessibility best practices for Svelte 5 applications. Use when users ask about accessibility, a11y, ARIA attributes, screen readers, keyboard navigation, focus management, semantic HTML, or making Svelte apps accessible to users with disabilities.

Advanced component patterns for Svelte 5 including snippets, slots, headless components, compound components, and render delegation. Use when users ask about component architecture, reusable components, snippets vs slots, compound components, headless UI, render props, component composition, or building component libraries in Svelte 5.

Performance optimization techniques for Svelte 5 and SvelteKit applications. Use when users ask about performance, optimization, slow rendering, bundle size, memory leaks, profiling, lazy loading, code splitting, or when diagnosing performance issues in Svelte applications.

Deep patterns and best practices for Svelte 5's reactivity system. Use when working with $state, $derived, $effect, $props, $bindable, $inspect, or when users ask about Svelte 5 reactivity, state management, reactive declarations, or migrating from Svelte 4 reactive statements ($:).

Modern testing patterns for Svelte 5 using vitest-browser-svelte and Sveltest methodology. Use when users ask about testing Svelte components, unit tests, integration tests, vitest, vitest-browser-svelte, testing runes, testing $state/$derived/$effect, or setting up a test environment for Svelte 5.

Patterns for SvelteKit remote functions (query, command, form, batch) from $app/server. Use when working with .remote.ts files, server-side data fetching with query(), mutations with command(), form handling with form(), request batching, or when users ask about calling server functions from client code, type-safe RPC, or replacing load functions with remote functions.

Server-side SvelteKit patterns including load functions, form actions, hooks, and API routes. Use when working with +page.server.ts, +layout.server.ts, +server.ts, hooks.server.ts, load functions, form actions, handle/handleFetch/handleError hooks, or when users ask about server-side data loading, authentication, authorization, or API endpoints in SvelteKit.