What problem does it solve? Building workflow user interfaces often leads to tangled server state, inconsistent module boundaries, and unverified browser behavior. This Skill provides a structured procedure for implementing React/TypeScript workflow UI that keeps API logic in core hooks, views as presentation plus view-models, and every user-visible flow covered by tests. ## Core Features & Use Cases - Structured UI Architecture: Separates process, studio, operations, and admin UI modules while routing server state through TanStack Query core hooks and derived state through view-models. - Semantic Workflow Rendering: Renders blockers, artifacts, questions, and next safe actions semantically, with raw JSON fallback for artifacts and critical/optional question splitting. - Verification & Quality Gates: Enforces RTL/unit tests, Playwright browser scenarios, accessibility via native controls, and typed evidence outputs with blockers and confidence. - Use Case: When adding an issue detail page with an operator cockpit to a workflow product, use this Skill to wire query hooks, build the process view, render artifacts and questions, and produce a browser verification plan. ## Quick Start Use the frontend-workflow-ui skill to implement the issue detail process cockpit with artifacts, questions, and a Playwright verification scenario.
