UI/UX Standard (Summary)
In one line: Use the approved design system, make business state truthful, and verify usable interactions with scoped evidence.
The operational procedure is skill:s4u-ui-review. It applies to applications and live-documentation surfaces. A read-only review produces findings, not dependency installation or automatic repair. Project criteria and installed controls determine what blocks release.
| Concern | Required outcome |
|---|---|
| Design system | Use the project's approved framework, tokens and components. React/shadcn/Tailwind/Sonner is a selectable profile, not a mandate for every customer. |
| Async feedback | Distinguish loading, received, pending, accepted, rejected, cancelled and unknown outcomes. A successful request or toast is not business approval. Keep consequential status and errors discoverable after notifications expire. |
| Confirmations | Choose an accessible interaction proportionate to consequence, with clear action, scope and recovery. Neither a toast nor a particular dialog library supplies decision authority. |
| AI-assisted validation | BA reviews extraction first; the accountable owner accepts the exact artifact revision. An edit requires a new revision and the applicable approval path. |
| Accessibility | Assess the adopted standard against actual states, keyboard behavior, names/labels, contrast and relevant assistive technology; a palette or component library is not certification. |
| Responsive layout | Normal content reflows at narrow/zoomed views. Necessary two-dimensional diagrams/tables can scroll locally, with readable labels, keyboard access and equivalent prose. |
| Loading and motion | Use useful loading feedback; skeletons, status text and action spinners serve different purposes. Respect reduced-motion preferences. |
For WCAG text contrast, normal text needs 4.5:1. The 3:1 large-text exception starts at 18 points regular or 14 points bold (24 CSS px / about 18.67 CSS px), not 18px / 14px. Measure the actual rendered values. WCAG 2.2 AA target size is 24×24 CSS px or a permitted exception; 44×44 is a useful stronger project target, not the universal AA minimum.
Evidence: record surface/revision, role/state, expected behavior, actual observation, outcome and owner. Separate source inspection, automated testing, browser rendering, measured contrast, assistive-technology testing and business validation. Missing evidence stays not tested; a justified not applicable remains visible.
The checklist guides a review. It is not itself a running control, and passing selected items does not establish complete accessibility conformance.