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 browser automation block for a JS-heavy SPA, design app, productivity app, or internal portal where selectors and API paths are not obvious from source inspection alone. Modes include Agent Browser for low-token interactive ...
Installs into .claude/skills of the current project.
Are you the author of Discover Ui Surface?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/zhixiangluo-discover-ui-surface-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 browser automation block for a JS-heavy SPA, design app, productivity app, or internal portal where selectors and API paths are not obvious from source inspection alone. Modes include Agent Browser for low-token interactive reconnaissance, Chrome DevTools Recorder, Playwright observer, and Playwright codegen+trace.
---
> **Canonical:** `workflows/discover-ui-surface/discover-ui-surface.md` (in this repo). This file is a thin pointer for Cursor skill discovery — load the canonical workflow doc for the full methodology, Agent Browser guide, 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 guides:
- Agent Browser: `workflows/discover-ui-surface/agent-browser.md`
- Chrome DevTools Recorder: `workflows/discover-ui-surface/chrome-recorder.md`
