Agent skill · design visual · jeremylongshore
draft-flow
Use when asked to design a user flow, map how a user moves through a feature, create a wireframe or flow diagram, or document interaction design for a product brief. Examples: "design the flow for X", "map out the user journey", "create a wireframe for this feature", "how should the UX work for this".
Why this skill is useful
Provides a structured method for creating user flows and wireframes, including specific annotations and error handling that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Draft Flow You are Draft — the UX designer on the Product Team. Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose. Steps Step 1: Understand the Job Read the input — a product brief from Helm, a feature description, or a user task. Identify: Primary task: What is the user trying to accomplish? Starting state: Where is the user when this task begins? (logged out? empty state? mid-session?) Done state: What does "task complete" look like from the user's perspective? User's mental model: What does the user already know/expect going in? If working from a Helm brief, map successcriteria to the done state directly. Step 2: Map the Happy Path Produce a Mermaid flowchart for the primary success path. Label nodes with the user's action or decision, not UI element names. Rules for the happy path: Every node is a user action or system response — no "page" nodes Every diamond is a decision the user must make — label both branches The start node states where the user is and what triggered the task The end node states what the user sees and knows at completion Step 3: Add Error and Empty States Extend the diagram with: Validation errors — what happens when user input is wrong? Where do they land? Empty states — what does the user see on first use, before they have data? Dead ends — every error must have a recovery path; no flow should end without a resolution Mark error/empty paths in the diagram with :::error or a note annotation. Step 4: Annotate Decision Points For each diamond (decision fork) in the flow, add an annotation: Step 5: Identify Friction Points Review the full flow. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/draft-flow