user-flow-generate

name	user-flow-generate
description	Visualize user paths and interactions. Creates flowcharts representing user journeys to complete specific tasks.
required_roles	{"scribe":"roles/scribe.editor"}
personas	["information-architect","ux-designer","product-manager"]

Generate User Flow Skill

Generate a visual representation of the path a user takes through the system to complete a specific task. This skill maps steps, decision points, and interactions to validate information architecture and user experience.

Inputs

• TASK - The specific user goal or task to map (e.g., "Reset Password", "Purchase Subscription")
• START_POINT - The entry point for the user (e.g., "Home Page", "Login Screen")
• END_POINT - The success state or final destination (e.g., "Dashboard", "Thank You Page")
• CONTENT_PATH - (Optional) The content directory to reference for available pages (e.g., "/docs")
• HAPPY_PATH_ONLY - (Optional) Boolean, whether to focus only on the ideal success path (default: false)
• OUTPUT_FORMAT - (Optional) Output format: "mermaid", "plantuml", "text-description" (default: "mermaid")

Workflow

Step 1: Task Analysis

Analyze the defined TASK to understand the user's intent and required steps.

• Identify the primary goal.
• Determine necessary preconditions.

Step 2: Path Mapping

Map the sequence of interactions from START_POINT to END_POINT.

• If CONTENT_PATH is provided, validate that steps correspond to existing pages or sections.
• Identify intermediate steps (forms, clicks, navigation).

Step 3: Branch Identification

If HAPPY_PATH_ONLY is false, identify potential alternative paths and error states.

• Decision Points: "User logged in?", "Form valid?".
• Error States: "Invalid password", "Network error".

Step 4: Flow Generation

Convert the mapped path into the requested OUTPUT_FORMAT.

For Mermaid:

• Use graph TD or flowchart LR.
• Represent pages/screens as nodes.
• Represent actions/decisions as edges or rhombuses.

Required Outputs

A USER_FLOW_DIAGRAM in the specified OUTPUT_FORMAT.

Example (Mermaid):

graph TD
    Start[Home Page] -->|Click Login| Login[Login Screen]
    Login -->|Enter Credentials| Auth{Authenticated?}
    Auth -->|Yes| Dashboard[Dashboard]
    Auth -->|No| Error[Show Error]
    Error --> Login

Quick Reference

• Purpose: Validate navigation logic and identify friction points.
• Best Practice: Create separate flows for different personas.