state-management-architect

What problem does it solve?

This Skill helps teams design and implement scalable UI state management across React apps by combining Context API, XState state machines, Zustand, Jotai, and custom hooks. It also emphasizes reliable testing patterns and performance optimization to reduce complexity and maintenance overhead.

Core Features & Use Cases

• Context Patterns: Modular, composable contexts that support domain separation and subtree state boundaries.
• State Machines (XState): Explicit state machines with transitions, guards, actions, and services for async flows.
• Global State: Zustand and Jotai stores for robust global state management and derived data.
• Custom Hooks & Testing: Reusable hooks with testing patterns to ensure reliability and easier QA.
• Performance: Memoization, selectors, batching, and immutability for efficient renders.
• Use Case: Build a feature-rich dashboard with user authentication and live counters using Context, XState, and global stores.

Quick Start

In a minimal React project, scaffold a demo that uses Context for a shared value, an XState machine for a login flow, and Zustand/Jotai stores for global state; then add basic tests to verify state transitions.