Use when a lifecycle needs nested states, regions active at the same time, delayed transitions, or an actor per row, and whether a statechart beats a plain reducer.
Install
npx skills add yutna/functional-design-skills --skill functional-typescript-xstatenpx skills add yutna/functional-design-skills --skill functional-typescript-xstate -a claude-code -gnpx skills add yutna/functional-design-skills --skill functional-typescript-xstate -a codex -ggemini skills install https://github.com/yutna/functional-design-skills.git --path plugin/skills/functional-typescript-xstategh skill install yutna/functional-design-skills functional-typescript-xstategit clone --depth 1 https://github.com/yutna/functional-design-skills /tmp/yutna__functional-design-skills
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/yutna__functional-design-skills/plugin/skills/functional-typescript-xstate ~/.claude/skills/functional-typescript-xstate # Claude Code
cp -R /tmp/yutna__functional-design-skills/plugin/skills/functional-typescript-xstate ~/.agents/skills/functional-typescript-xstate # Codex, Cursor, Gemini CLI, Copilot, OpenCode