User Flow Diagram
When you need to map out how users move through your product, this creates clean flow diagrams with proper notation for screens, decisions, branches, and error paths. It knows the difference between task flows (single linear path), user flows (multiple branches), and wire flows (with wireframe thumbnails), and pushes you to start with the happy path before layering in edge cases. The annotations cover decision criteria, system actions, and async processes, which means you're not just getting boxes and arrows but actually useful documentation. It enforces consistent labeling on every connector, so six months from now someone can actually follow what you built.
- install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
- 10
- skills.sh installs
- 2.7K
- GitHub stars
- 3.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add owl-listener/designer-skills --skill user-flow-diagram --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/owl-listener/designer-skills
- Category
- Git & Pull Requests
- First seen
- Jun 3, 2026
More from owl-listener/designer-skills
All 68- Icon System2.6K
- Layout Grid2.6K
- Heuristic Evaluation2.6K
- Data Visualization2.6K
- Spacing System2.5K
- Responsive Design2.5K
- Wireframe Spec2.5K
- Micro Interaction Spec2.5K
- Loading States2.5K
- Animation Principles2.5K
- Design Critique2.5K
- Design Qa Checklist2.5K
- Design Token Audit2.5K
- State Machine2.4K
- Error Handling Ux2.4K
- Design Token2.4K
- Usability Test Plan2.4K
- Accessibility Audit2.4K
- Case Study2.4K
- Ux Writing2.4K
- Journey Map2.4K
- Component Spec2.4K
- Design Principles2.4K
- Theming System2.4K
Recommended
More Git & Pull Requests
blog-strategyagricidaniel/claude-blogBlog strategy development including topic cluster architecture with hub-and-spoke design, audience mapping, competitive landscape analysis, AI citation surface 2.6Kskills.sh installs
woo-guardamelnagdy/guard-skillsReview generated or changed WooCommerce code — extensions, payment and shipping integrations, checkout customizations, and order/product logic — before it ships2.6Kskills.sh installs
scientific-visualizationk-dense-ai/scientific-agent-skillsCreate and audit truthful, accessible, publication-ready scientific figures with Matplotlib, Seaborn, or Plotly. Use for figure design, multi-panel layouts, unc2.6Kskills.sh installs
core-data-expertavdlee/core-data-agent-skillExpert Core Data guidance (iOS/macOS): stack setup, fetch requests & NSFetchedResultsController, saving/merge conflicts, threading & Swift Concurrency, batch op2.5Kskills.sh installsscientific-critical-thinkingk-dense-ai/scientific-agent-skillsEvaluate scientific claims and evidence quality. Use for assessing experimental design validity, identifying biases and confounders, applying evidence grading f2.5Kskills.sh installs
rank-localcalm-north/seojuice-skillsBuild a local SEO strategy covering Google Business Profile, local citations, reviews, and NAP consistency. Use when the user asks about local SEO, Google Busin2.5Kskills.sh installs