UI/UX Standard (Summary)
In one line: Prescriptive interface rules, not a style guide — required design system, forbidden patterns, hard accessibility thresholds.
The UI/UX standard is an engineering specification: what components to use, what patterns are forbidden, what accessibility thresholds must be met.
Design System: shadcn/ui is the required design system for all React applications. Components are added via npx shadcn@latest add <component>, not installed as a direct dependency. Building custom components when a shadcn/ui equivalent exists is forbidden.
Prescriptive Rules:
- Skeleton loaders for all async content (not spinners). Use the shadcn/ui
Skeletoncomponent. Full-page loading spinners are forbidden. - Toast notifications via Sonner for all async feedback.
alert()boxes,confirm()dialogs, and native browser notifications are forbidden. - Inline confirmation for destructive actions (not modal dialogs). Modals are reserved for complex multi-step flows that cannot be accomplished inline.
- WCAG AA color contrast (4.5:1 minimum ratio). Every color combination must meet this threshold.
- 44px minimum touch targets on mobile. Interactive elements smaller than this are inaccessible on touch devices.
- Responsive breakpoints: 320px (mobile), 768px (tablet), 1024px+ (desktop).
Forbidden Patterns:
| Pattern | Replacement |
|---|---|
Native alert() / confirm() dialogs | Sonner toast + inline confirmation |
| Full-page loading spinners | Skeleton loaders |
| Modal dialogs for simple confirmations | Inline UI or Sheet component |
| Click/touch targets smaller than 44px | Minimum 44px interactive area |
| Building custom components when shadcn/ui has an equivalent | Use the shadcn/ui component |
Reference Designs (quality bar): Linear (keyboard-first), Stripe Dashboard (enterprise quality), Vercel Dashboard (modern responsive), Notion (rich interactions, empty states).
Evidence: The forbidden-patterns table is the mechanism — the UI review checklist (s4u-ui-review skill) checks for native dialogs, full-page spinners, sub-44px targets, and custom components that duplicate a design-system equivalent, and flags each. See skill:s4u-ui-review.
Full specification: skill:s4u-ui-review