audit-ux

name: audit-ux description: > Audit user experience quality using research-backed frameworks: Nielsen Norman Group's 10 usability heuristics, Intuit Content Design System for microcopy, Google's HEART metrics, and Laws of UX (Fitts's, Hick's, Miller's, Jakob's, cognitive load). Evaluates information architecture, user flows, error recovery, onboarding, content clarity, and interaction patterns. Uses browser MCP for live walkthrough, Firecrawl for current NN/g research, and Sequential Thinking for complex flows. Generic — works with any webapp. Use when evaluating usability, reviewing user flows, auditing microcopy, checking UX heuristics, assessing cognitive load, reviewing onboarding, or when the user mentions UX audit, usability review, heuristic evaluation, content audit, interaction design review, or user flow analysis. Focuses on EXPERIENCE — for visual design-system compliance (tokens, components, dark mode), use audit-uiux-design-system instead. license: MIT

UX Audit Skill

Research-driven user experience evaluation grounded in NN/g heuristics, Laws of UX, Intuit Content Design principles, and Google HEART metrics.

Before ANY browser interaction, read the browser-anti-stall skill and apply its rules to every step. That skill lives at ~/.cursor/skills/protocol-browser-anti-stall/SKILL.md.

CRITICAL: Context-First, Human-Centric Approach

UX recommendations that don't understand the WHY behind the product are surface-level checkbox audits. Before evaluating ANY heuristic or pattern, you MUST deeply understand:

Who is the human? Not "users" — real people with frustrations, time pressure, emotional states, and goals beyond the screen. A tired parent filing taxes at 11pm needs different UX than a power-user analyst building dashboards at work.
What's the full journey? The page you're looking at is one moment in a longer story. Understand what happened before (how they arrived, what they already know) and what happens after (what they do with the result, where they go next).
What's the data pipeline? Trace data from human input → API → database → back to screen. UX breaks when this pipeline has latency, errors, or mismatch between what the human expects and what the system returns.
What's the emotional arc? Every product interaction has an emotional shape: confusion → understanding → action → confirmation → satisfaction (or frustration). Map where the product currently creates anxiety, confusion, or dead ends.

Do NOT skip Step 0. A shallow understanding produces shallow recommendations.

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 the Full Data Pipeline

Trace how data flows through the system from the human's perspective:

Glob: **/api/** → API routes
Glob: **/actions/** → Server actions
Glob: **/hooks/use* → Data-fetching hooks
Glob: **/lib/** → Core business logic
Grep: "fetch|axios|ky|useSWR|useQuery|trpc" glob "*.{ts,tsx}" output_mode "count"

Map the pipeline for each core task:

PIPELINE MAP (per core task):
1. Human input → [form / click / gesture]
2. Client-side validation → [schema / inline / none]
3. API call → [endpoint, method, payload]
4. Server processing → [validation, business logic, side effects]
5. Database operation → [create / read / update / delete]
6. Response → [shape, status codes, error format]
7. Client update → [optimistic / refetch / cache invalidation]
8. Human feedback → [toast / redirect / inline update / nothing]

Latency-sensitive points: [where slow responses hurt UX]
Error-prone points: [where failures are most likely]
Trust-sensitive points: [where wrong data erodes confidence]

0c. Map Routes and Information Architecture

Glob: **/app/**/page.tsx → Next.js App Router pages
Glob: **/pages/**/*.tsx → Next.js Pages Router
Glob: **/src/routes/** → SvelteKit / Remix routes
Glob: **/router.* → Vue Router / React Router config

Build the information architecture mental model:

INFORMATION ARCHITECTURE:
- Navigation structure: [flat / hierarchical / hub-and-spoke]
- Depth: [max clicks from landing to deepest page]
- Cross-links: [can users jump between sections, or must they go back?]
- Dead ends: [pages with no forward navigation]

0d. Identify Emotional Touchpoints

Map the emotional arc of core user journeys:

EMOTIONAL MAP (per core flow):
- Entry emotion: [anxious / curious / frustrated / neutral]
- Friction points: [where confusion or anxiety spikes]
- Confidence builders: [where the product earns trust]
- Peak moment: [the most positive or negative experience]
- End emotion: [satisfied / relieved / confused / abandoned]

0e. Record Full Discovery

PRODUCT CONTEXT:
- Type: [SaaS / e-commerce / dashboard / etc.]
- Human problem solved: [the pain, not the feature]
- Primary human: [description including emotional context]
- Core tasks: [list top 3-5]
- Success moment: [what "done" looks like to the human]
- Trust level: [what's at stake — money / data / time / reputation]
- Page count: [N]
- Auth required: [YES/NO — pattern]
- Locale/i18n: [YES — languages / NO]
- Pipeline health: [known latency or error-prone points]

Step 1: Research Current UX Standards

1a. NN/g — Usability Heuristics and Methods

CallMcpTool(server: "user-firecrawl", toolName: "firecrawl_search", arguments: {
 "query": "site:nngroup.com heuristic evaluation checklist [current year]",
 "limit": 5,
 "sources": [{ "type": "web" }]
})

1b. Intuit Content Design — Microcopy Principles

CallMcpTool(server: "user-firecrawl", toolName: "firecrawl_search", arguments: {
 "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

CallMcpTool(server: "user-firecrawl", toolName: "firecrawl_scrape", arguments: {
 "url": "https://lawsofux.com",
 "formats": ["markdown"],
 "onlyMainContent": true
})

1d. Domain-Specific UX Research

CallMcpTool(server: "user-firecrawl", toolName: "firecrawl_search", arguments: {
 "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, perform both code analysis and live browser verification.