← ClaudeAtlas

ux-waiting-auditlisted

Audit UX waiting states for web applications with long-running operations (30+ seconds). Use when asked to evaluate, audit, or analyze a product's loading states, wait times, progress indicators, or user experience during slow operations. Requires browser automation (Chrome MCP tools). Generates comprehensive reports with screenshots, checklist evaluation, and prioritized recommendations.
aiskillstore/marketplace · ★ 329 · Web & Frontend · score 79
Install: claude install-skill aiskillstore/marketplace
# UX Waiting States Audit Evaluate how applications handle long-running operations (30+ seconds) using browser automation. ## Core Principle **Screenshot First, DOM Second** — always take a screenshot when navigating or stuck. Visual inspection beats DOM probing. ``` 📸 Screenshot → 👀 Analyze visually → 🎯 Click coordinates → 📸 Verify → Repeat ``` --- ## Critical: Screenshot-First Automation ### When to Screenshot ALWAYS screenshot: - After opening any URL (initial state) - Before trying to interact with elements - When ANY JavaScript returns "missing value" or fails - After clicking/submitting (verify success) - At timed intervals during long operations ### Why Screenshots Beat DOM Probing | DOM Approach | Screenshot Approach | |--------------|---------------------| | Complex selectors fail silently | Visual shows exact UI state | | "missing value" gives no info | Image reveals button locations | | 10+ attempts to find element | 1 screenshot → click coordinates | | Can't see actual user experience | See exactly what user sees | ### Screenshot Workflow Pattern ```python # 1. Navigate Control Chrome:open_url(TARGET_URL) sleep(2) # 2. ALWAYS screenshot first # Use browser screenshot or html2canvas # Analyze the image before ANY interaction # 3. If interaction needed, prefer coordinates over selectors # After seeing screenshot: "The submit button is at ~(1200, 650)" Control Chrome:execute_javascript("document.elementFromPoint(1200, 650).click()") # 4. Screensh