{
  "instruction": "Use Svelte 5 component patterns: onclick events, callback props, snippets for composition",
  "relevant_when": "Agent builds Svelte 5 components with events, composition, or child content",
  "context": "Svelte 5 replaces on:click with onclick attributes, createEventDispatcher with callback props, and <slot> with {#snippet} blocks and {@render}. The children prop (type Snippet) replaces the default slot.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/svelte-best-practices/SKILL.md",
      "tile": "tessl-labs/svelte-best-practices@0.1.4"
    }
  ],
  "checklist": [
    {
      "name": "uses-onclick-not-on-click",
      "rule": "Agent uses onclick={handler} attribute syntax instead of on:click={handler} directive",
      "relevant_when": "Agent adds event handlers to elements in Svelte 5"
    },
    {
      "name": "uses-callback-props-not-dispatch",
      "rule": "Agent uses callback props (e.g. onsave, onchange) instead of createEventDispatcher for component events",
      "relevant_when": "Agent creates Svelte 5 components that emit events to parents"
    },
    {
      "name": "uses-snippets-not-slots",
      "rule": "Agent uses {#snippet} blocks and {@render} instead of <slot> for component composition",
      "relevant_when": "Agent creates Svelte 5 components that accept child content or named content areas"
    },
    {
      "name": "uses-children-snippet",
      "rule": "Agent uses the children prop (type Snippet from 'svelte') instead of default <slot> for component default content",
      "relevant_when": "Agent creates a Svelte 5 wrapper component that renders child content"
    },
    {
      "name": "no-event-modifiers",
      "rule": "Agent does NOT use on:click|preventDefault syntax; instead calls e.preventDefault() directly",
      "relevant_when": "Agent needs to prevent default behavior or stop propagation in Svelte 5 event handlers"
    }
  ]
}