svelte

Что делает навык

Навык обеспечивает экспертную разработку на Svelte и SvelteKit с акцентом на SSR, SSG и современные паттерны, включая переход на систему реактивности Runes в Svelte 5. Он помогает создавать производительные компоненты с минимальным клиентским JavaScript, соблюдая принципы функционального и декларативного программирования.

Когда применять

• Миграция или поддержка легаси-кода Svelte 4 с одновременным внедрением Svelte 5 Runes ($state, $derived, $effect) в новые модули.
• Создание компонентов с явной реактивностью и стандартизированной обработкой событий (onclick вместо on:click) в Svelte 5.
• Оптимизация производительности через серверный рендеринг, ленивую загрузку и минимизацию клиентского JavaScript.
• Управление состоянием с помощью Svelte stores, классов с $state или экспортированного $state в модулях .svelte.js/ts.

Как работает

1. Использовать TypeScript и писать лаконичные компоненты, следуя принципам SSR/SSG и минимизации клиентского кода.
2. Применять Runes ($state, $derived, $effect, $props, $bindable) для явной реактивности вместо импортов из 'svelte' (кроме утилит tick, untrack и др.).
3. В Svelte 5 использовать onclick={handler} вместо on:click, вызывая e.preventDefault() внутри обработчика, и заменять слоты на snippets ({#snippet}...{/snippet}).
4. При работе с Svelte 4 сохранять единообразие стиля (export let, on:event, $:) внутри файла, избегая смешивания парадигм без целенаправленной миграции.
5. Интегрировать Tailwind CSS без директив @apply, используя scoped-стили в тегах <style> и ко-локализацию стилей с компонентами.
6. Реализовывать маршрутизацию через файловую систему, использовать load-функции, form actions и Paraglide.js для i18n.

Примеры запросов агенту

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.