# svelte

Правило для Cursor задаёт, как писать компоненты Svelte 5: руны вместо старой реактивности, типизация и ключи в списках. Пригодится, если проект уже на Svelte 5.

- правило · `type=rule` · Cursor · ★ 3579
- Автор: sanjeed5
- Лицензия: CC0-1.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/svelte.mdc
- Обновлён: 2026-05-19
- HTML: https://affpapa.org/nevibecode/rules/sanjeed5-svelte

## Что делает

Правило описывает стиль кода для Svelte 5 с TypeScript и подключается к файлам `**/*.{svelte,js,ts}`. Оно требует `lang="ts"` во всех блоках `<script>` и советует держать логику, разметку и стили в одном `.svelte`-файле, без выноса простых вычислений в отдельные модули.

Реактивность разложена по рунам: состояние через `$state`, производные значения через `$derived`, побочные действия через `$effect`, свойства компонента через `$props()`. Старый синтаксис вроде `export let`, `$:` и `on:click` помечен как неправильный. Для глобального состояния оставлены stores, но только когда состояние реально общее для многих компонентов.

Из производительности правило требует уникальный ключ в блоках `{#each}` и динамический импорт для того, что не нужно при первой загрузке. Если ваш проект ещё на Svelte 4, эти примеры конфликтуют с текущим кодом — сначала обновите версию, потом включайте правило. В исходнике разбор типичных ошибок обрывается на разделе про зависимости `$effect`.

## Установка

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

**Вручную: положить файлы**
- Файл: `.cursor/rules/svelte.mdc` — Во frontmatter: description, globs, alwaysApply

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/rules/svelte.md` — Поле paths во frontmatter ограничивает файлы: globs из источника → paths

### Codex

**AGENTS.md**
- Codex читает AGENTS.md: вставьте текст правила туда

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/instructions/svelte.instructions.md` — Поле applyTo задаёт, к каким файлам применять: globs из источника → applyTo

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/rules/svelte.md`

### Cline

**Вручную: положить файлы**
- Файл: `.clinerules/svelte.md`

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/svelte.mdc

## Когда брать
- перевести компоненты со старой реактивности на руны Svelte 5
- убрать `export let` и `on:click` из нового кода
- включить проверку типов в блоках `<script>`
- починить перерисовку списка через ключ в `{#each}`
- отделить производные значения от побочных эффектов

## Примеры запросов агенту
- перепиши этот компонент на руны Svelte 5
- проверь файл по правилу svelte и покажи отступления
- добавь типы пропсам через `$props()`

## Похожие
- [svelte-components](https://affpapa.org/nevibecode/skills/svelte-components.md) — скилл · 531 установка
- [tauri-svelte-typescript-guide-cursorrules-prompt-f](https://affpapa.org/nevibecode/rules/tauri-svelte-typescript-guide-cursorrules-prompt-f.md) — правило · ★ 41011
- [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-debug](https://affpapa.org/nevibecode/commands/svelte-debug.md) — команда · 134 установки
- [svelte-runes](https://affpapa.org/nevibecode/skills/svelte-runes.md) — скилл · 1000 установок

## Другие версии с тем же именем
- [svelte · patrickjs](https://affpapa.org/nevibecode/rules/patrickjs-svelte.md) — ★ 41011

Из того же набора: [sanjeed5/awesome-cursor-rules-mdc](https://affpapa.org/nevibecode/by/sanjeed5/awesome-cursor-rules-mdc.md) — 69 карточек

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

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