with-svelte

Unified Svelte 5 + SvelteKit skill. This body is a router: apply the always-on core below, then READ the one reference file that matches the task before writing code. Load only the file(s) you need — not all of them.

Always-on core (every Svelte task)

Write runes-mode Svelte 5. Never reach for a legacy feature that has a modern replacement:

• $state instead of implicit let count = 0; count += 1
• $derived/$effect instead of $: — and prefer $derived over $effect (effects are an escape hatch; never set state inside one)
• $props instead of export let, $$props, $$restProps
• onclick={...} instead of on:click={...}
• {#snippet}/{@render} instead of <slot>, $$slots, <svelte:fragment>
• {@attach ...} instead of use:action
• <DynamicComponent> instead of <svelte:component this={...}>; import Self instead of <svelte:self>
• classes with $state fields instead of stores; createContext instead of setContext/getContext
• clsx-style class arrays/objects instead of the class: directive
• keyed {#each} — never use the index as the key