storybook-stories — скилл для Claude Code
Пишет и правит Storybook-сторис, опираясь на конвенции вашего репозитория. Полезен, когда сторис много, а правила именования и декораторов нигде толком не записаны.
npx skills add pedronauck/skills --skill storybook-stories -a claude-codeЧто делает storybook-stories
Скилл добавляет, обновляет, рефакторит и чинит сторис. Он ищет ближайшую существующую историю и продолжает её в том же стиле, а не заводит новую с нуля. Первым делом агент определяет, какая конфигурация Storybook отвечает за слой: примитивы и сторис домена живут в разных местах.
Провайдеры не дублируются: глобальные декораторы QueryClient, роутера и MSW переиспользуются. Метаданные — типизированный CSF и StoryObj<typeof meta>. Для управляемых пропсов идёт args, для составных случаев — render, причём история только на render не требует пустого args. Показывать нужно минимальный набор состояний, который объясняет поведение; жёсткого требования на число историй нет. Политику tags: ["autodocs"] скилл берёт у владельца страницы, чтобы не плодить дубли.
Перед примерами агент смотрит общий инвентарь примитивов и берёт их публичные экспорты, а доменные компоненты оставляет локальными. Файл references/patterns.md читается только под конкретный паттерн композиции, примеры оттуда — не обязательный каркас. Реализацию компонентов, правку токенов, E2E-тесты в браузере и прочую документацию скилл не трогает: если задача про них, он не сработает.
Какие задачи решает
- дописать сторис к существующему компоненту в стиле соседних
- разнести примитивы и доменные сторис по своим конфигурациям Storybook
- переписать историю на типизированный CSF без копипасты шаблона
- убрать дублирующиеся декораторы провайдеров
- починить сломанную сторис и прогнать проверку сборки
Примеры запросов агенту
- Добавь сторис для
Buttonрядом с существующими, с теми же декораторами - Отрефактори историю
UserCardнаStoryObj<typeof meta>и убери лишниеargs - Почини сторис
CheckoutFormи прогони проверку сборки Storybook
Как установить storybook-stories
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill storybook-stories -a claude-code2Вручную: положить файлы
~/.claude/skills/storybook-stories/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/storybook-stories/
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill storybook-stories -a codex2Вручную: положить файлы
.agents/skills/storybook-stories/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill storybook-stories -a cursor2Вручную: положить файлы
.cursor/skills/storybook-stories/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install pedronauck/skills storybook-stories2Вручную: положить файлы
.github/skills/storybook-stories/SKILL.md1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill storybook-stories -a gemini-cli2Командой платформы
gemini skills install https://github.com/pedronauck/skills --path skills/mine/storybook-storiesВручную: положить файлы
.devin/skills/storybook-stories/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill storybook-stories -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о storybook-stories
Как установить storybook-stories в Claude Code?
Выполните npx skills add pedronauck/skills --skill storybook-stories -a claude-code. Скилл окажется в ~/.claude/skills/storybook-stories/SKILL.md.
Что делает storybook-stories?
Создаёт, обновляет, рефакторит и чинит Storybook-сторис по конвенциям проекта: переиспользует глобальные декораторы, держит типизированный CSF и следует политике autodocs владельца страницы.
Какие задачи скилл не берёт?
Реализацию компонентов, изменения токенов, E2E-тесты в браузере и другую документацию.
