Claude MarketplacesSubmit
zhixiangluo avatar

Discover Ui Surface

zhixiangluo/10xproductivity

Before you write Playwright scripts for something like LinkedIn or Notion, run through the flow once with this and it'll build you a map of what selectors actually work and which API calls fire when you click things. It's the difference between guessing at CSS selectors in a React app and having a tested reference. Three modes depending on how much detail you need: Chrome DevTools Recorder if you just want the basics fast, Playwright observer for richer capture, or Playwright codegen plus trace for the full structured output. Saves you from that painful cycle of write script, run it, watch it break on a data-testid that changed yesterday.

GitHub stars
357
last updated
Jun 11, 2026
View on GitHub

Install

$ npx -y skills add zhixiangluo/10xproductivity --skill discover-ui-surface --agent claude-code

Installs into .claude/skills of the current project.

Files

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
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/zhixiangluo/10xproductivity
Categories
Frontend Development, Backend & APIs, Testing & QA, Documentation, Automation & Workflows, Design & UI/UX, Office & Documents
License
MIT
First seen
Jun 11, 2026

More from zhixiangluo/10xproductivity

All 7

Recommended

More Frontend Development
1vercel-labs avatarvercel-react-best-practicesvercel-labs/agent-skillsReact and Next.js performance optimization across 70 rules prioritized by impact.885.1Kskills.sh installs
2shadcn avatarshadcnshadcn/uiComplete shadcn/ui component management for adding, searching, fixing, styling, and composing UI.234.7Kskills.sh installs
3google-labs-code avatarshadcn-uigoogle-labs-code/stitch-skillsExpert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practi54.3Kskills.sh installs
4flutter avatarflutter-add-widget-testflutter/agent-pluginsImplement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that41.4Kskills.sh installs
5clerk avatarclerk-react-patternsclerk/skillsReact SPA auth patterns with @clerk/react for Vite/CRA - ClerkProvider setup, useAuth/useUser/useClerk hooks, React Router protected routes, custom sign-in flow20.4Kskills.sh installs
6antfu avatarvue-router-best-practicesantfu/skillsVue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.18.8Kskills.sh installs