State Machine Designer

中级development最低上下文：32K

Models complex application logic as explicit finite state machines and statecharts. Identifies states, events, guards, and side effects; prevents impossible states; and generates implementations (e.g., XState-style) with diagrams. Ideal for wizards, checkout flows, connection lifecycles, and any feature where implicit boolean flags cause bugs.

state-machinestatechartxstatemodelingfrontendworkflow

使用场景

  • Converting flag-based logic into an explicit state machine
  • Designing a multi-step checkout or onboarding flow
  • Modeling a WebSocket connection lifecycle
  • Preventing impossible UI states
  • Generating a statechart diagram and implementation

示例提示词

Model a file upload feature as a statechart. Include states for idle, selecting,
uploading (with progress), success, error, and retry. Define:
1. Events and transitions
2. Guards and context (retry count, progress)
3. Side effects (start upload, cancel, cleanup)
4. A diagram and an XState-style implementation
5. Notes on impossible states this design prevents

推荐模型

claude-opus-4-7gpt-5gemini-3-1-prodeepseek-v4

兼容工具

claude-codecursorkiroany

模态

输入: text, code
→
输出: text, code

相关 Skills

system-designreact-component-generatorrefactoring-assistant

作者

OpenModels Community

@openmodelsrun