ui-ux-pro-max-skill/.qoder/rules/svelte.md

trigger: glob glob: *.svelte

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Reactivity	Use $: for reactive statements	Automatic dependency tracking	$: for derived values	Manual recalculation	$: doubled = count * 2	let doubled; count && (doubled = count * 2)	Medium	Svelte Docs
2	Reactivity	Trigger reactivity with assignment	Svelte tracks assignments not mutations	Reassign arrays/objects to trigger update	Mutate without reassignment	items = [...items, newItem]	items.push(newItem)	High	Svelte Docs
3	Reactivity	Use $state in Svelte 5	Runes for explicit reactivity	let count = $state(0)	Implicit reactivity in Svelte 5	let count = $state(0)	let count = 0 (Svelte 5)	Medium	Svelte Blog
4	Reactivity	Use $derived for computed values	derived replaces : in Svelte 5	let doubled = $derived(count * 2)	$: in Svelte 5	let doubled = $derived(count * 2)	$: doubled = count * 2 (Svelte 5)	Medium	-
5	Reactivity	Use $effect for side effects	effect replaces : side effects	Use $effect for subscriptions	$: for side effects in Svelte 5	$effect(() => console.log(count))	$: console.log(count) (Svelte 5)	Medium	-
6	Props	Export let for props	Declare props with export let	export let propName	Props without export	export let count = 0	let count = 0	High	Svelte Docs
7	Props	Use $props in Svelte 5	$props rune for prop access	let { name } = $props()	export let in Svelte 5	let { name, age = 0 } = $props()	export let name; export let age = 0	Medium	-
8	Props	Provide default values	Default props with assignment	export let count = 0	Required props without defaults	export let count = 0	export let count	Low	-
9	Props	Use spread props	Pass through unknown props	{...$$restProps} on elements	Manual prop forwarding	<button {...$$restProps}>		Low	Svelte Docs
10	Bindings	Use bind: for two-way binding	Simplified input handling	bind:value for inputs	on:input with manual update		<input value={name} on:input={e => name = e.target.value}>	Low	Svelte Docs
11	Bindings	Bind to DOM elements	Reference DOM nodes	bind:this for element reference	querySelector in onMount		onMount(() => el = document.querySelector())	Medium	-
12	Bindings	Use bind:group for radios/checkboxes	Simplified group handling	bind:group for radio/checkbox groups	Manual checked handling		<input type="radio" checked={selected === value}>	Low	-
13	Events	Use on: for event handlers	Event directive syntax	on:click={handler}	addEventListener in onMount		onMount(() => btn.addEventListener())	Medium	Svelte Docs
14	Events	Forward events with on:event	Pass events to parent	on:click without handler	createEventDispatcher for DOM events		dispatch('click', event)	Low	-
15	Events	Use createEventDispatcher	Custom component events	dispatch for custom events	on:event for custom events	dispatch('save', { data })	on:save without dispatch	Medium	Svelte Docs
16	Lifecycle	Use onMount for initialization	Run code after component mounts	onMount for setup and data fetching	Code in script body for side effects	onMount(() => fetchData())	fetchData() in script body	High	Svelte Docs
17	Lifecycle	Return cleanup from onMount	Automatic cleanup on destroy	Return function from onMount	Separate onDestroy for paired cleanup	onMount(() => { sub(); return unsub })	onMount(sub); onDestroy(unsub)	Medium	-
18	Lifecycle	Use onDestroy sparingly	Only when onMount cleanup not possible	onDestroy for non-mount cleanup	onDestroy for mount-related cleanup	onDestroy for store unsubscribe	onDestroy(() => clearInterval(id))	Low	-
19	Lifecycle	Avoid beforeUpdate/afterUpdate	Usually not needed	Reactive statements instead	beforeUpdate for derived state	$: if (x) doSomething()	beforeUpdate(() => doSomething())	Low	-
20	Stores	Use writable for mutable state	Basic reactive store	writable for shared mutable state	Local variables for shared state	const count = writable(0)	let count = 0 in module	Medium	Svelte Docs
21	Stores	Use readable for read-only state	External data sources	readable for derived/external data	writable for read-only data	readable(0, set => interval(set))	writable(0) for timer	Low	Svelte Docs
22	Stores	Use derived for computed stores	Combine or transform stores	derived for computed values	Manual subscription for derived	derived(count, $c => $c * 2)	count.subscribe(c => doubled = c * 2)	Medium	Svelte Docs
23	Stores	Use $ prefix for auto-subscription	Automatic subscribe/unsubscribe	$storeName in components	Manual subscription	{$count}	count.subscribe(c => value = c)	High	-
24	Stores	Clean up custom subscriptions	Unsubscribe when component destroys	Return unsubscribe from onMount	Leave subscriptions open	onMount(() => store.subscribe(fn))	store.subscribe(fn) in script	High	-
25	Slots	Use slots for composition	Content projection	for flexible content	Props for all content	Default		Medium	Svelte Docs
26	Slots	Name slots for multiple areas	Multiple content areas		Single slot for complex layouts		with complex conditionals	Low	-
27	Slots	Check slot content with $$slots	Conditional slot rendering	$$slots.name for conditional rendering	Always render slot wrapper	{#if $$slots.footer}{/if}		Low	-
28	Styling	Use scoped styles by default	Styles scoped to component