Ux Extract

This is the inverse of an audit. Instead of checking whether your app matches a standard, you point it at a reference app and it builds the standard. It walks every screen, captures screenshots of all states (hover, empty, error, loading), records copy verbatim, documents keyboard shortcuts and responsive breakpoints, then organizes everything into a reusable pattern library. You'd run this before building a feature to study how best-in-class apps handle it, or to create a concrete benchmark for later audits. The guide is thorough about ethics: use your own account, respect rate limits, keep competitor screenshots internal. Pairs naturally with ux-audit once you have the extract.

skills.sh installs: 687
GitHub stars: 1.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add jezweb/claude-skills --skill ux-extract --agent claude-code

Installs into .claude/skills of the current project.

Files

UX Extract

Exhaustively study a reference web app and produce a reusable pattern library. Goes everywhere, captures everything, then organises it into a document another audit or build can reference.

The inverse of ux-audit:

Audit asks: does this match a bar?
Extract asks: what is the bar?

Audits without extracts implicitly compare to "my memory of other apps" — fragile and inconsistent. Extracts turn that memory into a concrete, navigable artifact. An audit can then say: "Empty state on /app/clients shows no CTA. Reference (claude.ai) shows 3 keyboard shortcuts plus 'New chat' in the same position" instead of "feels a bit sparse".

When to use

Before building a new feature — study how best-in-class apps handle it
Benchmarking a build — extract the reference, then audit against it
Onboarding designers or engineers — here's what good looks like, concretely
Competitor research — document the competitor's UX so you can meaningfully differentiate
Refreshing an old app — extract patterns from modern equivalents to guide the update