<when_to_use>
Designing or refining user flows and screen behavior
Improving usability, accessibility, and interaction quality
Defining loading/error/empty states for key journeys
Reviewing UX regressions in feature delivery
</when_to_use>
<input_requirements>
Main user goals and top scenarios
Constraints (device contexts, browser support, locale)
Accessibility target (e.g., WCAG 2.2 AA)
Success criteria (task completion, errors, latency perception)
Research artifacts (journey map, usability findings, support tickets)
</input_requirements>
<core_principles>
Define and validate user flows for core tasks before polishing visuals
Preserve visibility of system status for all significant user actions
Design interaction states explicitly: default, hover, focus, active, disabled, loading, error, empty, success
Apply accessibility-first UX: keyboard-first navigation, visible focus, semantic controls, sufficient target size
Use clear information architecture and labels to reduce cognitive load
Design forms for completion: clear labels, inline validation, actionable errors, value preservation on failure
Use progressive disclosure for complex tasks and long forms
Define empty states with context and next action; avoid dead-end screens
Use loading feedback that matches operation type (indeterminate vs determinate)
Optimize perceived performance through responsive interactions and reduced input latency
</core_principles>
Match between system and real-world language
User control and freedom (undo/back/escape paths)
Consistency and standards across routes/components
Error prevention before error messaging
Recognition over recall in navigation and forms
Critical journeys are documented with happy path and edge paths
All interactive components include full state definitions
Keyboard navigation works for primary scenarios end-to-end
Focus is visible and never obscured by sticky/overlay UI
Forms provide clear validation and recovery guidance
Empty/loading/error states are intentional and actionable
Interaction delays are visible and do not feel frozen
<quality_rules>
UX requirements are testable as behavior, not as visual preference
Accessibility blockers in core flows are release blockers
Each major flow has at least one measurable success indicator
Error states include a concrete recovery path
</quality_rules>
<do_not>
Do not hide focus indicators or rely on pointer-only interaction
Do not ship forms with ambiguous errors or cleared input after failure
Do not leave loading states without progress or contextual feedback
Do not create empty states without explanation and next action
</do_not>
<output_requirements>
List primary user flows and critical interaction points
List required interaction states and accessibility constraints
List form UX and error-recovery rules
List perceived-performance and responsiveness checks
Provide references to standards and UX guidance used
</output_requirements>
WCAG 2.2
WCAG Focus Not Obscured
WCAG Target Size Minimum
WAI Forms Tutorial
Nielsen Usability Heuristics
NN/g Journeys vs Flows
web.dev INP
Material Interaction States
Atlassian Components
