# svelte5-best-practices

Скилл для ИИ-агента, который подсказывает руны Svelte 5, сниппеты и паттерны SvelteKit при написании и рефакторинге компонентов.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 16600 установок · ★ 6
- Автор: ejirocodes
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/ejirocodes/agent-skills/tree/HEAD/svelte/skills/svelte5-best-practices/SKILL.md
- Обновлён: 2026-06-25
- HTML: https://affpapa.org/nevibecode/skills/svelte5-best-practices

## Что делает

Скилл добавляет агенту справочник по Svelte 5: руны `$state`, `$derived`, `$effect`, `$props`, `$bindable`, `$inspect`, сниппеты `{#snippet}` и `{@render}`, обработчики событий вида `onclick`, callback-пропсы вместо `createEventDispatcher`, типизацию пропсов на TypeScript и generic-компоненты. Отдельные разделы посвящены загрузке данных в SvelteKit, form actions, изоляции состояния при SSR и производительности.

Внутри — таблица быстрого доступа и файлы-справочники: `references/runes.md`, `snippets.md`, `events.md`, `typescript.md`, `migration.md`, `sveltekit.md`, `performance.md`. Есть список типичных ошибок: `let` без `$state` не даёт реактивности, `$effect` вместо `$derived` для вычисляемых значений, старый синтаксис `on:click`, `<slot>` вместо сниппетов, забытый `$bindable()` ломает `bind:`, последовательные `await` в load-функциях вместо `Promise.all`.

Скилл пригодится, если проект уже на Svelte 5 или вы переносите код со Svelte 4: миграция stores на руны и слотов на сниппеты разобрана отдельно. Ставится одной командой через `npx skills` и работает в Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add ejirocodes/agent-skills --skill svelte5-best-practices -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/svelte5-best-practices/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/svelte5-best-practices/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add ejirocodes/agent-skills --skill svelte5-best-practices -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/svelte5-best-practices/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add ejirocodes/agent-skills --skill svelte5-best-practices -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/svelte5-best-practices/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install ejirocodes/agent-skills svelte5-best-practices
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/svelte5-best-practices/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add ejirocodes/agent-skills --skill svelte5-best-practices -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/ejirocodes/agent-skills --path svelte/skills/svelte5-best-practices
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/svelte5-best-practices/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add ejirocodes/agent-skills --skill svelte5-best-practices -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/ejirocodes/agent-skills/tree/HEAD/svelte/skills/svelte5-best-practices/SKILL.md

## Когда брать
- перевести компонент со Svelte 4 на руны Svelte 5
- заменить `<slot>` на сниппеты с `{@render}`
- убрать `createEventDispatcher` в пользу callback-пропсов
- типизировать пропсы и generic-компоненты на TypeScript
- найти причину утечки состояния между запросами при SSR

## Примеры запросов агенту
- Перепиши этот компонент на руны Svelte 5
- Проверь мой SvelteKit load и убери последовательные await
- Отрефактори слоты в сниппеты

## Похожие
- [svelte](https://affpapa.org/nevibecode/skills/claude-mpm-team-svelte.md) — скилл · 343 установки
- [svelte-code-writer](https://affpapa.org/nevibecode/skills/svelte-code-writer.md) — скилл · 12900 установок
- [svelte-core-bestpractices](https://affpapa.org/nevibecode/skills/svelte-core-bestpractices.md) — скилл · 10900 установок
- [svelte-runes](https://affpapa.org/nevibecode/skills/svelte-runes.md) — скилл · 1000 установок
- [sveltekit-typescript-guide-cursorrules-prompt-file](https://affpapa.org/nevibecode/rules/sveltekit-typescript-guide-cursorrules-prompt-file.md) — правило · ★ 41011
- [svelte-debug](https://affpapa.org/nevibecode/commands/svelte-debug.md) — команда · 134 установки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md