control-ui

control-ui is a skill for Claude Code, Codex from AnastasiyaW/codex-claude-code-config. It costs 73 tokens per session (643 once invoked), scanned A, original, MIT.

A procedure for checking a local website, development tool, or Electron desktop app through its actual browser or debugging interface.

In plain words
What is it for?
Testing clicks, typing, navigation, scrolling, resizing, focus, screenshots, accessibility trees, browser errors, network activity, and performance signals.
Why use it?
It verifies what users really see and do, so visual, keyboard, accessibility, console, network, and performance problems are not judged from source code alone.

Skill for Claude CodeCodex

Part of the claude-code-config plugin — 57 skills, 8 agents shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/anastasiyaw/codex-claude-code-config/control-ui
Any agent
npx skills add AnastasiyaW/codex-claude-code-config --skill control-ui
Clone the repo
git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config

Made for: Claude Code, Codex.

Or install claude-code-config, the plugin that ships this one along with the rest of its 57 skills, 8 agents.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for control-ui

README.md
[![agentmods](https://agentmods.dev/badge/skills/anastasiyaw/codex-claude-code-config/control-ui.svg)](https://agentmods.dev/skills/anastasiyaw/codex-claude-code-config/control-ui)
Your own site
<a href="https://agentmods.dev/skills/anastasiyaw/codex-claude-code-config/control-ui"><img src="https://agentmods.dev/badge/skills/anastasiyaw/codex-claude-code-config/control-ui.svg" alt="Measured on agentmods" height="20"></a>
Per session 73 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 643 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00073 $0.00643
Opus 5 $0.00036 $0.00321
Sonnet 5 $0.00015 $0.00129
Haiku 4.5 $0.00007 $0.00064

Measured 5d ago against content hash 6956e8831c77, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

control-ui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/development/control-ui/SKILL.md · 62 lines

How it starts

The opening of the file, as written. The whole thing — 62 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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.
  2. Discover existing browser tests and stable app markers.
  3. Select the target page by a positive root marker, role, label, or stable data-* attribute, not tab order or coordinates.
  4. Capture the initial DOM/accessibility snapshot, screenshot, console state, or network baseline relevant to the claim.
  5. Perform one structural action: click, type, keypress, drag, scroll, navigate, or resize.
  6. Capture the new state and assert the expected change.
  7. 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

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

Read the full file on GitHub · 62 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago First seen · 62 lines · 73 tokens per session scan A 6956e8831c77

Subscribe to this mod's changes

control-ui is a skill published in the GitHub repository AnastasiyaW/codex-claude-code-config (147 stars, last pushed today), licensed MIT. It adds 73 tokens to every session and 643 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

webapp-testing

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

chidekina/aria-superpowers · 35 tokens

e2e-testing

Playwright E2E testing patterns, Page Object Model, configuration, CI/CD integration, artifact management, and flaky test strategies. Use when writing Playwright tests, structuring page objects, or fixing flaky E2E runs in CI.

affaan-m/ECC · 53 tokens

dogfood

Exploratory QA of web apps: find bugs, evidence, reports.

NousResearch/hermes-agent · 18 tokens

playwright-pom-discovery

Use when building or extending a Page Object Model (POM) for the Opik E2E suite (under testsendtoend/e2e/pom/) and you need to choose stable selectors against the live UI. Walks through seeding required state, exploring the running page with the Playwright MCP (accessibility snapshot + data-testid enumeration)…

comet-ml/opik · 112 tokens

search-params

URL search param and hash state management. Use when adding or modifying URL search params, working with useSearchParams, setSearchParams, useSearchParamState, or navigate() with query strings or hash fragments, or fixing browser back/forward button issues.

promptfoo/promptfoo · 55 tokens

playwright-cli

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

VoltAgent/voltagent · 52 tokens