How do I install the Sikandarjodd Cnblocks Cnblocks skill?

Run npx skillmds@latest add tomevault-io/sikandarjodd-cnblocks-cnblocks in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Sikandarjodd Cnblocks Cnblocks skill do?

Svelte 5 Best Practices It is listed under Web & Frontend on SkillMD.

Is Sikandarjodd Cnblocks Cnblocks safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Sikandarjodd Cnblocks Cnblocks?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Sikandarjodd Cnblocks Cnblocks free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Sikandarjodd Cnblocks Cnblocks?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Sikandarjodd Cnblocks Cnblocks by tomevault-io

Name: Sikandarjodd Cnblocks Cnblocks
Author: tomevault-io

File contents

Svelte 5 Best Practices

Quick Reference

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

Essential Patterns

Reactive State

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

Component Props

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

Snippets (replacing slots)

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

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

Event Handlers

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

Callback Props (replacing createEventDispatcher)

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

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

Common Mistakes

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

Source: SikandarJODD/cnblocks — distributed by TomeVault.

---name: sikandarjodd-cnblocks-cnblocksdescription: Svelte 5 Best Practices---# 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<button onclick={() => count++}>Click</button>```### Callback Props (replacing createEventDispatcher)```svelte<script> let { onclick } = $props();</script><button onclick={() => onclick?.({ data })}>Click</button>```## Common Mistakes1. **Using `let` without `$state`** - Variables are not reactive without `$state()`2. **Using `$effect` for derived values** - Use `$derived` instead3. **Using `on:click` syntax** - Use `onclick` in Svelte 54. **Using `createEventDispatcher`** - Use callback props instead5. **Using `<slot>`** - Use snippets with `{@render}`6. **Forgetting `$bindable()`** - Required for `bind:` to work7. **Setting module-level state in SSR** - Causes cross-request leaks8. **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).

Frequently asked questions

Sikandarjodd Cnblocks Cnblocks