/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
$ npx -y skills add ZhixiangLuo/10xProductivity --skill discover-ui-surface --agent claude-codeHow 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.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- 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.mdname: 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`
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.
Repo: ZhixiangLuo/10xProductivity
Other skills on 10xproductivity.
- /assistant-orchestrator
Operate the 10xProductivity assistant inbox workflow. Use when running or debugging 10x-host, Slack self-DM polling, macOS notification triggers, scheduling runtime, or trigger-to-workflow routing.
Open skill - /colleague-distillation
Distill a colleague into a reusable AI skill (work + persona) using tool connections — Slack, Slack AI, Jira, GHE, Bitbucket, Confluence, SharePoint, Teams, Outlook, Notion, Linear, Google Docs, and more — without manual paste. Use when the user wants a colleague skill, digital
Open skill - /create-workflow
Design and build automation workflows using building blocks — clarify outcomes, decompose by dependencies, reuse prior art, verify each block before chaining, and research when stuck. Covers generic divide-and-conquer (problem framing, observable surfaces, investigation vs
Open skill - /linkedin-engagement
Automated LinkedIn engagement workflow. The agent finds a relevant post on your chosen topic, drafts a comment with a genuine insight, gets your approval in chat, and posts it — all in one loop. You approve once before anything is posted. Use when asked to "engage on LinkedIn",
Open skill