# Sikandarjodd Cnblocks Cnblocks

> Svelte 5 Best Practices

- Skill: `tomevault-io/sikandarjodd-cnblocks-cnblocks` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/sikandarjodd-cnblocks-cnblocks`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/sikandarjodd-cnblocks-cnblocks/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/sikandarjodd-cnblocks-cnblocks

---


# Svelte 5 Best Practices

## Quick Reference

| Topic           | When to Use                                               | Reference                                   |
| --------------- | --------------------------------------------------------- | ------------------------------------------- |
| **Runes**       | $state, $derived, $effect, $props, $bindable, $inspect    | [runes.md](references/runes.md)             |
| **Snippets**    | Replacing slots, {#snippet}, {@render}                    | [snippets.md](references/snippets.md)       |
| **Events**      | onclick handlers, callback props, context API             | [events.md](references/events.md)           |
| **TypeScript**  | Props typing, generic components                          | [typescript.md](references/typescript.md)   |
| **Migration**   | Svelte 4 to 5, stores to runes                            | [migration.md](references/migration.md)     |
| **SvelteKit**   | Load functions, form actions, SSR, page typing            | [sveltekit.md](references/sveltekit.md)     |
| **Performance** | Universal reactivity, avoiding over-reactivity, streaming | [performance.md](references/performance.md) |

## Essential Patterns

### Reactive State

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

### Component Props

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

### Snippets (replacing slots)

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

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

### Event Handlers

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

### Callback Props (replacing createEventDispatcher)

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

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

## Common Mistakes

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

---
> Source: [SikandarJODD/cnblocks](https://github.com/SikandarJODD/cnblocks) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-29 -->