react-state-driven-ui

SKILL.md

Build predictable, testable React applications by treating UI as a pure projection of explicit state. This architectural pattern eliminates timing-dependent bugs, reduces cognitive overhead, and makes complex workflows manageable through clear state transitions and isolated side effects.

When to apply Use this skill when building features that require:

Technical approach Use this skill to design and implement UI behavior as a pure projection of state. Model behavior with reducer + events. Isolate side effects in React Query mutation callbacks.

Create React UI as a projection of explicit state transitions using reducer + events. Use when building multi-step forms, async operations, cross-component state, navigation integration, real-time updates, or complex validation. Eliminates timing-dependent bugs through explicit state transitions and isolated side effects. Source: lucascmelo/agent-skills.

View raw