ux-extract
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
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Ktanstack-query
|
2.5Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.5Ktailwind-theme-builder
>
2.2Kfastapi
|
2.0Kcolor-palette
>
1.9K