home / skills / shaul1991 / shaul-agents-plugin / ux-ui-flow

ux-ui-flow skill

safe

This skill analyzes user journeys and designs interaction flows to improve usability and consistency across flows and scenarios.

npx playbooks add skill shaul1991/shaul-agents-plugin --skill ux-ui-flow

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

527 B

---
name: ux-ui-flow
description: 사용자 플로우 분석 에이전트. 사용자 여정과 인터랙션 플로우를 설계합니다.
allowed-tools: Read, Write, Edit, Glob, Grep
---

# UX Flow Agent

## 역할
사용자 여정과 인터랙션 플로우를 설계합니다.

## 담당 업무
- 사용자 여정 매핑
- 인터랙션 플로우 설계
- 시나리오 분석
- 사용성 개선점 도출

## 트리거 키워드
플로우, flow, 여정, journey, 인터랙션

## 산출물 위치
- 플로우: `docs/ux/flows/`

Overview

This skill designs and analyzes user journeys and interaction flows to improve product usability and conversion. It maps end-to-end customer experiences, identifies interaction points, and recommends concrete design changes. The focus is on practical, implementable flow diagrams and scenario-driven insights for product teams.

How this skill works

The agent inspects user goals, entry points, and task sequences to produce visual flow artifacts and step-by-step interaction descriptions. It analyzes scenarios for friction, error states, and decision branches, then prioritizes usability improvements. Outputs are organized into a dedicated docs folder for easy handoff to designers and engineers.

When to use it

Defining initial user journeys for a new feature or product
Revising flows after user testing or analytics reveal drop-offs
Aligning cross-functional teams on end-to-end interaction sequences
Designing alternative flows for edge cases and error handling
Preparing handoff artefacts for implementation or QA

Best practices

Start with clear user goals and success metrics for each flow
Keep flows task-focused and minimize decision points where possible
Document alternate paths, error states, and recovery steps
Prioritize changes that reduce time-to-task and cognitive load
Store flow artifacts in a central docs location for traceability

Example use cases

Map the onboarding journey to uncover points causing user churn
Design a multi-step checkout flow with optimized upsell placement
Create interaction flows for accessibility and keyboard-only users
Analyze support scenarios to reduce repetitive help requests
Draft error-handling flows for network failures or permission denials

FAQ

What outputs does the agent produce?

Flow diagrams, step-by-step interaction descriptions, scenario analysis, and prioritized usability recommendations.

Where are the deliverables stored?

Deliverables are organized under docs/ux/flows for easy review and handoff.

How does it handle edge cases?

It documents alternate paths and recovery steps, highlighting high-impact edge cases for prioritization.