ux-extract
Exhaustively extract UX patterns from a reference web app. Walks every screen, captures screenshots of every state, records interaction patterns, copy verbatim, keyboard shortcuts, responsive treatments, motion, and empty/error/loading states. Produces a reusable pattern library that other audits can compare against. The inverse of ux-audit — asks 'what is the bar?' rather than 'does this match the bar?'. Trigger with 'learn from X', 'extract patterns from X', 'study X's UX', 'reverse engineer the UX of X', 'build a pattern library from X'.
npx skills add jezweb/claude-skills --skill ux-extract --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 ## Scope and ethics Before starting, confirm the target is fair game: 1. **Use your own account** — do
- When to use
- Scope and ethics
- Setup
- 1. Browser tool
- 2. Viewport
- 2b. Screenshot post-processing
- 3. Scope
- 4. Focus lens (optional)
- Discovery
- Sitemap crawl
- Pattern inventory
- Capture Phase
- Screenshot all states
- Capture copy verbatim
img-process batch ./screenshots --action optimise --max-width 1440
What does the ux-extract skill do?
Exhaustively extract UX patterns from a reference web app. Walks every screen, captures screenshots of every state, records interaction patterns, copy verbatim, keyboard shortcuts, responsive treatments, motion, and empty/error/loading states. Produces a reusable pattern library that other audits can compare against. The inverse of ux-audit — asks 'what is the bar?' rather than 'does this match the bar?'. Trigger with 'learn from X', 'extract patterns from X', 'study X's UX', 'reverse engineer the UX of X', 'build a pattern library from X'.
How do I install it?
Run `npx skills add jezweb/claude-skills --skill ux-extract --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jezweb/claude-skills, a repository with 954 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.