Svelte

Avoid common Svelte mistakes — reactivity triggers, store subscriptions, and SvelteKit SSR gotchas.

Security Scan

This is an instruction-only Svelte reference: its requirements and instructions align with its stated purpose and it does not request credentials or perform installs.

Purpose & Capability

The skill is a Svelte guidance/reference doc. Declaring Node as a required binary is reasonable for a Svelte-oriented skill (Svelte tooling typically uses Node). No unrelated binaries, env vars, or config paths are requested.

Instruction Scope

SKILL.md contains static guidance (reactions, stores, lifecycle, SvelteKit SSR gotchas, Svelte 5 runes). It does not instruct the agent to read files, environment variables, run shell commands, or transmit data to external endpoints.

Install Mechanism

There is no install spec and no code files. Instruction-only skills have a minimal on-disk footprint and lower risk.

Credentials

The skill requests no environment variables, credentials, or config paths; this is proportionate for a documentation-style skill.

Persistence & Privilege

always is false and the skill does not request elevated or persistent privileges. Model invocation is allowed (the platform default), which is normal for skills; nothing here amplifies that risk.

Assessment

This skill is effectively a Svelte cheat-sheet and is low-risk: it contains only documentation and asks for no secrets or installs. The only declared requirement (node) is sensible for Svelte guidance. Note the source/homepage are not provided—because the skill is instruction-only that’s a minor issue, but if you prefer provenance, you may want to only install skills with a known homepage or owner. Also be aware that allowing autonomous invocation (the platform default) means the agent can call this skill without asking; if you want stricter control, keep it user-invocable only or review future updates for added install steps or code.

Reactivity Triggers

• Assignment triggers reactivity — arr = arr after push, or use arr = [...arr, item]
• Array methods don't trigger — arr.push() needs reassignment: arr = arr
• Object mutation same issue — obj.key = val; obj = obj or spread: obj = {...obj, key: val}
• $: reactive statements run on dependency change — but only top-level assignments tracked

Reactive Statements

• $: runs when dependencies change — list all dependencies used
• $: { } block for multiple statements — all run together
• $: order matters — later statements can depend on earlier
• Avoid side effects in $: — prefer derived values, use onMount for effects

Stores

• $store auto-subscribes in component — automatic unsubscribe on destroy
• Manual subscribe needs unsubscribe — const unsub = store.subscribe(v => ...); onDestroy(unsub)
• writable for read/write — readable for external data sources
• derived for computed values — derived(store, $s => $s * 2)

Component Lifecycle

• onMount runs after first render — return cleanup function
• No access to DOM before onMount — document etc. not available in SSR
• beforeUpdate / afterUpdate for DOM sync — rarely needed
• tick() to wait for DOM update — await tick() after state change

Props

• export let propName to declare — required by default
• export let propName = default for optional — default value if not passed
• Props are reactive — component re-renders on change
• $$props and $$restProps for pass-through — but explicit props preferred

Events

• createEventDispatcher for custom events — dispatch('eventName', data)
• on:eventName to listen — on:click, on:customEvent
• on:click|preventDefault modifiers — |stopPropagation, |once
• Event forwarding: on:click without handler — forwards to parent

SvelteKit

• +page.svelte for pages — +page.server.ts for server-only load
• load function for data fetching — runs on server and client navigation
• $app/stores for page, navigating, etc. — $page.params, $page.url
• form actions for mutations — progressive enhancement, works without JS

SSR Gotchas

• browser from $app/environment — check before using window/document
• onMount only runs client-side — safe for browser APIs
• Stores initialized on server shared between requests — use context for request-specific
• fetch in load is special — relative URLs work, credentials handled

Svelte 5 Runes

• $state() replaces let for reactivity — let count = $state(0)
• $derived replaces $: for computed — let doubled = $derived(count * 2)
• $effect for side effects — replaces $: with side effects
• Runes are opt-in per file — can mix with Svelte 4 syntax

Common Mistakes

• Destructuring props loses reactivity — let { prop } = $props() in Svelte 5, or don't destructure in 4
• Store value vs store — $store for value, store for subscribe/set
• Transition on conditional — {#if show}<div transition:fade> not on wrapper
• Key block for re-render — {#key value}...{/key} destroys and recreates