Svelte5 Best Practices
Migrate and implement Svelte 5 event handlers, modifiers, and related patterns without leaning on deprecated Svelte 4 `on:` syntax.
Overview
Svelte 5 Best Practices is an agent skill for the Build phase that documents Svelte 5 event-handler syntax, modifier migrations, and related frontend patterns.
Install
npx skills add https://github.com/ejirocodes/agent-skills --skill svelte5-best-practicesWhat is this skill?
- Maps Svelte 4 `on:click` / `on:input` directives to Svelte 5 `onclick` / `oninput` attribute handlers
- Documents migration when event modifiers (`preventDefault`, `stopPropagation`) are removed—use explicit handler wrappers
- Covers capture-phase handlers via `onclickcapture` and touch options (`ontouchstartpassive`, `ontouchmovenonpassive`)
- Structured reference with 3 sections: Event Handler Syntax, Callback Props Pattern, Context API
- Reference organized into 3 top-level sections: Event Handler Syntax, Callback Props Pattern, and Context API
Adoption & trust: 3.6k installs on skills.sh; 4 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are upgrading or building Svelte 5 components but keep hitting outdated `on:` examples, missing modifiers, or incorrect listener attributes.
Who is it for?
Indie builders maintaining or migrating a Svelte app who want a concise in-repo cheat sheet for events and touch/capture listeners.
Skip if: Teams on Svelte 4-only codebases with no near-term upgrade, or projects that need full runes, routing, or state-management coverage beyond this events-focused excerpt.
When should I use this skill?
Editing Svelte components, migrating from Svelte 4 event directives, or generating Svelte 5 UI code that must use attribute-style handlers.
What do I get? / Deliverables
Your agent applies Svelte 5–correct event bindings and explicit modifier handling so components compile and behave as intended.
- Svelte 5–correct event handler implementations in components
- Migration notes from modifier pipes to explicit handler functions
Recommended Skills
Journey fit
The skill is a Svelte 5 UI reference aimed at writing and updating components during product construction. Content centers on event attributes, capture/passive listeners, and callback-style patterns—the core frontend component layer.
How it compares
Framework-specific reference snippets—not a generic linter or a full Svelte course.
Common Questions / FAQ
Who is svelte5-best-practices for?
Solo and indie frontend developers (and their coding agents) working in Svelte 5 who need accurate event-syntax guidance during implementation.
When should I use svelte5-best-practices?
Use it in Build → frontend when writing handlers, porting Svelte 4 templates, or tuning capture/passive touch listeners on interactive UI.
Is svelte5-best-practices safe to install?
It is documentation-only procedural knowledge with no declared network or shell requirements; review the Security Audits panel on this Prism page before trusting any third-party skill package.
SKILL.md
READMESKILL.md - Svelte5 Best Practices
# Svelte 5 Events Reference ## Table of Contents - [Event Handler Syntax](#event-handler-syntax) - [Callback Props Pattern](#callback-props-pattern) - [Context API](#context-api) --- ## Event Handler Syntax Svelte 5 replaces `on:click` directive syntax with standard HTML attribute syntax `onclick`. ### Basic Event Handlers **Svelte 4:** ```svelte <button on:click={handleClick}>Click</button> <input on:input={handleInput} /> <form on:submit={handleSubmit}>...</form> ``` **Svelte 5:** ```svelte <button onclick={handleClick}>Click</button> <input oninput={handleInput} /> <form onsubmit={handleSubmit}>...</form> ``` ### Event Modifiers Migration Event modifiers no longer exist. Use wrapper functions: **Svelte 4:** ```svelte <form on:submit|preventDefault={handleSubmit}>...</form> <button on:click|stopPropagation={handleClick}>...</button> ``` **Svelte 5:** ```svelte <script> function handleSubmit(event) { event.preventDefault(); // ... handle form } function handleClick(event) { event.stopPropagation(); // ... handle click } </script> <form onsubmit={handleSubmit}>...</form> <button onclick={handleClick}>...</button> ``` ### Capture, Passive, and NonPassive ```svelte <!-- Capture phase --> <div onclickcapture={handleCapture}> <button onclick={handleClick}>Click</button> </div> <!-- Passive listener --> <div ontouchstartpassive={handleTouch}>...</div> <!-- Non-passive --> <div ontouchmovenonpassive={(e) => e.preventDefault()}>...</div> ``` ### Inline Handlers ```svelte <button onclick={() => count++}>Count: {count}</button> <input oninput={(e) => name = e.target.value} /> ``` ### Event Handler Shorthand ```svelte <script> function onclick(event) { console.log('Clicked!', event); } </script> <button {onclick}>Click</button> ``` ### Spreading Event Handlers ```svelte <script> let handlers = { onclick: () => console.log('clicked'), onmouseenter: () => console.log('entered'), onmouseleave: () => console.log('left') }; </script> <button {...handlers}>Hover or Click</button> ``` ### Multiple Handlers for Same Event In Svelte 5, combine logic into one handler: ```svelte <script> function handleClick(event) { handler1(event); handler2(event); } </script> <button onclick={handleClick}>...</button> ``` ### TypeScript Event Typing ```svelte <script lang="ts"> function handleClick(event: MouseEvent) { console.log(event.clientX, event.clientY); } function handleInput(event: Event) { const target = event.target as HTMLInputElement; console.log(target.value); } function handleSubmit(event: SubmitEvent) { event.preventDefault(); const formData = new FormData(event.currentTarget as HTMLFormElement); } </script> ``` --- ## Callback Props Pattern Svelte 5 deprecates `createEventDispatcher` in favor of callback props for component-to-parent communication. ### Basic Event Pattern **Svelte 4:** ```svelte <!-- Button.svelte --> <script> import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); </script> <button on:click={() => dispatch('click', { timestamp: Date.now() })}>Click</button> <!-- Parent.svelte --> <Button on:click={(e) => console.log(e.detail)} /> ``` **Svelte 5:** ```svelte <!-- Button.svelte --> <script> let { onclick } = $props(); </script> <button onclick={() => onclick?.({ timestamp: Date.now() })}>Click</button> <!-- Parent.svelte --> <Button onclick={(data) => console.log(data)} /> ``` ### Multiple Callbacks ```svelte <!-- Dialog.svelte --> <script> let { onconfirm, oncancel, onclose } = $props(); </script> <dialog> <button onclick={() => onconfirm?.()}>Confirm</button> <button onclick={() => oncancel?.()}>Cancel</button> <button onclick={() => onclose?.()}>X</button> </dialog> <!-- Parent.svelte --> <Dialog onconfirm={() => save()} oncancel={() => reset()} onclose={() => visible = false} /> ``` ### Typed Callbacks with TypeScript ```svelte <sc