facts+ Master UI and UX Checklist

00 / operating model

How to use this file

Run the universal checks first, then the surface-specific checks for the target platform.

1. Classify the surface.
Website, web app, mobile website, mobile app, tablet app, or desktop app. Hybrid products get both relevant lists.

2. Audit states, not just screens.
Default, hover, focus, active, disabled, loading, empty, error, success, offline, overflow, and permission states all count.

3. Require evidence.
Every finding should include location, screenshot or DOM proof, impact, severity, and a concrete fix path.

Minimum evidence per review

Rendered UI inspected at real breakpoints.Include narrow mobile, tablet, desktop, and at least one high-density or large-window case.Required Keyboard-only pass completed.Tab order, focus visibility, Escape behavior, skip links, modal focus return, and shortcut conflicts.A11y Automated checks supplemented with human judgment.Automated tools catch missing labels and contrast, but not hierarchy, information scent, or emotional fit.QA

01 / severity

Severity model

Use severity to protect users and keep design feedback actionable.

Level	Use when	Examples
Critical	Blocks core tasks, excludes users, risks data loss, or violates WCAG A/AA in a core workflow.	Keyboard trap, invisible focus, unlabeled form, destructive action without recovery, unreadable contrast.
High	Causes major task failure, high cognitive load, broken responsiveness, or major trust loss.	Vague errors, tiny targets, no loading feedback, hidden primary action, mobile overflow.
Medium	Reduces efficiency, polish, or clarity but has a workaround.	Weak hierarchy, inconsistent spacing, awkward copy, missing empty-state guidance.
Craft	Separates acceptable from excellent without blocking use.	Optical alignment, motion refinement, text rhythm, icon consistency, memorable brand moment.

02 / improvement roadmap

Cross-verified improvements, sorted by value

Use this as the next-work backlog for making the checklist more operational. Value and effort are scored 1-5, where 5 is highest.

Priority	Improvement	Value	Effort	Why it ranks here
1	Custom project overrides.	5	2	Turns generic best practice into facts+ policy: product type, audience, brand taste, compliance, AI behavior, and severity rules.
2	Release gate and severity scoring.	5	2	NN/g-style severity supports release decisions by combining frequency, impact, persistence, and market or trust risk.
3	Evidence template for every finding.	5	2	Matches audit-report practice: screen, task, viewport, assistive-tech mode, expected behavior, actual behavior, severity, proof, and fix path.
4	Representative sampling matrix.	5	3	WCAG-EM recommends defining scope, exploring assets, selecting representative samples, evaluating, and reporting. This prevents cherry-picked audits.
5	Component state matrix.	5	3	Finds gaps that page screenshots miss: default, hover, focus, active, disabled, loading, empty, error, success, long text, no permission, and offline.
6	Automation coverage map.	4	3	Separates static checks, browser checks, visual regression, accessibility scans, performance checks, and manual design judgment.
7	Fast preflight mode.	4	1	W3C Easy Checks shows quick reviews are valuable but not definitive. A 10-minute pass helps catch obvious blockers early.
8	Issue ticket template.	4	1	Makes findings easier to fix by standardizing title, reproduction, evidence, affected users, acceptance criteria, and owner.
9	Override and exception log.	4	2	Tracks intentional deviations from the checklist with owner, expiry, risk, and follow-up date. Useful for product realities and audits.
10	Checklist search and tag filtering.	4	4	The file now has many checks. Filtering by A11y, Mobile, AI, Data, Trust, or Release would reduce review fatigue.
11	Rule IDs and source traceability.	3	4	Connects each checklist item to a local policy ID, source, owner, and automation target. Strong for governance, slower to build.
12	Examples of failures and good fixes.	3	4	Improves reviewer calibration, especially for visual taste, copy, AI UX, and accessibility issues that automated tools miss.

Custom override model to add first

Define product-surface overrides.For each surface, decide whether it is marketing, docs, dashboard, editor, admin, onboarding, checkout, AI assistant, or support flow.Override Define brand and taste overrides.Name the allowed typography, density, motion, color behavior, icon style, image rules, and forbidden generic-AI visual patterns.Override Define audience overrides.Mark whether the target user is novice, expert, internal operator, buyer, creator, mobile-first, screen-reader-heavy, or low-connectivity.Override Define release-blocking overrides.State which issues always block release for facts+, such as keyboard traps, hidden focus, mobile overflow, data loss, deceptive consent, or uncited AI claims.Gate Define automation overrides.Map rules to static analyzer, browser check, visual regression, accessibility scanner, performance budget, or manual design review.Automation

03 / agent execution playbook

How a coding agent should use this checklist

This is the operating loop for testing and improving any UI. The agent should gather evidence, make targeted fixes, then verify the rendered result.

Phase	Agent action	Required evidence
1. Classify	Identify product type, target user, primary task, platform, viewport range, brand tone, risk level, and custom overrides.	One-sentence surface classification and applicable sections.
2. Inventory	List major screens, components, interaction patterns, routes, states, design tokens, and external dependencies.	Screen/component inventory with likely high-risk areas.
3. Render	Open the actual UI, not only source files. Inspect desktop, tablet, mobile, zoomed text, dark or high contrast, and reduced motion.	Screenshots, viewport sizes, console and network notes.
4. Interact	Run keyboard, pointer, touch, form, modal, focus, scroll, error, loading, empty, and permission-state passes.	Flow notes and failed controls with reproduction steps.
5. Fix	Make the smallest design-system-consistent change that removes the user harm or craft issue.	Changed files, rationale, before and after behavior.
6. Verify	Re-run screenshots, console errors, anchor links, responsive checks, keyboard flow, and relevant automated scans.	Pass/fail summary plus residual manual risks.
7. Report	Summarize blockers first, then high-value improvements, then craft polish. Name what was not verified.	Short issue list with severity, evidence, and next action.

Agent non-negotiables

Never judge UI from code alone.Render the interface and inspect pixels, layout, focus, interaction, and text wrapping at real viewport sizes.Agent Never fix aesthetics by adding decoration first.Start with hierarchy, spacing, typography, content, affordance, state, and layout. Decoration comes after structure works.Agent Never ship a change without state coverage.Check at least default, hover, focus, active, disabled, loading, empty, error, success, long text, and no-permission states.Agent Never treat automation as full accessibility proof.Automated scans are evidence, not judgment. Keyboard, screen-reader smoke, zoom, reduced motion, and human context still matter.Agent Always state remaining uncertainty.If disabled-user testing, real devices, production data, localization, or assistive-technology coverage was not performed, say so.Agent

06 / accessibility execution master list

Accessibility execution for coding agents

Use this as the rendered accessibility pass. It combines source review, browser inspection, interaction testing, and honest limits.

09 / product evidence

User research and journey audits

Use these checks to confirm that the design is grounded in real tasks, real users, and complete flows.

Top tasks are validated with real users.The interface prioritizes work users actually try to do, not only stakeholder preference, feature inventory, or internal taxonomy.Research Research method matches the question.Check whether the team needed behavioral or attitudinal, qualitative or quantitative, natural or scripted, generative or evaluative evidence.Research Personas and segments are evidence-backed.They identify needs, constraints, context, expertise, and decision impact rather than decorative bios.Research Journey maps include the core ingredients.Actor, scenario, expectations, phases, actions, thoughts, emotions, opportunities, owner, and measurement plan.Journey Critical flows define success and failure.Each high-value flow has a start, completion signal, acceptance criteria, abandonment risk, and recovery path.Journey Multi-step flows preserve context.Progress, save and resume, back behavior, draft state, review steps, and confirmation screens are consistent.Journey First-run and returning-user journeys differ intentionally.Onboarding, defaults, hints, empty states, shortcuts, and personalization adapt without hiding essential controls.Journey Edge journeys are included.Password reset, expired invite, no permission, failed payment, account deletion, blocked account, and cancellation have complete UX.Journey

10 / findability and evidence

Search, filtering, sorting, and data visualization

Use for products where users must find, compare, interpret, or act on information.

Search is where users expect it.It supports empty query, loading, typo tolerance, synonyms, recent searches, and accessible result announcements where useful.Search Results explain why they matched.Show relevant metadata, highlighted terms, ranking cues, freshness, source, and the next action.Search No-results states help users recover.Offer spelling fixes, broader filters, alternate terms, saved alerts, or a clear path back to browsing.Search Filters are understandable and reversible.Active filters are visible, removable, count-changing, keyboard accessible, and preserved in URL or history when useful.Search Sort order is explicit and stable.Default sorting is named, tie-breakers are predictable, and user-selected sort persists where users expect it.Search Charts include the basics.Title, takeaway, axes, units, legend, source, recency, sample size, and uncertainty are available where relevant.Data Complex visuals have text or table alternatives.Graphs, maps, diagrams, and dashboards expose the essential values, trends, and relationships beyond color or image pixels.A11y Data states are designed.No data, partial data, stale data, loading, failed load, export, hidden-by-permission, and very large data are all handled.Data

11 / interruptions and access

Notifications, permissions, roles, and trust boundaries

Use for alerts, badges, permission prompts, admin access, privacy-sensitive features, and role-based products.

Every notification has a user-serving reason.Define purpose, priority, owner, channel, consent state, quiet-hours behavior, and when it should stop.Notify Notifications are concise and not repetitive.Avoid duplicate pings for the same event. Keep sensitive, personal, or confidential information out of previews.Notify Critical information is not toast-only.Use persistent banners, inline status, message centers, or task state for information users must notice or act on.Notify Notification actions are useful and safe.Actions are contextual, short, nondestructive by default, and do more than simply open the app.Notify Permission requests happen in context.Ask only when the feature needs access, explain why in plain language, and provide a useful fallback if denied.Privacy Pre-permission screens are not manipulative.They explain, then lead to the system prompt. They do not mimic allow buttons, offer incentives, or hide the real choice.Privacy Role limits are explained at the point of action.Disabled or hidden actions explain why, who can grant access, and whether a request path exists.Roles Admin and destructive actions have audit trails.Show who did what, when, where, why if known, and how to reverse or escalate safely.Roles

12 / shared work and intelligence

Collaboration UX and AI-specific UX

Use for shared workspaces, comments, permissions, AI assistants, recommendations, generation, and automation.

Presence helps without clutter.Show who is viewing, editing, typing, or selecting only where it changes coordination or prevents conflict.Collab Comments attach to exact context.Threads reference an object, selection, screen, version, or timestamp, with resolve, reopen, mention, and history behavior.Collab Concurrent editing has recovery.Optimistic updates, undo, conflict resolution, version history, and sync status are visible and understandable.Collab Sharing scope is previewable.Users can see who has access, what recipients can do, expiration, revocation, and preview-as-recipient behavior.Collab AI sets accurate expectations.Describe what the system can do, what it cannot do, when it may be wrong, and which context it used.AI AI output remains user-controllable.Generated content is reviewable, editable, rejectable, undoable, and never silently commits high-stakes changes.AI AI recommendations show evidence and uncertainty.Provide citations, source data, confidence or limits, changed fields, and the reason a suggestion appeared.AI AI failure is designed.Retry, fallback, correction, escalation, feedback, and safety handling are part of the experience, not only error logs.AI

13 / measurement and recovery

UX analytics, support, and recovery

Use these checks to connect product decisions to observable outcomes and humane recovery paths.

Critical journeys are instrumented end to end.Capture start, progress, success, failure, retry, abandonment, and support contact without storing unnecessary personal data.Metrics UX metrics map to product goals.Use goal-linked measures such as happiness, engagement, adoption, retention, and task success where they fit the product.Metrics Event schemas are governed.Names, properties, privacy class, sampling, source, owner, and deprecation policy are documented.Metrics Dashboards separate signal from vanity.Metrics identify a decision, owner, threshold, and likely action rather than only reporting activity volume.Metrics Support carries context safely.Help links preserve error IDs, plan state, device context, and recent safe diagnostics without exposing secrets.Support Recovery paths exist for severe failures.Locked account, lost work, failed import, failed payment, broken sync, corrupted state, and mistaken deletion all have next steps.Support Error handling preserves user input.Keep submitted values, focus the summary, explain what went wrong, and show how to fix it without blaming the user.Support Feedback is categorized and closeable.Bug, confusion, satisfaction, feature request, and abuse reports route to owners and acknowledge what happens next.Support

14 / system and policy

Design system governance and compliance UX

Use for shared component libraries, regulated flows, consent, subscription, privacy, and policy-sensitive surfaces.

Components include usage guidance.Purpose, do and do-not rules, accessibility contract, states, variants, content rules, and code examples are documented.System Design tokens are semantic and owned.Tokens use purpose-based names, have owners, support themes, and include deprecation and migration guidance.System New patterns justify their existence.Before adding UI, confirm existing components, variants, or content changes cannot solve the problem.System Regression tests cover shared behavior.Visual, accessibility, keyboard, localization, and responsive tests protect critical components and flows.System Content has ownership and review cadence.Legal, medical, financial, pricing, policy, localization, and support text identify owner, approval state, and expiry risk.Legal Consent and privacy flows are fair.Choices are balanced, understandable, reversible, and available without deceptive hierarchy or unnecessary friction.Legal Commercial flows are transparent.Subscription, renewal, cancellation, refund, billing failure, trial, downgrade, and data export paths are easy to find and complete.Legal Accessibility conformance is tracked per release.Keep evidence for audits, exceptions, remediation owners, known issues, and release-specific WCAG status.A11y

15 / surface-specific

Websites and landing pages

Use for public pages, marketing pages, portfolios, docs, editorial pages, and conversion-focused web surfaces.

First viewport identifies the brand or offer.The object, product, venue, or person is unmistakable without relying on tiny nav text.Web Hero is one composition, not a dashboard or card stack.Headline, supporting line, primary CTA, and visual anchor work together. No card inside the hero unless it is the product interaction.Web Each section has one job.One headline, one reason to exist, one next action or proof point. Delete repeated mood statements.Web Page is understandable by scanning headings only.Headings carry the story, not generic labels like Features, Benefits, or Why us without context.Web Media is real, useful, and inspectable.Use product, place, person, state, or gameplay visuals rather than blurred atmospheric stock-like backgrounds.Web Conversion path is honest.CTAs set accurate expectations, pricing or trial terms are findable, trust signals are real, and no fake urgency is used.Trust

16 / surface-specific

Web apps, dashboards, SaaS, and admin tools

Use for task-focused app shells, CRM, operations, dashboards, settings, tools, and internal software.

Workspace layout is clear.Navigation, primary workspace, secondary context, filters, and actions have stable regions.App Density fits the job.Operational screens prioritize scanning, comparison, repeated actions, and stable controls over decorative hero content.App Data tables are usable.Sortable, filterable, keyboard accessible, responsive, human-readable leading columns, sticky headers only when they do not obscure focus.App Bulk actions, undo, and selection state are obvious.Users can tell what is selected, what operation applies, and how to reverse safe destructive changes.App Status and freshness are explicit.Last updated, stale data, sync state, background jobs, queue progress, permission limits, and audit trails are visible where needed.App Power-user efficiency exists without hurting novices.Keyboard shortcuts, command palette, saved views, multi-select, and advanced filters are discoverable and documented in context.App

17 / surface-specific

Mobile websites

Mobile web has small screens, touch, short sessions, single-window use, and variable connectivity.

Viewport allows zoom.No user-scalable=no, no maximum-scale lock, content readable without horizontal panning.Mobile Content-to-chrome ratio is high.Navigation, headers, sticky bars, and controls do not crowd out essential content on a 360px viewport.Mobile Touch targets are comfortable.Aim for 44px targets for touch, with adequate spacing. WCAG 2.2 minimum target size should still be satisfied.Mobile Tasks survive interruption.Save form state, avoid losing drafts, support resume, and do not require cross-window memorization.Mobile Typing is minimized.Use defaults, autocomplete, inputmode, camera, location, paste, scanning, and pickers where appropriate.Mobile Pages are light and step count is low.Variable connectivity means fewer round trips, smaller assets, and meaningful loading states matter more.Mobile No hover-only functionality.All actions, tooltips, menus, and disclosures work with touch and keyboard.Mobile

18 / surface-specific

Mobile apps

Use platform-native expectations, not just web layouts in an app frame.

Platform conventions are respected.Navigation, back behavior, gestures, permissions, share, search, safe areas, system colors, and typography feel native to iOS or Android.Mobile app Controls meet platform size guidance.Apple default touch control is 44x44 pt on iOS and iPadOS. Android touch ergonomics should target similarly comfortable tap areas.Mobile app Primary actions sit in reachable zones.Important frequent actions are thumb-friendly, but destructive actions remain separated and confirmed.Mobile app Gestures have visible alternatives.Swipe, drag, long press, motion, and multi-finger actions are not the only way to complete core tasks.Mobile app System accessibility settings are honored.Dynamic Type or font scaling, reduce motion, increase contrast, dark mode, screen readers, switch access, voice control, and haptics where appropriate.Mobile app Permissions are requested in context.Explain the task benefit before asking for camera, microphone, location, contacts, notifications, or files.Trust Offline and background behavior is predictable.Sync state, conflict resolution, retries, drafts, notifications, and stale data are visible and recoverable.Mobile app

19 / surface-specific

Tablet apps

Tablet is not just a large phone. It mixes touch, pointer, split views, rotation, resizing, and richer workspace layouts.

Layouts adapt across breakpoints, not device names.Compact, medium, expanded, large, and extra-large states reveal, divide, resize, reposition, or swap UI deliberately.Tablet Master-detail and multi-pane layouts are used when helpful.One pane for compact, two panes for expanded, three panes only when density and task context support it.Tablet Resizable windows and split-screen states are tested.iPadOS windows, foldables, external displays, landscape, portrait, half, third, and quadrant sizes remain stable.Tablet Navigation adapts functionally.Bottom navigation may become rail or sidebar. Swapped components must be functionally equivalent and ergonomically justified.Tablet Pointer and touch both feel first-class.Hover, focus, drag, selection, stylus, keyboard, and touch targets all have clear affordances and do not conflict.Tablet Safe areas and system UI are respected.Do not place content under camera housings, notches, home indicators, dynamic controls, or sidebars without intentional insets.Tablet

20 / surface-specific

Desktop apps

Desktop apps need density, keyboard efficiency, window resilience, and strong information architecture.

Windows resize gracefully from minimum to large monitors.Do not stretch prose to unreadable widths, lose controls below the window edge, or break at high zoom.Desktop Keyboard, menus, and shortcuts are complete.Tab order, access keys where applicable, command palette, menu bars, context menus, multi-select, undo, redo, copy, paste, and search.Desktop Focus management supports complex UI.Dialogs, popovers, drawers, panels, grids, tree views, comboboxes, and tabs follow expected keyboard patterns.Desktop Information density is useful, not cramped.Sidebars, inspectors, split panes, toolbars, and status bars clarify the task without overwhelming new users.Desktop High-contrast and forced-colors modes are tested.Icons, focus rings, semantic colors, selection, disabled controls, and charts remain perceivable.Desktop Bottom-edge critical controls are avoided.Desktop users can move windows partly off-screen. Keep critical status and actions discoverable.Desktop

21 / verification

Verification workflow

A repeatable pass for design QA, accessibility, performance, and resilience.

Pass	What to do	Evidence to keep
Static scan	Find missing labels, alt, headings, roles, viewport locks, target blank links, hard-coded tokens, outline none, low font sizes.	File, line, rule ID, severity.
Rendered scan	Open the actual UI, inspect landmarks, text, forms, console, network, and screenshots.	Screenshots, accessibility tree, console errors.
Responsive pass	Check 320, 360, 375, 414, 600, 768, 834, 1024, 1280, 1440, and one large desktop width where relevant.	Before/after screenshots per breakpoint.
Input pass	Keyboard-only, touch, mouse or pointer, screen reader smoke test, switch or voice-control equivalent for core actions when possible.	Flow notes, failed controls, focus screenshots.
State pass	Default, hover, focus, active, disabled, loading, empty, error, success, offline, long text, permission denied, and large data.	State matrix with missing states marked.
Performance pass	Measure Core Web Vitals, bundle size, image weight, long tasks, layout shifts, list rendering, and animation smoothness.	Metric values, device/network assumptions.
Final polish	Check alignment, copy, icons, capitalization, rhythm, token consistency, and AI-generic design tells.	Short issue list with quick wins first.

22 / provenance

Sources folded into this checklist

Local skills were read from the installed skill directories. Web research was performed through gstack browse.

Installed local skills and project checklists

impeccable, audit, frontend-design, critique, design-review
adapt, arrange, animate, clarify, harden, optimize, polish
normalize, onboard, colorize, distill, extract
high-end-visual-design, bolder, delight, overdrive, minimalist-ui, theme-factory
web-design-guidelines, webapp-testing, and gstack/review/design-checklist.md
Project-local facts++ checkpoint taxonomy observed from the local audit UI.

Master UI and UX checklist.

How to use this file

Minimum evidence per review

Severity model

Cross-verified improvements, sorted by value

Custom override model to add first

How a coding agent should use this checklist

Agent non-negotiables

Styling and visual design master list

Animation, motion, and interaction feel

Universal UI and UX checklist

Accessibility foundation

Information architecture and navigation

Visual hierarchy, layout, and composition

Typography, color, and theming

Forms, inputs, and transactional flows

States, feedback, copy, and resilience

Performance and implementation quality

Trust, privacy, safety, and ethics

Most common UI and UX mistakes to hunt for