control-ui

Drives local browser and Electron UIs via Playwright or CDP for verification and evidence capture.

3|Updated Apr 8, 2025
One-click install
npx skills add https://github.com/ZanzyTHEbar/dragonarchy --skill control-ui-zanzythebar
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: control-ui
Source: https://github.com/ZanzyTHEbar/dragonarchy/tree/main/packages/opencode/.config/opencode/skills/control-ui
Command: npx skills add https://github.com/ZanzyTHEbar/dragonarchy --skill control-ui-zanzythebar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve? Verifying UI behavior that depends on real browser focus, keyboard input, scrolling, or rendering is hard to do from code alone. This Skill builds or reuses a local browser/CDP harness to drive a web, IDE, or Electron app and capture concrete evidence of its behavior. ## Core Features & Use Cases - Local UI Automation: Connect to a dev server or a Chromium/Electron remote debugging port and interact with the app using accessibility roles and stable selectors. - Evidence Capture: Take screenshots, accessibility snapshots, console logs, network logs, CPU profiles, traces, and heap snapshots for before/after comparisons. - Structured Interaction Loop: Perform one structural action at a time (click, type, scroll, resize) and verify the resulting state change with fresh snapshots. - Use Case: You fixed a rendering bug in an Electron app. Launch it with a remote debugging port, connect over CDP, select the correct window by an app-root marker, reproduce the bug scenario, and save before/after screenshots as proof. ## Quick Start Start the app locally and use this Skill to connect to it with Playwright or CDP, reproduce the UI issue, and capture a screenshot showing the result.

Frequently Asked Questions about control-ui

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

FAQPage Schema
How do I automate a local web app with Playwright?

Launch a browser with Playwright, navigate to the local dev server URL, and interact using role-based locators like getByRole. Capture screenshots with page.screenshot to verify state changes after each action.

How do I connect Playwright to an Electron app?

Launch the Electron app with --remote-debugging-port set, then use chromium.connectOverCDP with that port. Select the correct page by checking for a stable app-root selector rather than relying on tab order.

What is the Chrome DevTools Protocol used for in UI testing?

CDP provides low-level access when higher-level browser APIs are insufficient, including CPU profiles, traces, heap snapshots, network throttling, request blocking, viewport emulation, and console or exception streaming.

Why do Playwright selectors break after navigation?

Element references become stale after navigation or DOM structural changes. Re-query elements from a fresh page snapshot after each action, and prefer accessibility roles, labels, and stable data-* attributes over coordinates.

When should I avoid coordinate-based clicks in browser automation?

Avoid coordinate clicks unless a fresh screenshot was captured immediately before the click, since layout shifts invalidate positions. Prefer role-based and label-based selectors, which survive rendering and viewport changes.