Come usare
- Copia il comando e controlla il pacchetto prima di installarlo nel tuo ambiente agente.
- Controlla strumenti, credenziali e ambienti richiesti nel documento originale.
- Descrivi input e risultato desiderato; confronta l’output con le fonti.
npx skills add https://github.com/owl-listener/designer-skills --skill user-flow-diagramPrima di iniziare
- L’installazione non include abbonamenti, quote API o accesso ai file.
- Stelle e installazioni indicano attività, non un test indipendente di qualità o sicurezza.
Documento Skill originale
Contenuto dal repository con titoli, esempi, codice, tabelle, link e immagini preservati.
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
