state-machine
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseState Machine Skill
State Machine Skill
Document the state machine for UI components, comparing current behavior to expected behavior and mapping all state transitions.
记录UI组件的状态机，对比当前行为与预期行为，并映射所有状态转换。
When to Use
适用场景
- During Ask mode CONVERGE loop for stateful components
- When refactoring existing components with complex state
- Before implementing new interactive UI components
- 在Ask模式的CONVERGE循环中处理有状态组件时
- 重构具有复杂状态的现有组件时
- 实现新的交互式UI组件之前
Instructions
操作步骤
Phase 1: Identify States
阶段1：识别状态
List all possible states for the component:
| State | Current Behavior | Expected Behavior |
|---|---|---|
| Initial | [What happens now] | [What should happen] |
| Loading | [Current loading UX] | [Expected loading UX] |
| Success | [Current success display] | [Expected success display] |
| Error | [Current error handling] | [Expected error handling] |
| Empty | [Current empty state] | [Expected empty state] |
Common States to Consider:
| State Type | Examples |
|---|---|
| Data states | Initial, Loading, Success, Error, Empty, Stale |
| Interaction states | Idle, Hover, Focus, Active, Disabled |
| Visibility states | Hidden, Visible, Collapsed, Expanded |
| Selection states | Unselected, Selected, Partially selected |
| Validation states | Valid, Invalid, Pending validation |
列出组件的所有可能状态：
| 状态 | 当前行为 | 预期行为 |
|---|---|---|
| 初始状态 | [当前实际情况] | [预期情况] |
| 加载中 | [当前加载体验] | [预期加载体验] |
| 成功 | [当前成功展示效果] | [预期成功展示效果] |
| 错误 | [当前错误处理方式] | [预期错误处理方式] |
| 空状态 | [当前空状态表现] | [预期空状态表现] |
需考虑的常见状态类型：
| 状态类型 | 示例 |
|---|---|
| 数据状态 | 初始、加载中、成功、错误、空状态、过期 |
| 交互状态 | 闲置、悬停、聚焦、激活、禁用 |
| 可见性状态 | 隐藏、可见、折叠、展开 |
| 选择状态 | 未选中、选中、部分选中 |
| 验证状态 | 有效、无效、验证中 |
Phase 2: Map Transitions
阶段2：映射状态转换
Define what triggers each state change:
| From | To | Trigger | Side Effects |
|---|---|---|---|
| Initial | Loading | User action / Mount | Start fetch |
| Loading | Success | Data received | Populate UI |
| Loading | Error | Request failed | Show error message |
| Loading | Empty | Empty response | Show empty state |
| Error | Loading | Retry clicked | Restart fetch |
| Success | Loading | Refresh clicked | Refetch data |
定义触发每个状态变化的条件：
| 原状态 | 目标状态 | 触发条件 | 副作用 |
|---|---|---|---|
| 初始状态 | 加载中 | 用户操作 / 组件挂载 | 开始获取数据 |
| 加载中 | 成功 | 接收数据 | 填充UI |
| 加载中 | 错误 | 请求失败 | 显示错误信息 |
| 加载中 | 空状态 | 响应为空 | 显示空状态 |
| 错误 | 加载中 | 点击重试 | 重新发起数据请求 |
| 成功 | 加载中 | 点击刷新 | 重新获取数据 |
Phase 3: State Diagram
阶段3：状态图
Create a Mermaid state diagram:
mermaid
stateDiagram-v2
[*] --> Initial
Initial --> Loading : fetch
Loading --> Success : data received
Loading --> Error : request failed
Loading --> Empty : no data
Error --> Loading : retry
Success --> Loading : refresh
Empty --> Loading : refresh
Success --> [*] : unmount创建Mermaid状态图：
mermaid
stateDiagram-v2
[*] --> Initial
Initial --> Loading : fetch
Loading --> Success : data received
Loading --> Error : request failed
Loading --> Empty : no data
Error --> Loading : retry
Success --> Loading : refresh
Empty --> Loading : refresh
Success --> [*] : unmountPhase 4: Data Requirements
阶段4：数据要求
For each state, define what data is needed:
| State | Required Data | UI Elements |
|---|---|---|
| Initial | None | Placeholder or skeleton |
| Loading | None | Spinner, skeleton, progress |
| Success | [List required fields] | Full component |
| Error | Error message, retry action | Error banner, retry button |
| Empty | Empty message, CTA | Empty illustration, CTA button |
为每个状态定义所需数据：
| 状态 | 所需数据 | UI元素 |
|---|---|---|
| 初始状态 | 无 | 占位符或骨架屏 |
| 加载中 | 无 | 加载动画、骨架屏、进度条 |
| 成功 | [列出所需字段] | 完整组件 |
| 错误 | 错误信息、重试操作 | 错误提示栏、重试按钮 |
| 空状态 | 空状态提示语、行动召唤（CTA） | 空状态插图、CTA按钮 |
Phase 5: Edge Cases
阶段5：边缘情况
Identify edge cases and how to handle:
| Edge Case | Current | Expected |
|---|---|---|
| Network timeout | [Current] | Show timeout message, retry option |
| Partial data | [Current] | Graceful degradation, show available |
| Stale data | [Current] | Show stale indicator, background refresh |
| Concurrent updates | [Current] | Optimistic update, rollback on conflict |
| Auth expired | [Current] | Redirect to login, preserve state |
识别边缘情况及处理方式：
| 边缘情况 | 当前处理方式 | 预期处理方式 |
|---|---|---|
| 网络超时 | [当前处理] | 显示超时提示，提供重试选项 |
| 部分数据返回 | [当前处理] | 优雅降级，展示可用数据 |
| 数据过期 | [当前处理] | 显示过期标识，后台刷新数据 |
| 并发更新 | [当前处理] | 乐观更新，冲突时回滚 |
| 授权过期 | [当前处理] | 重定向至登录页，保留当前状态 |
Output Format
输出格式
markdown
undefinedmarkdown
undefinedState Machine: [Component Name]
State Machine: [组件名称]
State Table
状态表
| State | Current | Expected | Data Required |
|---|---|---|---|
| Initial | [Behavior] | [Behavior] | [Data] |
| Loading | [Behavior] | [Behavior] | [Data] |
| Success | [Behavior] | [Behavior] | [Data] |
| Error | [Behavior] | [Behavior] | [Data] |
| Empty | [Behavior] | [Behavior] | [Data] |
| 状态 | 当前行为 | 预期行为 | 所需数据 |
|---|---|---|---|
| 初始状态 | [行为描述] | [行为描述] | [数据说明] |
| 加载中 | [行为描述] | [行为描述] | [数据说明] |
| 成功 | [行为描述] | [行为描述] | [数据说明] |
| 错误 | [行为描述] | [行为描述] | [数据说明] |
| 空状态 | [行为描述] | [行为描述] | [数据说明] |
Transition Diagram
转换图
[Mermaid stateDiagram]
[Mermaid stateDiagram]
Edge Cases
边缘情况
| Case | Handling |
|---|---|
| [Case] | [How to handle] |
| 情况 | 处理方式 |
|---|---|
| [情况描述] | [处理说明] |
Summary
总结
- States: [N] identified
- Transitions: [N] mapped
- Edge cases: [N] documented
undefined- 状态数量：已识别[N]个
- 转换数量：已映射[N]个
- 边缘情况：已记录[N]个
undefinedInvocation
调用方式
Invoke manually with "use state-machine skill" or follow Ask mode CONVERGE loop which references this skill.
手动调用时使用指令"use state-machine skill"，或遵循引用此技能的Ask模式CONVERGE循环。
Related Skills
相关技能
- - Uses states to define test coverage
qa-planning - - Check existing component states in Storybook
design-context
- - 利用状态定义测试覆盖范围
qa-planning - - 在Storybook中查看现有组件状态
design-context