Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

control-ui — Claude Code skill: what it does, how to install

Inspects and tests local web, IDE, or Electron interfaces via browser automation and CDP. Captures screenshots, traces, and verifies UI changes without extra dependencies.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add cursor/plugins --skill control-ui -a claude-code
Open on GitHub

What control-ui does

The skill drives and verifies local web apps, IDEs, and Electron interfaces using local browser automation or CDP. It first looks for existing Playwright or Cypress setups in the workspace. If none exist, it runs a disposable harness targeting the local dev server or a Chromium remote debugging port.

Interactions follow a strict loop. The agent takes a snapshot, targets a stable accessibility role or data-* attribute, executes a single action, and takes another snapshot to confirm the state change. For Electron apps, it connects over --remote-debugging-port=<port>. Notably, the skill forbids installing Playwright into the project dependencies for a one-off probe unless you explicitly ask for it.

Raw CDP access unlocks heap snapshots, network throttling, CPU profiling, and console streaming. Once verification is done, the agent cleans up active dev servers and temporary browser profiles.

What it helps with

  • reproduce UI bugs requiring real browser focus and keyboard input
  • capture before-and-after screenshots during visual refactoring
  • inspect Electron apps over a Chromium debugging port
  • record CPU profiles, heap snapshots, and console errors

Example prompts for the agent

  • Spin up the local dev server, click the checkout button, and take a full-page screenshot
  • Connect to the Electron app over CDP and take a heap snapshot to check for memory leaks

How to install control-ui

1Skills CLI (Vercel)

npx skills add cursor/plugins --skill control-ui -a claude-code

2Manually: put the files in place

~/.claude/skills/control-ui/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/control-ui/

From the same set18

The whole set →
unslop cursor This skill removes common AI writing patterns, filler, and vague phrasing while keeping the meaning and intended tone. Use it when polishing text. Claude Code CX Codex Cursor +1 27,700installs thermo-nuclear-code-quality-review cursor Runs a strict maintainability audit of code changes, abstractions, large files, and branching complexity. Use it when a routine review needs deeper structural scrutiny. Claude Code CX Codex Cursor +1 22,200installs deslop cursor Inspects branch diffs against main to remove AI-generated code clutter and inconsistent styling. Ideal for polishing branch changes before pull request review. Claude Code CX Codex Cursor +1 9,300installs how cursor Explores codebase architecture and runtime execution paths before you edit code. Helps determine module ownership, layering, and placement for new features. Claude Code CX Codex Cursor +1 5,900installs why cursor The skill investigates why code took its current shape by checking Git history and available MCP sources, then returns cited findings about decisions and tradeoffs. Claude Code CX Codex Cursor +1 5,700installs fix-merge-conflicts cursor Resolves merge conflicts in a branch, then checks the build and tests before wrapping up. Use it when several conflicted files need focused fixes without a refactor. Claude Code CX Codex Cursor +1 2,700installs thermo-nuclear-review cursor A skill for comprehensive analysis of branch changes: checks code for bugs, broken functionality, security vulnerabilities, and feature-gate leaks. Use when you need thorough review before merge. Claude Code CX Codex Cursor +1 2,700installs review-and-ship cursor This skill automates code review before shipping: checks for bugs, tests, and intent fit, then commits and opens a PR. Use it to verify your work is ready before merge. Claude Code CX Codex Cursor +1 2,500installs

Similar

quantized-export Seth Hobson Exports promoted checkpoints and LoRA adapters as FP8, AWQ, GGUF, or merged safetensors. Use it before deploying a model. Claude Code CX Codex Cursor 2,600installs eval-harness-first Seth Hobson Builds the evaluation harness before fine-tuning with goldens, graders, judge calibration, and a base-model baseline. Useful for tracking regressions. Claude Code CX Codex Cursor 2,600installs checkpoint-promotion Seth Hobson Gates a trained checkpoint before release by checking data quality, capability drift, forgetting, and paired results against the base model. Claude Code CX Codex Cursor 2,600installs dart-migrate-to-checks-package dart-lang Migrates Dart test suites from legacy package:matcher to package:checks. Useful when modernizing test assertions for static type safety and detailed diagnostics. Claude Code CX Codex Cursor +1 18,000installs validate-skills Callstack Checks skills in skills/ against the agentskills.io specification and Claude Code practices. Use it when authoring or reviewing a skill collection. Claude Code CX Codex Cursor +1 7,200installs pptx-quality-gates kimtth Checks and repairs editable PPTX decks for geometry, accessibility, native objects, source lineage, and OOXML package integrity before delivery. Claude Code CX Codex Cursor 2,500installs improve-codebase-architecture Matt Pocock This skill scans a codebase for architectural friction, then builds a visual HTML report with refactoring candidates. Use it before a deeper architecture review. Claude Code 1,163,035installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about control-ui

How to install control-ui in Claude Code?

Run npx skills add cursor/plugins --skill control-ui -a claude-code. Alternatively, put the file at ~/.claude/skills/control-ui/SKILL.md.

What does the control-ui skill do?

It sets up local browser automation to inspect UI behavior, capture visual diffs, and collect CDP performance profiles.

Will this skill add new packages to package.json?

No. Its guardrails explicitly forbid adding Playwright as a project dependency unless you specifically ask for it.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor