К основному содержанию
скилл CX Codex

xstate-v5 — скилл для Claude Code: машины состояний XState

Помогает проектировать, писать и чинить машины состояний и стейтчарты на XState v5 в TypeScript. Пригодится, когда логика экрана или процесса перестала помещаться в пару булевых флагов.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add statelyai/skills --skill xstate-v5 -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/xstate-v5/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/xstate-v5/

По шагам, с командами для каждой платформы: Как установить скилл в 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 и сохраняет структуру, если вы не просили более широкую переработку.

Похожие скиллы

Всё по теме «Фронтенд и UI» →
frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой