Agent skill

user-flow-diagram

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

Infrasity-Labsgithub.com/Infrasity-LabsGitHub ↗
claude-codeMIT
Install
npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill user-flow-diagram --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 1
SKILL.md size: 2 KB
Bundled scripts: none
Path: .claude/skills/user-flow-diagram/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 97
Language: Python

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# 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 1. Define the goal the flow accomplishes 2. Identify the entry point(s) 3. Map the happy path first 4. Add decision points and branches 5. Map error paths and recovery 6. Mark exit points 7. Note system actions happening in background ## Flow Annotations - Screen names and key content - Decision criteria at e

What's inside
Steps it walks through
  1. What You Do
  2. Flow Diagram Elements
  3. Flow Types
  4. Creating Effective Flows
  5. Flow Annotations
  6. Best Practices
More from dev-gtm-claude-skills
All skills →
About this skill
What does the user-flow-diagram skill do?

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

How do I install it?

Run `npx skills add Infrasity-Labs/dev-gtm-claude-skills --skill user-flow-diagram --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From Infrasity-Labs/dev-gtm-claude-skills, a repository with 97 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going