Agent skill · design visual · lobehub
ux-audit
Audit a page / surface against the Designing Interfaces pattern language + the ux skill checklists, then land findings. Three layers — static (code), visual (screenshots), dynamic (automated user journey + perf). Use to run a repeatable, standards-based UX review of one screen.
Why this skill is useful
Provides a structured approach to UX auditing with specific patterns and checklists that the AI wouldn't reliably generate on its own.
What it needs
About 12k tokens when loaded. Last updated 2026-08-07. 81,352 stars on the source repository.
What this skill does
UX Audit A repeatable, standards-based UX review of one surface at a time. The benchmark is two things together: 1. Jenifer Tidwell, Designing Interfaces — the pattern language for what a good interface is made of. See references/pattern-catalog.md. 2. The ux skill — LobeHub's execution checklists for how a flow should behave. The audit answers: which patterns does the surface use (and how well), and where is the experience weak (each gap tied to a checklist item). Recurring gaps feed back as new ux checklist items; the audit itself becomes a worked-example reference. Do one surface per run — a full-app sweep is too much for a single pass. Re-run per page as the product grows; that's the "continuous" part. Three layers — pick by what you need to catch An audit is not one activity. A finding is only trustworthy from a layer that can actually see it. Each layer has its own procedure file; run the ones the surface needs. Layer File What it does Catches Cost -------------- --------------------------------------------------- ----------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------- L1 Static layer-1-static.md Read the code Missing states/branches (empty/error/retry), no draft persist, absent patterns, structural issues cheap, offline, every audit L2 Visual layer-2-visual.md Screenshots of the rendered surface Real visual hierarchy & dominant control, spacing/contrast/alignment, truncation/overflow, how empty/loading/error actually look, responsive breakpoints, dark/light medium; needs a render L3 Dynamic layer-3-dynamic.md Drive the real user journey via acceptance + instrument In-progress/locked states, forced error/empty states, does step N lead to N+1, focus/keyboard, quantified CLS / LCP / INP / long-tasks high; needs a running env + auth Coverage matrix — which layer ca …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills lobehub/ux-audit