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

Observe — quote the screenshot, copy, or code line
Interpret — what does this do to the human in this moment of the pipeline?
Classify — heuristic fail / law violation / microcopy / correct-as-is
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]

Evidenced — screenshot or quoted copy, not "feels confusing"
Per-page — cross-page IA/stories → audit-ux-journeys
Severity justified — P0 blocks the recorded success moment
Right owner — breakpoints → audit-responsive; empty/error → audit-ui-states
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 the Full Data Pipeline

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

Search for data-flow entry points: api/ for API routes, actions/ for server actions, hooks/use for data-fetching hooks, lib/ for core business logic. Count occurrences of fetch|axios|ky|useSWR|useQuery|trpc in .{ts,tsx} to map integration points.

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

Discover routes by framework: app//page.tsx (Next.js App Router), pages//.tsx (Next.js Pages Router), src/routes/ (SvelteKit / Remix), router. (Vue Router / React Router config).

Build the information architecture mental model (per-page only):

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

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.