---
name: "svelte-5-snippets-render-props"
description: "Author reusable template fragments and custom slot replacements using Svelte 5 Snippets."
metadata:
  author: "Svelte"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "write svelte 5 snippet"
  - "render snippet {@render}"
  - "replace slots svelte 5 snippets"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Svelte 5 Snippets & Render Delegation

Constructs modular templates in Svelte 5: declaring {#snippet name(params)}...{/snippet}, rendering snippets with {@render name(args)}, passing snippets as typed props, and replacing legacy <slot> elements.

## When to Invoke
Invoke this skill whenever you need to:
- write svelte 5 snippet
- render snippet {@render}
- replace slots svelte 5 snippets

## Execution SOP & Rules
1. Declare snippet block: {#snippet row(item: Item)} <tr><td>{item.name}</td></tr> {/snippet}.
2. Render snippet inline: {@render row(selectedItem)}.
3. Accept snippet as a component prop: let { header, children }: { header?: Snippet, children: Snippet } = $props();.
4. Render passed snippet safely: {#if header} {@render header()} {/if}.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.