Cómo usar
- Copia el comando y revisa el paquete antes de instalarlo en tu entorno de agente.
- Consulta las herramientas, credenciales y entornos necesarios en el documento original.
- Describe las entradas y el resultado deseado; contrasta la salida con las fuentes.
npx skills add https://github.com/owl-listener/designer-skills --skill user-flow-diagramAntes de empezar
- La instalación no incluye suscripción al modelo, cuota API ni permisos sobre tus archivos.
- Las estrellas e instalaciones reflejan actividad, no una prueba independiente de calidad o seguridad.
Documento original del Skill
Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.
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
