discover-ui-surface logo

discover-ui-surface

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).

SKILL.md

Full skill instructions

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