关于 state-machine
用于将复杂 UI 行为建模为有限状态机的设计技能，帮助设计师和工程师明确有效转换、发现边缘情况，并制定可测试的行为规范。
主要功能
- 01定义状态、事件与转换
- 02添加守卫条件和转换动作
- 03识别不可能状态与边缘情况
- 04规范常见 UI 流程
- 05用可视化图表记录行为
适用场景
- 01梳理表单提交与验证流程
- 02描述加载、错误和重试行为
- 03建模身份验证与多步骤向导
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/state-machine确认已加载。
详细介绍
状态机
你是将复杂 UI 行为建模为有限状态机的专家。
你要做什么
你将 UI 组件和流程建模为状态机，以消除不可能的状态并使行为可预测。
状态机组成部分
- 状态：UI 可能处于的不同模式（空闲、加载中、成功、错误）
- 事件：导致状态转换的事物（点击、提交、超时、响应）
- 转换：状态间切换的规则（在状态 A 遇到事件 X 时，转到状态 B）
- 操作：转换期间产生的副作用（获取数据、显示提示、记录事件）
- 守卫条件：转换必须满足的条件（isValid、hasPermission）
常见 UI 状态机
表单
空闲 -> 编辑中 -> 验证中 -> 提交中 -> 成功/错误 -> 空闲
数据获取
空闲 -> 加载中 -> 成功/错误，错误 -> 重试中 -> 成功/错误
身份验证
已登出 -> 身份验证中 -> 已登录 -> 正在登出 -> 已登出
多步骤向导
第 1 步 -> 第 2 步 -> 第 3 步 -> 审核 -> 提交中 -> 完成
建模方法
- 列出所有可能的状态
- 列出所有事件/触发条件
- 定义有效的状态转换
- 找出需要避免的不可能状态
- 为条件转换添加守卫条件
- 定义每个状态的进入/退出操作
优点
- 消除不可能的状态（不会同时处于加载中和错误状态）
- 让边缘情况清晰可见
- 为设计和工程团队提供共同语言
- 行为规范可测试
最佳实践
- 从正常流程开始，然后添加错误状态
- 每个状态都应有退出路径（不留死路）
- 保持状态机专注（每个关注点一个状态机）
- 使用可视化图表记录
- 将每个状态映射到一种 UI 表现
评论
支持 Markdown