UX Audit Skill

Degree of freedom: MIXED — Steps 0, 2–5 [HIGH freedom]; Step 1 research JSON and every playwright step [LOW freedom — run exactly]. Read protocol-browser-anti-stall before any browser interaction.

How to reason

1. Observe — quote the screenshot, copy, or code line
2. Interpret — what does this do to the human in this moment of the pipeline?
3. Classify — heuristic fail / law violation / microcopy / correct-as-is
4. Severity — blocks the success moment = P0; recoverable friction = P1; nit = P2

Worked example

Observe: invoice Submit stays enabled; no toast; POST /invoices in-flight 4s. Interpret: a second click creates a duplicate invoice (H1 + H5, money path). Classify: heuristic fail on a trust-sensitive write. Severity: P0 — double-submit on money. Finding: /invoices/new | H1/H5 | P0 | no pending state | disable + toast.

Self-critique before reporting [LOW freedom — do not skip]

1. Evidenced — screenshot or quoted copy, not "feels confusing"
2. Per-page — cross-page IA/stories → audit-ux-journeys
3. Severity justified — P0 blocks the recorded success moment
4. Right owner — breakpoints → audit-responsive; empty/error → audit-ui-states
5. Context first — no finding without Step 0 human + pipeline

Context-First

Before scoring a heuristic: who is the human (state, not "users"), where this page sits in the journey, how data moves input → API → DB → screen, and the emotional arc. Step 0 is mandatory.

Step 0: Deep Product and Pipeline Understanding

0a. Understand the Business and Human Context

Read README, landing page, marketing copy, and any onboarding flows to answer:

• What problem does this solve? (Not features — the human pain it alleviates)
• Who is the primary human? (Demographics, technical skill, emotional state when using)
• What's the alternative? (What do people do without this product? Spreadsheets? Phone calls? Nothing?)
• What's the success moment? (The "aha" — when the human gets what they came for)
• What's the trust model? (Does the user trust this product with money? Health data? Business data?)

0b. Map pipeline, routes, and emotional arc

For each core task, trace how data moves from the human's input through client validation, the API call, server processing, the database, the response, and the client update to the feedback the human sees (api/, actions/, hooks/use*, lib/, and fetch|axios|ky|useSWR|useQuery|trpc call sites locate the integration points). Mark the latency-sensitive, error-prone, and trust-sensitive points — H1, H5, and H9 findings come from there. Discover routes by framework (app/**/page.tsx, pages/**/*.tsx, src/routes/, router.*) and note nav shape (flat / hierarchical / hub-and-spoke), depth, cross-links, and dead ends for the pages in scope; cross-page IA belongs to audit-ux-journeys. For each core flow, note the entry emotion, where confusion or anxiety spikes, where the product earns trust, the peak moment (best or worst), and how the flow ends.

0c. Record discovery

One short block in whatever shape fits: product type, the human problem, the primary human and their emotional context, the top core tasks, the success moment, trust level (money / data / time / reputation), page count, auth pattern, locale/i18n, and known latency or error-prone points.

Step 1: Research Current UX Standards

1a. NN/g — Usability Heuristics and Methods

firecrawl:firecrawl_search
{
 "query": "site:nngroup.com heuristic evaluation checklist [current year]",
 "limit": 5,
 "sources": [{ "type": "web" }]
}

1b. Intuit Content Design — Microcopy Principles

firecrawl:firecrawl_search
{
 "query": "site:contentdesign.intuit.com UX writing principles",
 "limit": 5,
 "sources": [{ "type": "web" }]
}

Scrape the most relevant result for detailed writing guidelines.

1c. Laws of UX — Interaction Psychology

firecrawl:firecrawl_scrape
{
 "url": "https://lawsofux.com",
 "formats": ["markdown"],
 "onlyMainContent": true
}

1d. Domain-Specific UX Research

firecrawl:firecrawl_search
{
 "query": "<PRODUCT_TYPE> UX best practices usability patterns [current year]",
 "limit": 5,
 "sources": [{ "type": "web" }]
}

Scrape the best result for domain-specific UX patterns.

Step 2: Nielsen's 10 Usability Heuristics (Deep Evaluation)

For each heuristic: code analysis and live browser verification.

H1: Visibility of System Status

What to find in code:

Search *.tsx for feedback patterns: loading|isLoading|isPending|skeleton|Skeleton|spinner|Spinner (loading states); progress|Progress|step.*of|currentStep (multi-step progress); toast|Toast|notification|Notification|snackbar (user notifications).

What to verify in browser:

H2: Match Between System and Real World

What to find in code:

Search *.tsx for copy-quality TODOs: TODO.*wording|TODO.*copy|TODO.*label|TODO.*text (case-insensitive).

What to verify in browser:

H3: User Control and Freedom

What to find in code:

Search *.tsx for emergency-exit patterns: onCancel|handleCancel|onClose|handleClose|onDismiss (cancel/close handlers); undo|Undo|revert|Revert (undo actions); confirm.*delete|confirm.*remove|AlertDialog|ConfirmDialog (destructive-action guards).

What to verify in browser:

H4: Consistency and Standards

What to verify in browser:

H5: Error Prevention

What to find in code:

Search *.tsx for prevention patterns: disabled.*(!|=.*false)|isDisabled|isInvalid (disabled/invalid states); required|min.*length|max.*length|pattern= (input constraints). Check package.json for validation libraries: zod|yup|joi|superstruct|valibot.

What to verify in browser:

H6: Recognition Over Recall

What to verify in browser:

H7: Flexibility and Efficiency of Use

What to find in code:

Search *.tsx for efficiency patterns: keyboard|shortcut|hotkey|useHotkeys|Cmd\+|Ctrl\+ (keyboard accelerators); bulk|batch|selectAll|multiSelect (bulk operations).

What to verify in browser:

H8: Aesthetic and Minimalist Design

What to verify in browser:

H9: Help Users Recognize, Diagnose, and Recover from Errors

What to find in code:

Search *.tsx for error-handling patterns: error.*message|errorMessage|Error.*:.*' (error message strings); try.*catch|\.catch\(|onError (catch sites); fallback|ErrorBoundary|error\.tsx (fallback components — list files with matches, not just count).

What to verify in browser:

H10: Help and Documentation

What to find in code:

Search *.tsx for in-app help: Tooltip|tooltip|HelpCircle|InfoIcon|help.*text|aria-describedby (contextual help); onboarding|tour|walkthrough|guide|Onboarding (guided flows).

What to verify in browser:

Step 3: Laws of UX Evaluation

On a native mobile app also score: primary action in the thumb zone, targets ≥ 44pt / 48dp, 3–5 tab destinations, press feedback on every tappable, haptics on confirm only, body ≥ 16sp. The fix pass for those is enhance-mobile-native-feel.

Step 4: Content and Microcopy Audit (Intuit Content Design Principles)

4a. Voice and Tone

4b. Clarity and Precision

4c. Microcopy Quality

Check these locations in the browser:

4d. Internationalization Readiness

Find violations: search *.tsx for >([\w\s]{3,})< to surface hardcoded visible text strings that may be i18n misses.

Step 5: Emotional Design and Human-Centric Evaluation

5a. First Impression Test (5-Second Test)

Navigate to the landing/home page. In the first 5 seconds of the screenshot:

Further reading

• 5b. Emotional Friction Map and more