Walk through a UI flow once manually and capture a durable interaction map — which DOM elements to click, which network requests they trigger, and what field shapes they expose. Produces a reusable selector+endpoint reference for automation scripts. Use before writing any Playwright block for a JS-heavy SPA (LinkedIn, Figma, Notion, etc.) where selectors and API paths are not obvious from source inspection alone. Three modes: Chrome DevTools Recorder (fastest), Playwright observer (richest), ...
Scanned 5/27/2026
Install via CLI
Skills Directoryopenskills install ZhixiangLuo/10xProductivity---
name: discover-ui-surface
description: Walk through a UI flow once manually and capture a durable interaction map — which DOM elements to click, which network requests they trigger, and what field shapes they expose. Produces a reusable selector+endpoint reference for automation scripts. Use before writing any Playwright block for a JS-heavy SPA (LinkedIn, Figma, Notion, etc.) where selectors and API paths are not obvious from source inspection alone. Three modes: Chrome DevTools Recorder (fastest), Playwright observer (richest), Playwright codegen+trace (most structured).
---
> **Canonical:** `workflows/discover-ui-surface/discover-ui-surface.md` (in this repo). This file is a thin pointer for Claude Code skill discovery — load the canonical workflow doc for the full methodology, modes, and the `assets/observe_session.py` + `assets/har_to_map.py` scripts.
Read `workflows/discover-ui-surface/discover-ui-surface.md` and follow it. Companion guide for Chrome DevTools Recorder is at `workflows/discover-ui-surface/chrome-recorder.md`.
No comments yet. Be the first to comment!
Orchestrate multi-phase deep research with web search, memory retrieval, pattern matching, and synthesis into structured findings
