Svelte5 Best Practices

What it does

When your agent uses it

• Refactoring Svelte 5 components and SvelteKit applications
• : Svelte components
• Snippets ({snippet}
• SvelteKit data loading

Example prompts

• “/svelte5-best-practices”

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

1. 1Using let without $state - Variables are not reactive without $state()
2. 2Using $effect for derived values - Use $derived instead
3. 3Using on:click syntax - Use onclick in Svelte 5
4. 4Using createEventDispatcher - Use callback props instead
5. 5Using - Use snippets with {@render}`
6. 6Forgetting $bindable() - Required for bind: to work
7. 7Setting module-level state in SSR - Causes cross-request leaks
8. 8Sequential awaits in load functions - Use Promise.all for parallel requests

What it can do on your machine

Read from SKILL.md and the folder at commit 81c7209. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are svelte).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Svelte5 Best Practices loads about 810 tokens when it runs, and up to ~14k if it reads all its reference files. Until then it costs about 153 tokens; SKILL.md has 152 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~153

When it runs · the whole SKILL.md, loaded when a task matches

~810

With references · SKILL.md plus every file in references/, read only if the agent opens them

~14k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from SikandarJODD/cnblocks at commit 81c7209, republished under its MIT licence (© SikandarJODD). 152 words, ~810 tokens.

name

svelte5-best-practices

description

Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing.

license

MIT

metadata.author

ejirocodes

metadata.version

1.0.0

<script>
  let count = $state(0); // Reactive state
  let doubled = $derived(count * 2); // Computed value
</script>

<script>
  let { name, count = 0 } = $props();
  let { value = $bindable() } = $props(); // Two-way binding
</script>

<script>
  let { children, header } = $props();
</script>

{@render header?.()}
{@render children()}

<!-- Svelte 5: use onclick, not on:click -->
<button onclick={() => count++}>Click</button>

<script>
  let { onclick } = $props();
</script>

<button onclick={() => onclick?.({ data })}>Click</button>

© SikandarJODD, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 7 other files (references) in skills/svelte5-best-practices of SikandarJODD/cnblocks.

• SKILL.md
• references/events.md
• references/migration.md
• references/performance.md
• references/runes.md
• references/snippets.md
• references/sveltekit.md
• references/typescript.md

Open the folder on GitHubat commit 81c7209

Used in 1 other repository

We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in SikandarJODD/cnblocks, which our catalogue first saw on October 7, 2026.

• bretzel-app/crumbs.agents/skills/svelte5-best-practices