ux-extract

What problem does it solve?

Auditing or building interfaces against vague memories of other apps produces inconsistent results. This Skill systematically studies a reference web app — every screen, state, and interaction — and turns it into a concrete, screenshot-backed pattern library that audits and builds can compare against.

Core Features & Use Cases

• Exhaustive capture: Walks every route and records screenshots of default, hover, focus, loading, empty, error, and success states, plus verbatim copy, keyboard shortcuts, motion, and responsive treatments at 1440/768/375 widths.
• Deduplicated pattern library: Consolidates repeated patterns into a navigable, cross-referenced document with occurrence counts, variants, and a verbatim copy corpus.
• Audit integration: Writes the library to a standard path (docs/ux-extracts/<app>/) so ux-audit can cite specific reference patterns in its findings.
• Use Case: Before building a settings flow, extract patterns from a best-in-class SaaS app to document exactly how it handles forms, modals, empty states, and destructive confirmations.

Quick Start

Ask Claude to extract UX patterns from a reference app, for example: "Study claude.ai's UX and build a pattern library focusing on empty states and keyboard shortcuts."