# svelte-storybook-mock

Готовит моки модулей SvelteKit для историй Storybook, чтобы компонент рендерился в изоляции без запущенного приложения.

- команда · `type=command` · Claude Code · 121 установка
- Автор: davila7
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/commands/svelte/svelte-storybook-mock.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/commands/svelte-storybook-mock

## Что делает

Команда `/svelte:storybook-mock` включает режим специалиста по мокам SvelteKit в Storybook. Агент смотрит, от каких модулей зависит ваш компонент, и собирает параметры `sveltekit_experimental` для истории: стор `page` с url, params, route и data, стор `navigating` с переходом «откуда — куда», флаг `updated`.

Дальше по списку: подмена функций навигации (`goto`, `pushState`, `replaceState`, `invalidate`, `invalidateAll`), мок `enhance` для форм и перехват ссылок через `hrefs` — по точному пути или регуляркой, например `/api/.*`. Модули `$app/environment`, `$app/paths`, `$lib` и `@sveltejs/kit/*` поддерживаются напрямую. А вот `$app/stores`, `$app/navigation` и `$app/forms` помечены как экспериментальные: без моков они в Storybook не заработают. `$env/dynamic/private`, `$env/static/private` и `$service-worker` не поддерживаются вообще — это серверный контекст и воркер, в браузерной истории их не подменить.

Агент умеет собирать и составные сценарии: авторизованный пользователь с токеном и ролью в `page.data`, состояние загрузки через `navigating`, несколько вариантов истории под разные состояния. Полезно, когда компонент завязан на роутинг и данные страницы, а поднимать весь SvelteKit ради одной истории не хочется.

## Установка

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

1. **Через claude-code-templates**
```bash
npx claude-code-templates@latest --command svelte/svelte-storybook-mock
```

2. **Вручную: положить файлы**
- Файл: `.claude/commands/svelte-storybook-mock.md` — Вызов — /svelte-storybook-mock. Для всех проектов — ~/.claude/commands/

### Codex

**Вручную: положить файлы**
- Файл: `~/.codex/prompts/svelte-storybook-mock.md` — Вызов — /prompts:svelte-storybook-mock. В Codex этот формат помечен устаревшим, замена — скиллы

### GitHub Copilot

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

### Gemini CLI

**Вручную: положить файлы**
- Файл: `.gemini/commands/svelte-storybook-mock.toml` — Gemini хранит команды в TOML: текст запроса — в поле prompt

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/commands/svelte/svelte-storybook-mock.md

## Когда брать
- отрендерить компонент, который читает данные из стора `page`
- подменить `goto` и `pushState`, чтобы клики по ссылкам не уводили из Storybook
- показать состояние загрузки через стор `navigating`
- сделать историю с авторизованным пользователем и токеном в `page.data`
- перехватить вызовы к `/api/.*` и не ходить на сервер

## Примеры запросов агенту
- Замись SvelteKit-сторы для компонента ProductDetail
- Сделай мок `page` с товаром id 123 и навигацию через `goto`
- Добавь в историю перехват ссылок `/api/.*` и состояние загрузки

## Похожие
- [svelte-code-writer](https://affpapa.org/nevibecode/skills/svelte-code-writer.md) — скилл · 12900 установок
- [sentry-svelte-sdk](https://affpapa.org/nevibecode/skills/sentry-svelte-sdk.md) — скилл · 2100 установок
- [svelte](https://affpapa.org/nevibecode/skills/claude-mpm-team-svelte.md) — скилл · 343 установки
- [writing-react-native-storybook-stories](https://affpapa.org/nevibecode/skills/writing-react-native-storybook-stories.md) — скилл · 681 установка
- [storybook-story-writing](https://affpapa.org/nevibecode/skills/storybook-story-writing.md) — скилл · 673 установки
- [setup-react-native-storybook](https://affpapa.org/nevibecode/skills/setup-react-native-storybook.md) — скилл · 526 установок

Из того же набора: [davila7/claude-code-templates](https://affpapa.org/nevibecode/by/davila7/claude-code-templates.md) — 205 карточек

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

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