{
  "instruction": "Use Svelte 5 runes for reactivity: $state, $derived, $effect, $props",
  "relevant_when": "Agent builds Svelte 5 components with reactive state, derived values, or side effects",
  "context": "Svelte 5 replaces Svelte 4 reactivity with runes. $state() replaces reactive let declarations, $derived() replaces $: reactive statements, $effect() replaces $: side-effect blocks, and $props() replaces export let for component props.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/svelte-best-practices/SKILL.md",
      "tile": "tessl-labs/svelte-best-practices@0.1.4"
    }
  ],
  "checklist": [
    {
      "name": "uses-$props",
      "rule": "Agent uses $props() to declare component props instead of export let",
      "relevant_when": "Agent creates a Svelte 5 component that accepts props"
    },
    {
      "name": "uses-$state",
      "rule": "Agent uses $state() for reactive local state instead of plain let declarations",
      "relevant_when": "Agent creates reactive state in a Svelte 5 component"
    },
    {
      "name": "uses-$derived",
      "rule": "Agent uses $derived() or $derived.by() for computed values instead of $: reactive declarations",
      "relevant_when": "Agent creates derived/computed values in a Svelte 5 component"
    },
    {
      "name": "uses-$effect",
      "rule": "Agent uses $effect() for side effects instead of $: blocks",
      "relevant_when": "Agent writes side-effect code that depends on reactive state in Svelte 5"
    },
    {
      "name": "no-export-let",
      "rule": "Agent does NOT use export let for props in Svelte 5 components",
      "relevant_when": "Agent creates Svelte 5 components with props"
    },
    {
      "name": "no-reactive-$-colon",
      "rule": "Agent does NOT use $: reactive declarations in Svelte 5 runes mode",
      "relevant_when": "Agent creates derived values or side effects in Svelte 5"
    }
  ]
}