anastasiyaw/codex-claude-code-config/control-ui

Claude Code and agent skill by anastasiyaw/codex-claude-code-config

Trust tier 2
  • community
LLM review pending
Source check pending

Checking that the SKILL.md file is still in the repository.

Drive and inspect a local web, IDE, or Electron UI with browser or CDP automation and evidence. Use for UI regressions, screenshots, accessibility snapshots, visual diffs, focus, keyboard, scrolling, resize, console, network, performance, or heap checks. Do not use for backend-only changes or for a screenshot without a behavior claim.

Install

npx vskill@latest install anastasiyaw/codex-claude-code-config/control-ui

SKILL.md

Control UI

Verify UI behavior at the real browser or Electron boundary. Reuse the project's Playwright, Cypress, browser, or Electron harness before creating a probe. Keep the data local and disposable.

Workflow

  1. Read the project's documented start command and identify the local URL or

debug port.

  1. Discover existing browser tests and stable app markers.
  2. Select the target page by a positive root marker, role, label, or stable

data-* attribute, not tab order or coordinates.

  1. Capture the initial DOM/accessibility snapshot, screenshot, console state,

or network baseline relevant to the claim.

  1. Perform one structural action: click, type, keypress, drag, scroll, navigate,

or resize.

  1. Capture the new state and assert the expected change.
  2. Clean up the dev server, debug session, temporary profile, and artifacts.

Use verify-this for before/after claims. Use raw CDP only when higher-level APIs cannot provide the required CPU, heap, trace, network, or rendering signal. Do not install Playwright just for a one-off probe when an existing browser tool or dependency is available.

Evidence and privacy

Screenshots, traces, network bodies, and heap snapshots may contain private code or user data. Keep them outside public Git unless they are explicitly sanitized and approved. A public report should contain the command, revision, safe metric, and artifact hash or private location, not the payload.

Gotchas

  • A screenshot without an assertion proves that rendering occurred, not that the

workflow is correct.

  • Coordinates and stale locators are fragile after navigation or layout change;

select from the latest structure.

  • A successful page load does not prove console, network, accessibility, or

keyboard behavior.

  • A visual diff can be caused by viewport, font, locale, or reduced-motion

differences; record those inputs before interpreting it.

Troubleshooting

SymptomLikely causeAction
Wrong tab or windowSelector relied on tab orderEnumerate pages and choose a positive app marker
Click changes nothingStale locator or wrong stateCapture a fresh snapshot and wait for the state marker
Screenshot differs only on one machineFonts, viewport, scale, or locale driftPin the test inputs and classify as INCONCLUSIVE until comparable
Browser remains after the runCleanup path missed an exceptionUse a bounded cleanup step and verify the process/profile is gone

Source

Adapted from Cursor Team Kit's MIT-licensed control-ui workflow: https://github.com/cursor/plugins/tree/main/cursor-team-kit/skills/control-ui

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewNot runA model review is scheduled for the next rescan.

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

Source

Popularity

Repository stars
150
Repository forks
24
7-day trend score
25

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/anastasiyaw/codex-claude-code-config/control-ui/badge)](https://verified-skill.com/skills/anastasiyaw/codex-claude-code-config/control-ui)

Something wrong with this skill or its page? Tell us.