Draft Flow Skill | Agent Skills

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 success_criteria 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.

flowchart TD
    A[User arrives at...] --> B{Decision point}
    B -->|Option A| C[User does...]
    B -->|Option B| D[User does...]
    C --> E[Task complete]

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:

[Decision: "Do they have an account?"]
Context: User may arrive from a marketing link without a session.
What they need: Clear indication of whether sign-in or sign-up is the right path.
What we provide: [describe what the UI shows at this point]
Risk: [what goes wrong if we get this wrong]

Step 5: Identify Friction Points

Review the full flow. Flag any step where:

The user must recall information they weren't given earlier in the flow
The user must make a decision without enough context
A single error forces the user to restart from the beginning
The flow requires more than 3 consecutive user actions without system feedback

Mark these with ▲ FRICTION: annotations.

Step 6: Deliver

Present:

The Mermaid flow diagram (full, renders cleanly)
Annotated decision points
Friction flags with recommended resolutions
One-paragraph summary of the key UX decisions made and why

Delivery

If output exceeds the 40-line CLI budget, invoke /atlas-report with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.

Agent Skills: Draft Flow

Install this agent skill to your local

Skill Files