skills.rest
nthpaul
nthpaulCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

control-ui

Control local browser or CDP-driven UIs to capture before/after evidence artifacts.

Updated May 18, 2025
Search Tags:#accessibility#screenshots#playwright#ui testing#cdp#visual diffs#electron debugging
One-click install
npx skills add https://github.com/nthpaul/dotfiles --skill control-ui-nthpaul
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: control-ui
Source: https://github.com/nthpaul/dotfiles/tree/main/cursor/.cursor/plugins/cache/cursor-public/cursor-team-kit/d1cdb88a9eb33cf392395c87e3fd76419fc1010e/skills/control-ui
Command: npx skills add https://github.com/nthpaul/dotfiles --skill control-ui-nthpaul

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of verifying real UI behavior locally when bugs, regressions, or accessibility/performance changes depend on browser/Electron/IDE state that mocks can’t reliably reproduce.

Core Features & Use Cases

  • Local Browser/CDP UI Harnessing: Reuse an existing Playwright/browser/Electron harness when available, or assemble a temporary local harness around the dev server or Chromium debug port.
  • Evidence-First UI Verification: Capture before/after screenshots, accessibility snapshots, console/network logs, CPU traces, heap snapshots, and other artifacts for visual diffs and debugging.
  • Robust Interaction Loop: Select pages by stable markers, perform one structural action at a time, then re-snapshot to confirm the expected state change.

Quick Start

Use the control-ui Skill to run a local dev UI, connect to the appropriate page via existing browser tooling or CDP, perform one targeted interaction, and save screenshot/evidence artifacts for before/after comparison.

Frequently Asked Questions about control-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I capture before and after screenshots for UI regression testing?▼

To capture UI regression evidence, connect to your local UI via Playwright or CDP, perform a single structural action, and capture fresh screenshots after each step. This deterministic approach ensures reliable visual diffs for before and after comparisons.

Can I use Playwright to inspect accessibility snapshots in a local web UI?▼

Yes, you can use Playwright to drive a local web UI and capture accessibility snapshots. This allows you to inspect the current state of the page and verify accessibility changes directly against real browser state.

Does Chromium remote debugging port support console and network log capture for Electron debugging?▼

Yes, the Chromium remote debugging port supports console and network log capture for Electron debugging. By connecting a local harness to the debug port, you can inspect real UI behavior and capture network logs as reliable evidence.

What is the best way to reproduce user-facing issues that depend on specific browser state?▼

The best way to reproduce user-facing issues is local browser control, which bypasses mocks by connecting to real browser state. You can reuse existing dev harnesses or assemble a temporary local harness to interact with the UI.

Why do I need to select pages via stable app markers during UI testing?▼

You need to select pages via stable app markers during UI testing to ensure robust interaction. This structural approach targets the correct page reliably, allowing you to perform one action at a time and confirm the expected state change.

Related Skills

Explore More Design & Creative Skills→
cursorcursor
2.6k

control-ui

Build or adapt local browser harnesses to verify UI behavior.

Official
Advanced
zeronx798zeronx798

dogfood

Navigate web pages and interact with DOM elements to detect functional, visual, accessibility issues via browser snapshots and console error monitoring, producing structured bug reports.

Community
Advanced
StudyDriftStudyDrift
58

control-ui

Builds and adapts a browser/CDP harness to inspect web, IDE, or Electron UI.

Official
Intermediate
brsblbrsbl
14

browser

Automate browser tasks to inspect UI, capture screenshots, fill forms, and extract page data.

Community
Intermediate