skills.rest
bennybennison
bennybennisonCOMMUNITY
Explore all skills by this author →
GitHub

screen-flow-design

Generate ScreenFlowSpec and ScreenSpec documents from workflow descriptions.

Updated Apr 11, 2026
Search Tags:#ux#wireframe#screen-spec#user-flow#interface-design#screen-flow
One-click install
npx skills add https://github.com/bennybennison/agent-toolkit --skill screen-flow-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screen-flow-design
Source: https://github.com/bennybennison/agent-toolkit/tree/main/skills/screen-flow-design
Command: npx skills add https://github.com/bennybennison/agent-toolkit --skill screen-flow-design

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about screen-flow-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a workflow into screen designs for prototyping?▼

To convert a workflow into screen designs, you generate a top-level ScreenFlowSpec for transitions and per-screen ScreenSpec documents defining purpose, actions, visible fields, and error states for engineering handoff.

What is a ScreenSpec document used for in user flow design?▼

A ScreenSpec document in user flow design defines each screen's purpose, primary actions, visible fields, entry conditions, exit paths, and error states to guide interface design and implementation.

How do I define entry and exit conditions for application screens?▼

You define entry and exit conditions by mapping workflow transitions in a ScreenFlowSpec, ensuring each ScreenSpec lists required prior states for entry and navigation paths for exit.

Can I capture empty and error states when creating screen flow specifications?▼

Yes, you can capture empty and error states; the ScreenSpec explicitly surfaces possible failure and empty states up front to prevent missed edge cases during implementation.

What is the best way to document UI transitions for engineering handoff?▼

The best way to document UI transitions for handoff is generating a ScreenFlowSpec mapping global entry and exit points, paired with detailed ScreenSpec documents for each screen.

Does screen flow design work for multi-step checkout and onboarding workflows?▼

Yes, screen flow design works for multi-step onboarding or checkout workflows by breaking the process into concrete screens, actions, and transitions suitable for prototyping and acceptance criteria.

Related Skills

Explore More Design & Creative Skills→
h4vzzh4vzz
33

blog-post-writing

Create SEO-optimized blog posts with structured outlines and keyword integration.

Community
Intermediate
bennybennisonbennybennison

wireframe-planning

Transform workflow descriptions into ScreenFlowSpec, ScreenSpec, and WireframeSpec documents.

Community
Intermediate
jikig-aijikig-ai
12

ux-design-lead

Generates wireframes, high-fidelity screens, and design specs as Markdown or Pencil MCP files.

Official
Advanced
PedroGiudicePedroGiudice
5

architecture-diagram-creator

Generate HTML architecture diagrams with data flows and deployment layers.

Community
Advanced