skills.rest
StudyDrift
StudyDriftOFFICIAL
Explore all skills by this author →
𝕏@studydriftGitHub

control-ui

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

58|5|Updated Aug 30, 2024
Search Tags:#debugging#playwright#cdp#ui-testing#visual-diff#browser-harness
One-click install
npx skills add https://github.com/StudyDrift/lextures --skill control-ui-studydrift
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: control-ui
Source: https://github.com/StudyDrift/lextures/tree/main/.cursor/skills/control-ui
Command: npx skills add https://github.com/StudyDrift/lextures --skill control-ui-studydrift

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build and adapt a local browser/CDP harness to drive and inspect a web, IDE, or Electron UI for verification, screenshots, accessibility snapshots, perf profiles, and visual diffs.

Core Features & Use Cases

  • Reproduce UI bugs by interacting with the app through a harness.
  • Capture screenshots, accessibility checks, and performance data for evidence.
  • Verify UI behavior before shipping across web, IDE, or Electron apps.

Quick Start

Start by launching the app locally and connect the harness to the dev server or Chromium port to begin validating UI behavior.

Frequently Asked Questions about control-ui

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

FAQPage Schema
How do I use a CDP harness to reproduce UI bugs in a local web app?▼

To reproduce UI bugs, connect a local CDP harness to your app's dev server or Chromium debug port, drive the UI interactions, and inspect the page using stable markers to capture the exact state causing the issue.

Can I capture accessibility snapshots and performance profiles for an Electron app?▼

Yes, you can capture accessibility snapshots and performance profiles by assembling a local browser harness around the Electron app's Chromium debug port to drive and inspect the UI.

What is the best way to capture visual diffs across local IDE instances?▼

The best way to capture visual diffs is to build a local browser harness that connects to your IDE instances, navigates via stable markers, and captures screenshots to compare UI changes before shipping.

Do I need a dedicated testing framework to run visual snapshots on my dev server?▼

No, you do not need a dedicated framework; you can assemble a temporary local browser harness around your app's dev server to capture visual snapshots and inspect UI behavior directly.

Why does my browser harness fail to select the correct page during UI testing?▼

Your harness fails to select the correct page if it lacks stable markers; selecting the correct page via stable markers is required to reliably drive and inspect UI behavior across local instances.

Does Playwright work with CDP for driving local UI testing harnesses?▼

Playwright works with CDP by connecting to the app's Chromium debug port, allowing you to build a local browser harness to drive UI testing, capture screenshots, and inspect performance.

Related Skills

Explore More Software Engineering Skills→
cursorcursor
2.6k

control-ui

Build or adapt local browser harnesses to verify UI behavior.

Official
Advanced
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate
arthrodarthrod

browser-test-agent

Automate web browser interactions and quality assurance testing for local development environments.

Community
Advanced
winstonkoh87winstonkoh87
558

visual-verify-ui

Capture multi-viewport screenshots and compare DOM states for visual regression testing.

Community
Intermediate