사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/ejirocodes/agent-skills --skill svelte5-best-practices시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
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
