screen-flow-design

What problem does it solve?

Turn ambiguous workflows into concrete, implementable screen designs so teams avoid rework, missed states, and unclear handoffs between product, design, and engineering. This skill helps capture the minimal set of screens and interactions needed for a first viable implementation while surfacing possible failure and empty states up front.

Core Features & Use Cases

• ScreenFlowSpec generation: Create a top-level flow document that outlines screens, transitions, and the global entry/exit points of the workflow.
• Per-screen ScreenSpec: For each screen, define purpose, primary user actions, visible fields and summaries, entry conditions, exit paths, and error or empty states.
• Use Case: Convert a multi-step onboarding or checkout workflow into screen-level specs for prototyping, engineering handoff, and acceptance criteria.

Quick Start

Draft a ScreenFlowSpec and matching ScreenSpec documents from the provided workflow description, listing each screen's purpose, main actions, visible data, entry and exit conditions, and error states.