Agent skill · software engineering · cursor
control-ui
Build or adapt a local browser/CDP harness to drive and inspect a web, IDE, or Electron UI. Use for local UI verification, screenshots, accessibility snapshots, perf profiles, visual diffs, or reproducing UI bugs.
Why this skill is useful
Adds specific Playwright and CDP harness patterns for UI testing that the AI wouldn't reliably generate on its own.
What it needs
Requires playwright installed locally. About 3k tokens when loaded. Last updated 2026-08-06. 2,555 stars on the source repository.
What this skill does
Control UI Use local browser automation to verify UI behavior with evidence. First reuse the repo's own Playwright, browser, or Electron harness if it exists; otherwise assemble a temporary local harness around the app's dev server or Chromium debug port. What It Is Used For Reproducing UI bugs that depend on real browser focus, keyboard input, scrolling, resizing, or rendering. Verifying visual or accessibility changes with screenshots and snapshots. Checking local web, IDE, or Electron behavior before shipping. Capturing console logs, network logs, CPU profiles, traces, or heap snapshots. Creating before/after evidence for verify-this. Setup Pattern 1. Start the app locally using the repo's documented dev command. 2. Discover existing local harnesses: Playwright tests, Cypress specs, Storybook, browser scripts, Electron launch scripts, or snapshot tools. 3. For a web app, connect to the local URL with the existing browser tooling. 4. For Electron/Chromium, enable a remote debugging port when supported. 5. Select the correct page by stable app markers, not by tab order alone. 6. Prefer accessibility roles, labels, and stable data- selectors over coordinates. Generic Web Harness Use the repo's installed browser tooling when possible. If the repo already has Playwright, a minimal one-off probe looks like: Do not add Playwright as a project dependency just for this probe unless the user asks. Prefer existing dev dependencies or external browser tools already available in the environment. Generic CDP Harness For Electron or a Chromium app launched with --remote-debugging-port=<port>, connect over CDP: Replace <app-root-selector> with a stable marker from the current repo, such as a root app node, landmark, or product-specific data- attribute. Interaction Loop 1. Capture a page snapshot or screenshot before acting. 2. Choose a target from the latest page structure. 3. Perform exactly one structural action: click, type, keypress, drag, scroll, navigate, or resize. 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills cursor/control-ui