Admin
5658dd24ff
Installed skills for the SvelteKit/Tailwind/Vite stack under web-player/.agents/skills (source of truth) with web-player/.claude/skills symlinked to it for tool compatibility, plus skills-lock.json tracking each skill's registry source and content hash.
82 lines
2.8 KiB
Markdown
82 lines
2.8 KiB
Markdown
---
|
|
name: svelte5-best-practices
|
|
description: "Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing."
|
|
license: MIT
|
|
metadata:
|
|
author: ejirocodes
|
|
version: '1.0.0'
|
|
---
|
|
|
|
# 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
|