UI and frontend · plan by default
/ui-flow
Improve a complete user journey, including error recovery
Use for a multi-step journey's decisions and recovery; ui-states defines individual screen states.
Make it your own.
In Claude Code, use the slash command and add your context. In Codex, select ui-flow from the just-vibe skill picker, then send the same brief.
Version 0.11.0 also supports /jv ui-flow, /just-vibe ui-flow and /jv:ui-flow in Claude. See shortcut setup and context examples.
/just-vibe:ui-flow Plan improving account recovery, including expired links and back navigation./just-vibe:ui-flow Plan how the onboarding flow recovers when session expiry interrupts it midway through a form./just-vibe:ui-flow Assess a flow from mockups without claiming observed conversion improvements.What the agent does
- Walk the journey through entry, progress, validation, abandonment, retry and return paths, mapping decisions and state transitions.
- Track which user input and permissions survive each transition, and identify dead ends and friction.
- Propose improvements; ui-states or design implements accepted changes.
Inputs
- user goal, entry/exit points, current flow, and success constraints.
Optional context: scope, references, constraints, successCriteria, environment, mode, budget.
Scope
- Reads
- One complete journey including cancellation, errors, navigation, and recovery.
- Writes
- No source changes in inspect/plan. Save only requested planning artifacts. A separately requested repair uses the relevant implementation workflow.
- Mode
- Plan; user goal, entry/exit points, current flow, and success constraints.
- Prerequisites
- Target screens/flows, existing design conventions, and runnable UI or supplied references. Visual claims require actual renders; accessibility claims distinguish automated, keyboard, and assistive-technology evidence.
Expected output
- Journey/state map with dead ends, prioritized recovery changes and an acceptance walkthrough.
How the work is checked
- Users can recover from a mid-flow failure; back navigation does not silently discard required state.
When to stop or clarify
- Do not simplify by removing necessary policy or consent steps. Distinguish observed usability issues from assumptions needing user testing.
Handling missing context
- Infer
- Inspect the target flow, existing components/tokens, actual renders or supplied references and current responsive behavior.
- Assume
- Reuse established visual conventions and preserve keyboard behavior; label unrendered changes as visually unverified.
- Ask
- Ask about an unresolved interaction or visual direction only when plausible choices materially differ; do not make a missing screenshot block source inspection.
Technical guidance
- Evidence
- Map the user's objective, steps, branching choices, saved state and recovery from interruption.
- Method
- Remove unnecessary decisions while retaining needed confirmation and context; define back, refresh and retry semantics.
- Pitfall
- Optimizing one screen can break cross-screen state or erase work when users navigate backward.
- Check
- Complete the journey from a fresh start, an interrupted state and a recoverable failure with realistic input methods.
Situational decisions
When back navigation or session expiry discards important work: Define recovery and preservation explicitly before simplifying the journey.
The coding agent follows this workflow using its available tools. Installation does not grant service access or guarantee an outcome. Read the compatibility notes.