AI SummaryA Cursor rules booster that provides comprehensive documentation on Svelte 5 runes ($state, $derived, $effect, etc.) to help developers learn reactive primitives and control state management. Ideal for developers new to Svelte 5 or transitioning from non-runes mode.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "hello-svelte — Cursor Rules" prompt rules to my project. Repository: https://github.com/jsmidelov/hello-svelte Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
A small project to learn svelte
examples old vs new
Counter Example • Svelte 4 vs. Svelte 5: • Before: `html <script> let count = 0; $: double = count * 2; $: { if (count > 10) alert('Too high!'); } </script> <button on:click="{()" ="">count++}> {count} / {double}</button> ` • After: `html <script> let count = $state(0); let double = $derived(count * 2); $effect(() => { if
Custom Instructions for Svelte 5 Event Handlers
Overview In Svelte 5, event handlers are treated as properties, simplifying their use and integrating them more closely with the rest of the properties in the component. Basic Event Handlers • Declaration: Use properties to attach event handlers. `javascript <script> let count = $state(0); </script> <button onclick={() => count++}> clicks: {count} </button> ` • Shorthand Syntax: `javascript <script> let count = $state(0); function handleClick() { count++; } </script> <button {handleClick}> clicks: {count} </button> ` • Deprecation: The traditional on: directive is deprecated. Component Events • Replacing createEventDispatcher: Components should accept callback props instead of using createEventDispatcher. `javascript <script> import Pump from './Pump.svelte'; let size = $state(15); let burst = $state(false); function reset() { size = 15; burst = false; } </script> <Pump inflate={(power) => { size += power; if (size > 75) burst = true; }} deflate={(power) => { if (size > 0) size -= power; }} /> {#if burst} <button onclick={reset}>new balloon</button> <span class="boom">💥</span> {:else} <span class="balloon" style="scale: {0.01 * size}"> 🎈 </span> {/if} ` Bubbling Events • Accept Callback Props: `javascript <script> let { onclick, children } = $props(); </script> <button {onclick}> {@render children()} </button> ` • Spreading Props: `javascript <script> let { children, ...props } = $props(); </script> <button {...props}> {@render children()} </button> ` Event Modifiers • Avoiding Modifiers: Modifiers like |once, |preventDefault, etc., are not supported. Use wrapper functions instead. • Example Wrapper Functions: `javascript <script> function once(fn) { return function (event) { if (fn) fn.call(this, event); fn = null; }; } function preventDefault(fn) { return function (event) { event.preventDefault(); fn.call(this, event); }; } </script> <button onclick={once(preventDefault(handler))}>...</button> ` • Special Modifiers: For capture: `javascript <button onclickcapture={...}>...</button> ` Multiple Event Handlers • Combining Handlers: Instead of using multiple handlers, combine them into one. `javascript <button onclick={(e) => { handlerOne(e); handlerTwo(e); }} > ... </button> ` ---
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts