Mode d’emploi
- Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
- Consultez le document original pour les outils, identifiants et environnements requis.
- Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/ejirocodes/agent-skills --skill svelte5-best-practicesAvant de commencer
- L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
- Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original
Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
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
