Discover UI Surface

zhixiangluo/10xproductivity-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.

295 tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

470

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/ZhixiangLuo/10xProductivity --skill discover-ui-surface

The instruction itself

as written by the author

> 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

How to use it

Copy the folder

Take zhixiangluo/10xproductivity-discover-ui-surface from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

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.