discover-ui-surface

$npx mdskill add ZhixiangLuo/10xProductivity/discover-ui-surface

Capture 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

SkillDescription
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).
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.