discover-ui-surface
$
npx mdskill add ZhixiangLuo/10xProductivity/discover-ui-surfaceCapture durable UI interaction maps for JS-heavy SPAs.
- Generates reusable selector and endpoint references for automation scripts.
- Integrates with Chrome DevTools, Playwright, and network observers.
- Selects recording mode based on speed, richness, or structure needs.
- Outputs structured maps of DOM elements, requests, and field shapes.
SKILL.md
.github/skills/discover-ui-surfaceView on GitHub ↗
--- 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 Playwright block for a JS-heavy SPA (LinkedIn, Figma, Notion, etc.) where selectors and API paths are not obvious from source inspection alone. Three modes: Chrome DevTools Recorder (fastest), Playwright observer (richest), Playwright codegen+trace (most structured). --- > **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, 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 guide for Chrome DevTools Recorder is at `workflows/discover-ui-surface/chrome-recorder.md`.
More from ZhixiangLuo/10xProductivity
- colleague-distillationDistill 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 twin of a coworker, or capture of someone's technical voice from workplace systems. Requires tool_connections + 10xProductivity verified_connections (or equivalent .env).
- linkedin-engagementAutomated 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", "find a post to comment on", "post a LinkedIn comment", or "engage on [topic]". Requires LinkedIn session credentials in .env. Everything runs locally — credentials never leave your machine.
- tool-connectorConnect any tool you use at work to your agent — including internal company tools, custom-built systems, deployment portals, incident trackers, internal knowledge bases, HR systems, and commercial tools like Slack, Confluence, Jira, Linear, GitHub, Outlook, Datadog, and PagerDuty. Use when the user wants to set up a tool connection, connect an internal or custom-built tool, or add a new tool integration from scratch.