Security Visual Testing
proffesor-for-testing/agentic-qe
Security-first visual testing combining URL validation, PII detection, and visual regression with parallel viewport support.
Drive and inspect a local web, IDE, or Electron UI with browser or CDP automation and evidence.
Install Control UI
$ npx skills add AnastasiyaW/codex-claude-code-config --skill control-ui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install AnastasiyaW/codex-claude-code-config control-ui --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/development/control-ui .claude/skills/control-ui && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "control-ui" agent skill from https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/development/control-ui into .claude/skills/control-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "control-ui", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/development/control-uiType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add AnastasiyaW/codex-claude-code-config --skill control-ui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install AnastasiyaW/codex-claude-code-config control-ui --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/development/control-ui .agents/skills/control-ui && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "control-ui" agent skill from https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/development/control-ui into .agents/skills/control-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "control-ui", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add AnastasiyaW/codex-claude-code-config --skill control-ui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install AnastasiyaW/codex-claude-code-config control-ui --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/development/control-ui .cursor/skills/control-ui && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "control-ui" agent skill from https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/development/control-ui into .cursor/skills/control-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "control-ui", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/AnastasiyaW/codex-claude-code-config.git --path skills/development/control-ui--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add AnastasiyaW/codex-claude-code-config --skill control-ui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install AnastasiyaW/codex-claude-code-config control-ui --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/development/control-ui .gemini/skills/control-ui && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "control-ui" agent skill from https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/development/control-ui into .gemini/skills/control-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "control-ui", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install AnastasiyaW/codex-claude-code-config control-uiInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add AnastasiyaW/codex-claude-code-config --skill control-ui -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/development/control-ui .github/skills/control-ui && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "control-ui" agent skill from https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/development/control-ui into .github/skills/control-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "control-ui", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add AnastasiyaW/codex-claude-code-config --skill control-ui -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install AnastasiyaW/codex-claude-code-config control-ui --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/development/control-ui .opencode/skills/control-ui && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "control-ui" agent skill from https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/development/control-ui into .opencode/skills/control-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "control-ui", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
control-ui- GitHub stars
- 154
- Token cost
- ~757 tokens
- SKILL.md length
- 374 words
- Files
- 1
- Skills in repo
- 50
- Repo updated
- First seen
- Licence
- MIT
At a glance
Drive and inspect a local web, IDE, or Electron UI with browser or CDP automation and evidence.
- Works in 7 steps: Read the project's documented start… → Discover existing browser tests and… → Select the target page by a positive… → …
- Accessibility snapshots
- SKILL.md covers Workflow, Evidence and privacy, Gotchas and Troubleshooting, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Control UI is an agent skill from AnastasiyaW/codex-claude-code-config. 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.
Its SKILL.md is about 760 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Testing & QA, covering Visual regression testing and Accessibility. The repository describes itself as: Claude Code, Codex, and multi-agent configuration system: principles, hooks, skills, and workflow patterns for AI-assisted development. The licence is MIT.
When your agent uses it
- Accessibility snapshots
- Backend-only changes
- For a screenshot without a behavior claim
Example prompts
- “/control-ui”
Workflow steps
7 steps, taken from the first numbered list in SKILL.md.
- Read the project's documented start command and identify the local URL or
- Discover existing browser tests and stable app markers.
- Select the target page by a positive root marker, role, label, or stable
- Capture the initial DOM/accessibility snapshot, screenshot, console state,
- Perform one structural action: click, type, keypress, drag, scroll, navigate,
- Capture the new state and assert the expected change.
- Clean up the dev server, debug session, temporary profile, and artifacts.
What it can do on your machine
Read from SKILL.md and the folder at commit 67709af. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
github.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Control UI loads about 757 tokens when it runs. Until then it costs about 87 tokens; SKILL.md has 374 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from AnastasiyaW/codex-claude-code-config at commit 67709af, republished under its MIT licence (© AnastasiyaW). 374 words, ~757 tokens.
Download SKILL.mdSave it as
.claude/skills/control-ui/SKILL.md (or your agent's skills folder).- name
- control-ui
- description
- 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.
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
- Read the project's documented start command and identify the local URL or debug port.
- Discover existing browser tests and stable app markers.
- Select the target page by a positive root marker, role, label, or stable
data-*attribute, not tab order or coordinates. - Capture the initial DOM/accessibility snapshot, screenshot, console state, or network baseline relevant to the claim.
- Perform one structural action: click, type, keypress, drag, scroll, navigate, or resize.
- Capture the new state and assert the expected change.
- 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.
Show full SKILL.md (157 more words)Show less
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
| Symptom | Likely cause | Action |
|---|---|---|
| Wrong tab or window | Selector relied on tab order | Enumerate pages and choose a positive app marker |
| Click changes nothing | Stale locator or wrong state | Capture a fresh snapshot and wait for the state marker |
| Screenshot differs only on one machine | Fonts, viewport, scale, or locale drift | Pin the test inputs and classify as INCONCLUSIVE until comparable |
| Browser remains after the run | Cleanup path missed an exception | Use 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
© AnastasiyaW, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/development/control-ui of AnastasiyaW/codex-claude-code-config.
Open the folder on GitHubat commit 67709af
Compare with similar skills
Control UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Control UI this skillAnastasiyaW/codex-claude-code-config | 154 | — | ~757 | Automated safety check: Pass | MIT | |
| Security Visual Testingproffesor-for-testing/agentic-qe | 495 | — | ~1.9k | Automated safety check: Pass | MIT | |
| Vrtmarigold-ui/marigold | 146 | — | ~787 | Automated safety check: Pass | MIT | |
| Control UIcursor/plugins | 11k | 2 repos | ~1.2k | Automated safety check: Pass | None | |
| UI Visual DebuggingNangoHQ/nango | 13k | — | ~1.3k | Automated safety check: Pass | Custom licence | |
| Browser QAaffaan-m/ECC | 276k | 2 repos | ~1k | Automated safety check: Pass | MIT |
Similar skills
Vrt
marigold-ui/marigold
DST — Trigger the Visual-Regression-Tests (Chromatic) GitHub Actions workflow on the current or a given branch.
- Official
Control UI
cursor/plugins
Build or adapt a local browser/CDP harness to drive and inspect a web, IDE, or Electron UI.
UI Visual Debugging
NangoHQ/nango
A skill your agent uses when modifying or visually debugging Nango frontend UI, including packages/webapp, packages/connect-ui, browser interactions, screenshots, and visual regressions.
Browser QA
affaan-m/ECC
Run automated post-deploy UI verification with a browser automation MCP (claude-in-chrome, Playwright, or Puppeteer): console-error and Core Web Vitals smoke checks, form and auth-flow interaction…
Design QA
plugin87/ux-ui-agent-skills
Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist.
More from AnastasiyaW/codex-claude-code-config
All 50 skills in this repoBug Reproducer
AnastasiyaW/codex-claude-code-config
Find likely software bugs in a codebase, rank concrete bug candidates, and prove or reject them with focused regression tests before proposing a fix.
Motion Framer
AnastasiyaW/codex-claude-code-config
A skill your agent uses when implementing Motion or Framer Motion in React/JavaScript: interactive UI components, micro-interactions, gestures, layout or page transitions, and scroll-based animation.
Proof Verify
AnastasiyaW/codex-claude-code-config
Plan-based verification - freeze acceptance criteria before building, then verify after with an independent fresh-context agent (the builder must not verify their own work).
Workflow Orchestration
AnastasiyaW/codex-claude-code-config
Написание и запуск Claude Code dynamic workflows (JS-оркестратор субагентов).
Notebooklm Grounded Research
AnastasiyaW/codex-claude-code-config
A skill your agent uses when: NotebookLM, notebooklm MCP, large documentation sets, courses, books, papers, or citation-backed research are mentioned.
Deepseek Provider Contract
AnastasiyaW/codex-claude-code-config
Validate a proposed DeepSeek API integration before any key or project context is sent: check thinking-mode tool-call history, strict-schema assumptions, bounded output, and provider data boundaries.
Related
Categories
Questions about Control UI
What does Control UI do?
Drive and inspect a local web, IDE, or Electron UI with browser or CDP automation and evidence. Control UI is an agent skill from AnastasiyaW/codex-claude-code-config. Drive and inspect a local web, IDE, or Electron UI with browser or CDP automation and evidence.
When should I use Control UI?
Control UI fits situations like: accessibility snapshots; backend-only changes; for a screenshot without a behavior claim.
How do I install Control UI in Claude Code?
Run `npx skills add AnastasiyaW/codex-claude-code-config --skill control-ui -a claude-code`. Or copy the skill folder (skills/development/control-ui in AnastasiyaW/codex-claude-code-config) into .claude/skills/control-ui in your project. Claude Code loads it when a task matches its description.
How do I install Control UI in Codex?
Run `npx skills add AnastasiyaW/codex-claude-code-config --skill control-ui -a codex`. Or copy the skill folder (skills/development/control-ui in AnastasiyaW/codex-claude-code-config) into .agents/skills/control-ui in your project. Codex loads it when a task matches its description.
Can I use Control UI in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AnastasiyaW/codex-claude-code-config --skill control-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/control-ui, .gemini/skills/control-ui, .github/skills/control-ui and .opencode/skills/control-ui in your project.
What does Control UI need to run?
SKILL.md names no scripts, command-line tools or credentials: Control UI is instructions for the agent only.
Does Control UI access the network?
SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.
Is Control UI safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Control UI use?
Control UI is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Control UI use?
About 757 tokens (SKILL.md is roughly 3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Control UI?
Skills that share tags, products or a category with Control UI: Security Visual Testing (proffesor-for-testing/agentic-qe, 495 stars), Vrt (marigold-ui/marigold, 146 stars), Control UI (cursor/plugins, 11k stars) and UI Visual Debugging (NangoHQ/nango, 13k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Control UI?
AnastasiyaW (a GitHub user) maintains it in AnastasiyaW/codex-claude-code-config, which has 154 GitHub stars. The repository holds 50 skills in this directory. The repository was last updated on October 9, 2026.
Source: AnastasiyaW/codex-claude-code-config on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.