discover-ui-surface
SkillWeb & browsingWalk 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.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the discover-ui-surface skill
What this skill tells your AI
The instructions your AI receives, as published by zhixiangluo/10xproductivity in .claude/skills/discover-ui-surface/SKILL.md and read by ahel’s review.
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 theassets/observe_session.py+assets/har_to_map.pyscripts.
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
Signals
- GitHub stars
- 474
- Forks
- 55
- Last commit
- Jul 2026
Advanced
- Catalog kind
- skill
- Gateway key
discover-ui-surface- Source
- github.com/zhixiangluo/10xproductivity