svelte-patternslisted
Install: claude install-skill jjackkun/claude-harness-hermes
# Svelte / SvelteKit Patterns
Modern Svelte 5 + SvelteKit patterns. Prefer runes over legacy `$:` and `export let`.
## When to Activate
- Editing `.svelte` / `.svelte.ts` / `.svelte.js` files
- Working under `src/routes/` (+page, +layout, +server, +error)
- Writing `load()` functions, form actions, or hooks
- Designing stores, reactive state, or derived values
- SSR vs CSR decisions, data fetching, progressive enhancement
## Runes (Svelte 5)
```svelte
<script lang="ts">
// state — reactive local state
let count = $state(0);
// derived — pure computed, re-runs only when deps change
let double = $derived(count * 2);
// effect — side effects, runs after DOM updates
$effect(() => {
document.title = `Count: ${count}`;
return () => {}; // cleanup
});
// props — replace `export let`
let { title, onclick }: { title: string; onclick: () => void } = $props();
// bindable props
let { value = $bindable() }: { value: string } = $props();
</script>
```
**Rules:**
- `$state` only for values that change. Never wrap immutable data.
- `$derived` for pure computation. No side effects inside.
- `$effect` for DOM/IO sync only. If you're using it to compute a value, use `$derived` instead.
- Avoid `$:` legacy syntax in new code.
## Component Props
```svelte
<script lang="ts">
interface Props {
user: { id: string; name: string };
variant?: 'primary' | 'secondary';
onclick?: (e: MouseEvent) => void;
children?: import('svelte').Snippet;
}