discover-ui-surface
discover-ui-surface is a workflow for mapping interactive UI elements and their associated network requests in JavaScript-heavy web applications by manually walking through a user flow once. It captures DOM selectors, API endpoints, and data field structures across three modes (Chrome DevTools Recorder, Playwright observer, or codegen with traces) to generate a reusable reference document. Use this before automating interactions in complex SPAs like LinkedIn, Figma, or Notion where selectors and APIs are not readily available through static code inspection.
git clone --depth 1 https://github.com/ZhixiangLuo/10xProductivity /tmp/discover-ui-surface && cp -r /tmp/discover-ui-surface/.cursor/skills/discover-ui-surface ~/.claude/skills/discover-ui-surfaceSKILL.md
> **Canonical:** `workflows/discover-ui-surface/discover-ui-surface.md` (in this repo). This file is a thin pointer for Cursor 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`.
>
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 twin of a coworker, or capture of someone's technical voice from workplace systems. Requires tool_connections + 10xProductivity verified_connections (or equivalent .env).
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 shipping, CLI contracts) plus human-like pacing for social and communication platforms. Use when automating multi-step processes across tools or platforms.
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", "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.
>
Connect 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.