/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

BOOST

zhixiangluo@zhixiangluo

GitHub

From plugin

10xproductivity

4765 skills2 commands

Install

$ npx -y skills add ZhixiangLuo/10xProductivity --skill discover-ui-surface --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/discover-ui-surface

Context preview

The summary Claude sees to decide when to auto-load this skill.

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

SKILL.md

discover-ui-surface.SKILL.md

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 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:

Agent Browser: `workflows/discover-ui-surface/agent-browser.md`
Chrome DevTools Recorder: `workflows/discover-ui-surface/chrome-recorder.md`

Read it on GitHub ↗

Ships with10xproductivity

A local-first stack for building a personal AI assistant for work inside real corporate constraints. Use the coding agents, browser sessions, desktop apps, notifications, and tool access you already have.

Get the whole plugin

Stats

Python Bash Git GitHub Playwright

+5 tags

Anthropic Slack Notion Jira Figma

476

Stars

Forks

Maintained

Maintenance

Python

Language