Agent skill

Discover UI Surface

by ZhixiangLuo in ZhixiangLuo/10xProductivity

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.

MITAuto-check passedProductivity & Automation

Install Discover UI Surface

skills CLI
$ npx skills add ZhixiangLuo/10xProductivity --skill discover-ui-surface -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ZhixiangLuo/10xProductivity discover-ui-surface --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ZhixiangLuo/10xProductivity.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/discover-ui-surface .claude/skills/discover-ui-surface && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
discover-ui-surface
GitHub stars
479
Token cost
~296 tokens
SKILL.md length
48 words
Files
1
Skills in repo
5
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Tasks that involve Browser automation
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve Browser testing
  • Tasks that involve Project scaffolding

What it does

Discover UI Surface is an agent skill from ZhixiangLuo/10xProductivity. 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…

Its SKILL.md is about 300 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Productivity & Automation, covering Browser automation, Browser testing and Project scaffolding. It works with Playwright and Chrome DevTools. The repository describes itself as: Personal AI assistant for work inside corporate constraints, built on coding agents and the tools, sessions, and permissions you already have. The licence is MIT.

When your agent uses it

  • Tasks that involve Browser automation
  • Tasks that involve Browser testing
  • Tasks that involve Project scaffolding

Example prompts

  • “/discover-ui-surface”

What it can do on your machine

Read from SKILL.md and the folder at commit 9a7da40. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Discover UI Surface loads about 296 tokens when it runs. Until then it costs about 152 tokens; SKILL.md has 48 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~152
When it runs · the whole SKILL.md, loaded when a task matches
~296

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ZhixiangLuo/10xProductivity at commit 9a7da40, republished under its MIT licence (© ZhixiangLuo). 48 words, ~296 tokens.

Download SKILL.mdSave it as .claude/skills/discover-ui-surface/SKILL.md (or your agent's skills folder).
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

© ZhixiangLuo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/discover-ui-surface of ZhixiangLuo/10xProductivity.

Open the folder on GitHubat commit 9a7da40

Compare with similar skills

Discover UI Surface next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Discover UI Surface compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Discover UI Surface this skillZhixiangLuo/10xProductivity479—~296Automated safety check: PassMIT
AI Search Hubminsight-ai-info/AI-Search-Hub1.3k—~1.3kAutomated safety check: PassNone
Cdp Connectadobe/skills197—~847Automated safety check: PassApache-2.0
Agent Browseroxylabs/agent-skills875—~3kAutomated safety check: PassMIT
Browser NavigationFactory-AI/factory-plugins111—~2.7kAutomated safety check: PassNone
Playwright Skilltech-leads-club/agent-skills7k—~3.6kAutomated safety check: PassCustom licence

Similar skills

  • AI Search Hub

    minsight-ai-info/AI-Search-Hub

    Run the AI Search Hub browser automation scripts for Yuanbao, LongCat, Doubao, Qwen, Gemini, Grok, and MiniMax.

    1.3k GitHub stars~1.3k tokensUpdated 5 mo ago
    Productivity & AutomationAuto-check passed
  • Cdp Connect

    adobe/skills

    Connect Claude Code to an existing Chrome browser via CDP (Chrome DevTools Protocol).

    197 GitHub stars~847 tokensUpdated today
    Productivity & AutomationAuto-check passed
  • Agent Browser

    oxylabs/agent-skills

    Connects to Oxylabs remote agent browsers over the Chrome DevTools Protocol (CDP) with Playwright or Puppeteer.

    875 GitHub stars~3k tokensUpdated 10 days ago
    Productivity & AutomationAuto-check passed
  • Browser Navigation

    Factory-AI/factory-plugins

    Automate browser interactions for web testing, form filling, screenshots, and data extraction.

    111 GitHub stars~2.7k tokensUpdated 3 days ago
    Productivity & AutomationAuto-check passed
  • Playwright Skill

    tech-leads-club/agent-skills

    Complete browser automation with Playwright. An agent skill from tech-leads-club/agent-skills.

    7k GitHub stars~3.6k tokensUpdated yesterday
    Testing & QAAuto-check passed
  • Sap Sac Test Automation

    secondsky/sap-skills

    SAP Analytics Cloud (SAC) automated testing skill for designing capability-gated browser discovery and deterministic Playwright test suites for SAC stories, dashboards, reports, planning workflows…

    462 GitHub stars~4.2k tokensUpdated 5 days ago
    Testing & QAAuto-check passed

More from ZhixiangLuo/10xProductivity

  • Colleague Distillation

    ZhixiangLuo/10xProductivity

    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…

    479 GitHub stars~2.1k tokensUpdated 2 mo ago
    Auto-check: notes
  • Tool Connector

    ZhixiangLuo/10xProductivity

    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…

    479 GitHub stars~925 tokensUpdated 2 mo ago
    Auto-check passed
  • Enterprise Search

    ZhixiangLuo/10xProductivity

    Search your entire company's institutional knowledge in one query — Slack, Confluence, Jira, Linear, Notion, GitHub, plus any AI or multi-source search tool listed in verifiedconnections.md.

    479 GitHub stars~535 tokensUpdated 2 mo ago
    Auto-check passed
  • Linkedin Engagement

    ZhixiangLuo/10xProductivity

    Automated LinkedIn engagement workflow. An agent skill from ZhixiangLuo/10xProductivity.

    479 GitHub stars~211 tokensUpdated 2 mo ago
    Auto-check: notes

Questions about Discover UI Surface

What does Discover UI Surface do?

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. Discover UI Surface is an agent skill from ZhixiangLuo/10xProductivity. 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.

When should I use Discover UI Surface?

Discover UI Surface fits situations like: tasks that involve Browser automation; tasks that involve Browser testing; tasks that involve Project scaffolding.

How do I install Discover UI Surface in Claude Code?

Run `npx skills add ZhixiangLuo/10xProductivity --skill discover-ui-surface -a claude-code`. Or copy the skill folder (.claude/skills/discover-ui-surface in ZhixiangLuo/10xProductivity) into .claude/skills/discover-ui-surface in your project. Claude Code loads it when a task matches its description.

How do I install Discover UI Surface in Codex?

Run `npx skills add ZhixiangLuo/10xProductivity --skill discover-ui-surface -a codex`. Or copy the skill folder (.claude/skills/discover-ui-surface in ZhixiangLuo/10xProductivity) into .agents/skills/discover-ui-surface in your project. Codex loads it when a task matches its description.

Can I use Discover UI Surface in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ZhixiangLuo/10xProductivity --skill discover-ui-surface -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/discover-ui-surface, .gemini/skills/discover-ui-surface, .github/skills/discover-ui-surface and .opencode/skills/discover-ui-surface in your project.

What does Discover UI Surface need to run?

SKILL.md names no scripts, command-line tools or credentials: Discover UI Surface is instructions for the agent only.

Does Discover UI Surface access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Discover UI Surface safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Discover UI Surface use?

Discover UI Surface is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Discover UI Surface use?

About 296 tokens (SKILL.md is roughly 1.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Discover UI Surface?

Skills that share tags, products or a category with Discover UI Surface: AI Search Hub (minsight-ai-info/AI-Search-Hub, 1.3k stars), Cdp Connect (adobe/skills, 197 stars), Agent Browser (oxylabs/agent-skills, 875 stars) and Browser Navigation (Factory-AI/factory-plugins, 111 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Discover UI Surface?

ZhixiangLuo (a GitHub user) maintains it in ZhixiangLuo/10xProductivity, which has 479 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on July 13, 2026.

Source: ZhixiangLuo/10xProductivity on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.