Verwendung
- Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
- Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
- Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.
npx skills add https://github.com/ejirocodes/agent-skills --skill svelte5-best-practicesVor dem Start
- Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
- Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.
Originales Skill-Dokument
Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.
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
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
- Using `let` without `$state` - Variables are not reactive without
$state() - Using `$effect` for derived values - Use
$derivedinstead - Using `on:click` syntax - Use
onclickin 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.allfor parallel requests
