Como usar
- Copie o comando e verifique o pacote antes de instalar no seu ambiente de agente.
- Consulte no original as ferramentas, credenciais e ambientes necessários.
- Descreva os dados de entrada e a entrega esperada; confira a saída com as fontes.
npx skills add https://github.com/ejirocodes/agent-skills --skill svelte5-best-practicesAntes de começar
- A instalação não inclui assinatura de modelo, franquia API ou acesso aos seus arquivos.
- Estrelas e instalações indicam atividade, não um teste independente de qualidade ou segurança.
Documento original do Skill
Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.
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
