zhixiangluo/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 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.
npx skills add https://github.com/ZhixiangLuo/10xProductivity --skill discover-ui-surface> 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, 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:
workflows/discover-ui-surface/agent-browser.mdworkflows/discover-ui-surface/chrome-recorder.mdTake zhixiangluo/discover-ui-surface from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.