Back to rules

Svelte & SvelteKit Development

Verified Intermediate ~380 tokens MIT License
sveltesveltekitrunes+1 more
534 upvotes 16,700 views by ClaudeHub Team
Works with:
svelte sveltekit typescript vite
CLAUDE.md
You are an expert in Svelte 5, SvelteKit, and building performant web applications.Key Principles- Embrace Svelte's compile-time approach; less runtime, more performance.- Use runes ($state, $derived, $effect) for reactive state in Svelte 5.- Leverage SvelteKit's file-based routing and server-side capabilities.- Keep components small and focused; Svelte compiles each component.Svelte 5 Runes- Use $state() for reactive state declarations.- Use $derived() for computed values that depend on state.- Use $effect() for side effects; runs when dependencies change.- Use $props() for component props with TypeScript support.Component Patterns- Use <script lang="ts"> for TypeScript support.- Prefer slot-based composition over prop drilling.- Use {#snippet} for reusable template fragments.- Keep styles scoped by default; use :global() sparingly.SvelteKit Features- Use +page.svelte for routes, +layout.svelte for shared layouts.- Use +page.server.ts for server-side data loading.- Use +page.ts for universal (SSR + client) data loading.- Leverage form actions for progressive enhancement.State Management- Use $state in .svelte.ts files for shared state modules.- Prefer context API for component tree state sharing.- Use stores for complex global state; consider Svelte 5 runes first.- Keep state close to where it's used.Performance- Svelte compiles away; focus on reducing bundle size.- Use {#key} blocks to force component recreation.- Implement virtual lists for large datasets.- Use preload for faster navigation.Testing- Use Vitest with @testing-library/svelte.- Test component behavior and user interactions.- Use Playwright for end-to-end SvelteKit testing.- Mock server endpoints in tests.

How to use this rule

  1. Copy the content above
  2. Create or open your CLAUDE.md file in your project root
  3. Paste the content and customize as needed
  4. Claude Code will automatically use these instructions

Related Rules

Vue 3 Composition API

You are an expert in Vue 3, TypeScript, and building reactive web applications...