xstate-v5 — скилл для Claude Code: машины состояний XState
Помогает проектировать, писать и чинить машины состояний и стейтчарты на XState v5 в TypeScript. Пригодится, когда логика экрана или процесса перестала помещаться в пару булевых флагов.
npx skills add statelyai/skills --skill xstate-v5 -a claude-codeЧто делает xstate-v5
Скилл ведёт агента по инженерной части работы с машинами состояний, а корректность API держит на втором месте. Агент выбирает между xstate и @xstate/store, собирает модель из сырых требований, пишет код в стиле v5 и разбирает существующий. Заодно переводит старые примеры и чужой код, если те отдают v4.
Внутри — набор правил, а не генератор кода. Сначала агент смотрит package.json и импорты в проекте, читает соседние машины и адаптеры, и только потом решает, насколько вольно себя вести. Для новой задачи он берёт setup({...}).createMachine({...}) с именованными actions, guards, actors и delays. Для правок в чужом файле сохраняет местную структуру. Для миграции делает минимальный безопасный перевод на v5 и не тащит setup(...) с тегами туда, где они не нужны.
Скилл только про v5. Смешивать версии в одном файле он не станет, поэтому в проекте, где часть машин ещё на v4, готовьтесь к постепенному переводу, а не к одному большому коммиту. Если задача слишком простая для машины состояний, агент скажет об этом и предложит @xstate/store.
Какие задачи решает
- спроектировать машину состояний из расплывчатых требований
- перевести старую машину с v4 на v5 без смены семантики
- разложить асинхронный процесс на акторов и отмену
- найти лишние булевы флаги в контексте и заменить их тегами
- связать машину с
@xstate/reactили@xstate/vue
Примеры запросов агенту
- Собери машину состояний для оформления заказа: состояния, события, акторы
- Переведи эту машину на XState v5, структуру сохрани
- Проверь
checkoutMachine.ts: не пора ли часть контекста вынести в теги
Как установить xstate-v5
1Через Skills CLI (Vercel)
npx skills add statelyai/skills --skill xstate-v5 -a claude-code2Вручную: положить файлы
~/.claude/skills/xstate-v5/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/xstate-v5/
1Через Skills CLI (Vercel)
npx skills add statelyai/skills --skill xstate-v5 -a codex2Вручную: положить файлы
.agents/skills/xstate-v5/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add statelyai/skills --skill xstate-v5 -a cursor2Вручную: положить файлы
.cursor/skills/xstate-v5/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install statelyai/skills xstate-v52Вручную: положить файлы
.github/skills/xstate-v5/SKILL.md1Через Skills CLI (Vercel)
npx skills add statelyai/skills --skill xstate-v5 -a gemini-cli2Командой платформы
gemini skills install https://github.com/statelyai/skills --path skills/xstate-v5Вручную: положить файлы
.devin/skills/xstate-v5/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add statelyai/skills --skill xstate-v5 -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о xstate-v5
Как установить xstate-v5 в Claude Code?
Выполните npx skills add statelyai/skills --skill xstate-v5 -a claude-code. Файл скилла окажется в ~/.claude/skills/xstate-v5/SKILL.md.
Что делает xstate-v5?
Помогает агенту проектировать, писать, проверять и переносить машины состояний и стейтчарты на XState v5 в TypeScript. Он же подскажет, когда машина не нужна и хватит @xstate/store.
Скилл работает со старым кодом на XState v4?
Да, для этого есть режим миграции. Агент делает минимальный перевод на v5 и сохраняет структуру, если вы не просили более широкую переработку.