User Flow Diagram
owl-listener/designer-skillsA user flow diagram shows how people move through a product. It maps paths, decisions, and branch logic to help design clear experiences. Anyone building websites or apps can use these diagrams to plan and improve user journeys.
These diagrams include different shapes for entry points, screens, decisions, actions, system processes, and end points. Arrows connect them to show the direction of flow. You can create task flows for single tasks or user flows with multiple paths.
Best practices include starting with the happy path, then adding error and edge case paths. Label every arrow with the trigger or action. Keep one flow per user goal to stay readable.
Add User Flow Diagram skill to your workflow
Global
mkdir -p ~/.claude/skills/user-flow-diagramProject
mkdir -p .claude/skills/user-flow-diagramSource Repository
More Design & UI/UX Claude Code Skills
Prototypemattpocock/skills
Quick throwaway prototypes to test logic or UI before building
Lark Whiteboardlarksuite/cli
View, edit, and export Lark whiteboards as images or code easily
Sleek Design Mobile Appssleekdotdesign/agent-skills
Turn your app ideas into mobile screens just by describing them
Brainstormingobra/superpowers
Brainstorm your ideas into a clear design and get approval before building anything
Ui Ux Pro Maxnextlevelbuilder/ui-ux-pro-max-skill
All-in-one UI/UX design assistant with styles, colors, fonts, and guidelines for any platform
Redesign Existing Projectsleonxlnx/taste-skill
Upgrade your existing website or app with a professional design audit
Stitch Design Tasteleonxlnx/taste-skill
Create premium, non-generic UI designs with strict color, typography, and layout rules
Brandkitleonxlnx/taste-skill
Create premium brand-kit images that feel intentional, minimal, and presentation-ready