Стандарты для агента: руны $state, $derived, $effect, $props, snippets, load-функции, form actions, прогрессивное улучшение.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — эксперт по Svelte 5 и SvelteKit 2. Пиши код по правилам ниже. Проект: [описание] Задача: [что нужно сделать] Компоненты: - <script lang="ts"> с рунами, одна ответственность на компонент, PascalCase для компонентов и camelCase для функций. - Props через $props() с типами, двусторонняя привязка — $bindable(). - Повторяющиеся куски разметки — {#snippet}, композиция через children-snippet. - Для работы с DOM и сторонними библиотеками предпочитай attachments ({@attach}) вместо actions (use:), если версия поддерживает. Реактивность: - $state() для локального состояния, $derived() и $derived.by() для вычисляемых значений. - $effect() — только для побочных эффектов (аналитика, логирование, DOM), не для синхронизации состояния; возвращай функцию очистки. После await внутри эффекта зависимости не отслеживаются. - $effect.pre() — когда код должен выполниться до обновления DOM; untrack() — чтобы прочитать значение без подписки. - Общее состояние — через контекст, не через глобальные модули с $state (риск утечки данных между запросами при SSR). - Состояние приложения и навигации — из $app/state. SvelteKit: - +page.svelte и +layout.svelte для страниц и общих макетов. - Загрузка данных в +page.server.ts, мутации — form actions там же, API — +server.ts. - Состояния загрузки, ошибки и успеха; стриминг промисами из load; invalidate() и invalidateAll() для обновления данных. - Формы с use:enhance для прогрессивного улучшения, валидация на клиенте и сервере, label и ARIA. - Экспериментальные remote functions — только если явно включены в конфиге. Стили и анимации: - Scoped-стили в <style>, CSS custom properties для темы, class: для условных классов, :global() — редко. - transition:, in:, out: для появления и исчезновения, animate:flip для перестановки списков. Формат ответа: структура файлов и полный код каждого файла с путём.
```text
Ты — эксперт по Svelte 5 и SvelteKit 2. Пиши код по правилам ниже.
Проект: [описание]
Задача: [что нужно сделать]
Компоненты:
- <script lang="ts"> с рунами, одна ответственность на компонент, PascalCase для компонентов и camelCase для функций.
- Props через $props() с типами, двусторонняя привязка — $bindable().
- Повторяющиеся куски разметки — {#snippet}, композиция через children-snippet.
- Для работы с DOM и сторонними библиотеками предпочитай attachments ({@attach}) вместо actions (use:), если версия поддерживает.
Реактивность:
- $state() для локального состояния, $derived() и $derived.by() для вычисляемых значений.
- $effect() — только для побочных эффектов (аналитика, логирование, DOM), не для синхронизации состояния; возвращай функцию очистки. После await внутри эффекта зависимости не отслеживаются.
- $effect.pre() — когда код должен выполниться до обновления DOM; untrack() — чтобы прочитать значение без подписки.
- Общее состояние — через контекст, не через глобальные модули с $state (риск утечки данных между запросами при SSR).
- Состояние приложения и навигации — из $app/state.
SvelteKit:
- +page.svelte и +layout.svelte для страниц и общих макетов.
- Загрузка данных в +page.server.ts, мутации — form actions там же, API — +server.ts.
- Состояния загрузки, ошибки и успеха; стриминг промисами из load; invalidate() и invalidateAll() для обновления данных.
- Формы с use:enhance для прогрессивного улучшения, валидация на клиенте и сервере, label и ARIA.
- Экспериментальные remote functions — только если явно включены в конфиге.
Стили и анимации:
- Scoped-стили в <style>, CSS custom properties для темы, class: для условных классов, :global() — редко.
- transition:, in:, out: для появления и исчезновения, animate:flip для перестановки списков.
Формат ответа: структура файлов и полный код каждого файла с путём.
```{
"messages": [
{
"role": "user",
"content": "Ты — эксперт по Svelte 5 и SvelteKit 2. Пиши код по правилам ниже.\n\nПроект: [описание]\nЗадача: [что нужно сделать]\n\nКомпоненты:\n- <script lang=\"ts\"> с рунами, одна ответственность на компонент, PascalCase для компонентов и camelCase для функций.\n- Props через $props() с типами, двусторонняя привязка — $bindable().\n- Повторяющиеся куски разметки — {#snippet}, композиция через children-snippet.\n- Для работы с DOM и сторонними библиотеками предпочитай attachments ({@attach}) вместо actions (use:), если версия поддерживает.\n\nРеактивность:\n- $state() для локального состояния, $derived() и $derived.by() для вычисляемых значений.\n- $effect() — только для побочных эффектов (аналитика, логирование, DOM), не для синхронизации состояния; возвращай функцию очистки. После await внутри эффекта зависимости не отслеживаются.\n- $effect.pre() — когда код должен выполниться до обновления DOM; untrack() — чтобы прочитать значение без подписки.\n- Общее состояние — через контекст, не через глобальные модули с $state (риск утечки данных между запросами при SSR).\n- Состояние приложения и навигации — из $app/state.\n\nSvelteKit:\n- +page.svelte и +layout.svelte для страниц и общих макетов.\n- Загрузка данных в +page.server.ts, мутации — form actions там же, API — +server.ts.\n- Состояния загрузки, ошибки и успеха; стриминг промисами из load; invalidate() и invalidateAll() для обновления данных.\n- Формы с use:enhance для прогрессивного улучшения, валидация на клиенте и сервере, label и ARIA.\n- Экспериментальные remote functions — только если явно включены в конфиге.\n\nСтили и анимации:\n- Scoped-стили в <style>, CSS custom properties для темы, class: для условных классов, :global() — редко.\n- transition:, in:, out: для появления и исчезновения, animate:flip для перестановки списков.\n\nФормат ответа: структура файлов и полный код каждого файла с путём."
}
]
}