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.
npx skills add alphaelements/handoff-mcp --skill gui-vrtgit clone --depth 1 https://github.com/alphaelements/handoff-mcpWrote 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.
[](https://agentmods.dev/skills/alphaelements/handoff-mcp/gui-vrt)<a href="https://agentmods.dev/skills/alphaelements/handoff-mcp/gui-vrt"><img src="https://agentmods.dev/badge/skills/alphaelements/handoff-mcp/gui-vrt/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/alphaelements/handoff-mcp/gui-vrt"><img src="https://agentmods.dev/badge/skills/alphaelements/handoff-mcp/gui-vrt.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00183 | $0.03964 |
| Opus 5.5 | $0.00073 | $0.01586 |
| Sonnet 5.5 | $0.00037 | $0.00793 |
| Haiku 4.5 | $0.00018 | $0.00396 |
Grade A, and why
gui-vrt scanned grade A with 1 finding 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 yesterday.
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.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
(`curl -s -o /dev/null -w "%{http_code}" <url>` is 200 or 302). Anything How it starts
The opening of the file, as written. The whole thing — 284 lines — stays where its author put it; the contents beside it link to each section on GitHub.
gui-vrt — GUI Visual Regression Pipeline
Turns an HTML mock into a golden screenshot, then checks the implemented GUI against that golden and writes the verdict into the trace graph. Specification: REQ-GUI-001..006 (requirements) and SPEC-GUI-001..005 (basic specification).
| need | read |
|---|---|
Installing Playwright / pixelmatch / code-server, CI with xvfb, [gui] config |
references/setup-guide.md |
| The pixel comparison helper (copy into the project) | references/vrt-compare.mjs |
ai-compare verdict agent |
gui-visual-verifier agent (plugin-task-loop/agents/gui-visual-verifier.md) |
Recording tools (trace_record, trace_test_run) |
the handoff-trace skill, references/tools.md |
| Starting and driving code-server for the real UI | the code-server-gui skill (if installed) |
1. Pipeline
Phase 1 mock requirement item carries `- mock: <path>` (authoring)
Phase 2 capture-golden Playwright MCP screenshots the mock
-> user approves -> stored as golden (this skill)
Phase 3 verify code-server + Playwright MCP screenshots the
real UI -> pixelmatch vs golden
-> trace_record pass/fail + diff evidence (this skill)
compare two PNGs in, diff image + similarity_pct out
ai-compare two PNGs in, LLM visual verdict out (no golden store needed)
Choose the mode by what you have:
| situation | mode |
|---|---|
| Mock exists, no golden yet, design is approved | capture-golden |
| Golden exists, implementation changed | verify (pixel) |
| Two arbitrary screenshots, you only want numbers | compare |
| Mock vs implementation, fonts/rendering differ so pixel diff is too strict, or no golden | ai-compare |
Ask the user which mode if the request does not say. Default for "check the GUI
against the mock" is verify when goldens exist, otherwise ai-compare.
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- yesterday First seen · 284 lines · 183 tokens per session scan A 74a9f82a7128
gui-vrt is a skill published in the GitHub repository alphaelements/handoff-mcp (0 stars, last pushed 2d ago), licensed MIT. It adds 183 tokens to every session and 3,964 once invoked, about $0.0007 per session on Opus 5.5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-20.
Other skills, from other repositories
a11y-ally
Use when running comprehensive WCAG accessibility audits with axe-core + pa11y + Lighthouse, generating context-aware remediation, or testing video accessibility. Supports 3-tier browser cascade with graceful degradation.
accessibility-testing
WCAG 2.2 compliance testing, screen reader validation, and inclusive design verification. Use when ensuring legal compliance (ADA, Section 508), testing for disabilities, or building accessible applications for 1 billion disabled users globally.
image-compare
Compare two image files on disk and report what changed, region by region. Trigger on "what changed between these two images", "diff these PNGs", "did this render drift", "compare screenshots/exports/renders".
frontend-manual-testing
Use when the task changes anything a user sees in a web app - booting it, driving flows with the browser tools, the four-width check, console/network/keyboard checks and the visual checklist.
playwright-scanner
Internal helper: behavioral scans via Playwright for keyboard and state.
visual-proof
Capture before/after screenshot evidence of a web page at real breakpoints (375, 768, 1440) in both light and dark themes, using Playwright against a local dev server or a deployed URL. Use before starting any visual change to capture the current state, and again after to prove the delta. Also use when asked to "show…