State Machines Xstate

State Machines Xstate

Skill Profile

(Select at least one profile to enable specific modules)

• DevOps
• Backend
• Frontend
• AI-RAG
• Security Critical

Overview

XState is a state management library using finite state machines and statecharts for modeling application logic. It helps developers create applications with predictable state management, visualization tools, and excellent TypeScript support. XState uses a mathematical model of finite state machines which helps developers model complex logic as clear state transitions, visualize state flow with state diagrams and visualization tools, provide full TypeScript support for type safety, ensure deterministic state transitions that are easy to test, and include built-in support for async operations and side effects.

Why This Matters

• Reduces Bugs: State machines reduce bugs from complex state logic by 30-40%
• Increases Maintainability: Visualized state flow improves maintainability
• Reduces Debugging Time: Predictable state reduces debugging time
• Improves Testability: Deterministic transitions improve testability
• Improves Developer Experience: Visualization tools and TypeScript enhance DX

Core Concepts

Inputs / Outputs / Contracts

• Inputs:
  • <e.g., env vars, request payload, file paths, schema>
• Entry Conditions:
  • <Pre-requisites: e.g., Repo initialized, DB running, specific branch checked out>
• Outputs:
  • <e.g., artifacts (PR diff, docs, tests, dashboard JSON)>
• Artifacts Required (Deliverables):
  • <e.g., Code Diff, Unit Tests, Migration Script, API Docs>
• Acceptance Evidence:
  • <e.g., Test Report (screenshot/log), Benchmark Result, Security Scan Report>
• Success Criteria:
  • <e.g., p95 < 300ms, coverage ≥ 80%>

Skill Composition

• Depends on: typescript-standards
• Compatible with: None
• Conflicts with: None
• Related Skills: api-design

Quick Start

1. Install XState: Install xstate and framework integration
2. Create Machine: Define finite state machine
3. Add States: Define states and transitions
4. Add Context: Define initial context
5. Add Actions: Implement entry/exit/transition actions
6. Add Guards: Implement guard conditions
7. Integrate with React: Use useMachine hook
8. Test Machine: Test state transitions
9. Visualize: Use Stately Editor for visualization

import { createMachine } from 'xstate'

const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: {
        TOGGLE: 'active',
      },
    },
    active: {
      on: {
        TOGGLE: 'inactive',
      },
    },
  },
})

Assumptions / Constraints / Non-goals

• Assumptions:
  • Development environment is properly configured
  • Required dependencies are available
  • Team has basic understanding of domain
• Constraints:
  • Must follow existing codebase conventions
  • Time and resource limitations
  • Compatibility requirements
• Non-goals:
  • This skill does not cover edge cases outside scope
  • Not a replacement for formal training

Compatibility & Prerequisites

• Supported Versions:
  • Python 3.8+
  • Node.js 16+
  • Modern browsers (Chrome, Firefox, Safari, Edge)
• Required AI Tools:
  • Code editor (VS Code recommended)
  • Testing framework appropriate for language
  • Version control (Git)
• Dependencies:
  • Language-specific package manager
  • Build tools
  • Testing libraries
• Environment Setup:
  • .env.example keys: API_KEY, DATABASE_URL (no values)

Test Scenario Matrix (QA Strategy)

Technical Guardrails & Security Threat Model

1. Security & Privacy (Threat Model)

• Top Threats: Injection attacks, authentication bypass, data exposure

• Data Handling: Sanitize all user inputs to prevent Injection attacks. Never log raw PII
• Secrets Management: No hardcoded API keys. Use Env Vars/Secrets Manager
• Authorization: Validate user permissions before state changes

2. Performance & Resources

• Execution Efficiency: Consider time complexity for algorithms
• Memory Management: Use streams/pagination for large data
• Resource Cleanup: Close DB connections/file handlers in finally blocks

3. Architecture & Scalability

• Design Pattern: Follow SOLID principles, use Dependency Injection
• Modularity: Decouple logic from UI/Frameworks

4. Observability & Reliability

• Logging Standards: Structured JSON, include trace IDs request_id
• Metrics: Track error_rate, latency, queue_depth
• Error Handling: Standardized error codes, no bare except
• Observability Artifacts:
  • Log Fields: timestamp, level, message, request_id
  • Metrics: request_count, error_count, response_time
  • Dashboards/Alerts: High Error Rate > 5%

Agent Directives & Error Recovery

(ข้อกำหนดสำหรับ AI Agent ในการคิดและแก้ปัญหาเมื่อเกิดข้อผิดพลาด)

• Thinking Process: Analyze root cause before fixing. Do not brute-force.
• Fallback Strategy: Stop after 3 failed test attempts. Output root cause and ask for human intervention/clarification.
• Self-Review: Check against Guardrails & Anti-patterns before finalizing.
• Output Constraints: Output ONLY the modified code block. Do not explain unless asked.

Definition of Done (DoD) Checklist

• Tests passed + coverage met
• Lint/Typecheck passed
• Logging/Metrics/Trace implemented
• Security checks passed
• Documentation/Changelog updated
• Accessibility/Performance requirements met (if frontend)

Anti-patterns

1. Over-Engineering: Using state machines for simple logic adds unnecessary complexity
2. Poor State Design: Poorly designed states create confusing machines
3. Missing Guards: Not using guards for conditional transitions causes bugs
4. Side Effect Issues: Not managing side effects properly causes unpredictable behavior
5. Poor Testing: Not testing state machines properly leads to bugs
6. Complex Machines: Overly complex machines are hard to understand and maintain
7. Missing Documentation: Missing documentation makes machines hard to use
8. Not Using Context: Not using context for persistent data causes code duplication
9. Poor State Naming: Unclear state names make machines hard to understand
10. Ignoring Events: Not properly handling events causes bugs

Reference Links & Examples

• Internal documentation and examples
• Official documentation and best practices
• Community resources and discussions

Versioning & Changelog

• Version: 1.0.0
• Changelog:
  • 2026-02-22: Initial version with complete template structure

Converted and distributed by TomeVault — claim your Tome and manage your conversions.