coder-frontend-ui-ux

name	coder-frontend-ui-ux
description	Frontend UI/UX practices: flows, interaction states, accessibility-first UX, forms, and perceived performance.

<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