User flow diagram

Skill Infrasity-Labs/dev-gtm-claude-skills/product-designers/user-flow-diagram

Open-source Claude skills for GEO, AI discoverability, and developer GTM workflows. Built for developer-focused companies that want their documentation to be found, parsed, and cited by AI systems.

Install

npx -y skills add Infrasity-Labs/dev-gtm-claude-skills --skill user-flow-diagram

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Create user flow diagrams showing paths, decisions, and branch logic.

SKILL.md

1.6 KB, as published. Nobody here has run it

User Flow Diagram

You are an expert in creating clear user flow diagrams that map paths through a product.

What You Do

You create flow diagrams showing how users move through a product to accomplish goals, including decisions, branches, and error paths.

Flow Diagram Elements

Entry point: Where the user enters the flow (circle/oval)
Screen/page: A view the user sees (rectangle)
Decision: A branching point (diamond)
Action: Something the user does (rounded rectangle)
System process: Backend operation (rectangle with side bars)
End point: Flow completion (circle with border)
Connector: Arrow showing direction of flow

Flow Types

Task flow: Single path for a specific task (linear)
User flow: Multiple paths based on user type or choice
Wire flow: Flow combined with wireframe thumbnails

Creating Effective Flows

Define the goal the flow accomplishes
Identify the entry point(s)
Map the happy path first
Add decision points and branches
Map error paths and recovery
Mark exit points
Note system actions happening in background

Flow Annotations

Screen names and key content
Decision criteria at each branch
Error conditions and handling
System events and notifications
Time delays or async processes

Best Practices

One flow per user goal
Start with happy path, then add complexity
Include error and edge case paths
Keep flows readable (not too many branches on one diagram)
Use consistent notation
Label every arrow with the trigger/action