agentmods.dev

visual-validate

A real-browser check for user-interface changes that takes screenshots, tests interactions, and records browser console errors.

In plain words
What is it for?
Use it after changing a web interface to compare before-and-after screenshots, exercise controls, and inspect errors. It requires a running development server and a supported browser connection.
Why use it?
It confirms that a UI works when opened and used in a browser, not only that the code passes automated checks.

Skill for Claude CodeCodex

Part of the hb plugin — 40 skills, 6 agents shipped together

13 12d ago A scan 96 tokens original MIT
View the source file helderberto/agent-skills
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/helderberto/agent-skills/visual-validate
Any agent
npx skills add helderberto/agent-skills --skill visual-validate
Clone the repo
git clone --depth 1 https://github.com/helderberto/agent-skills

Made for: Claude Code, Codex.

Or install hb, the plugin that ships this one along with the rest of its 40 skills, 6 agents.

Per session 96 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 942 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.00096 $0.00942
Opus 5 $0.00048 $0.00471
Sonnet 5 $0.00019 $0.00188
Haiku 4.5 $0.00010 $0.00094

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

Security

Grade A, and why

visual-validate 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 3d 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/visual-validate/SKILL.md · 95 lines

How it starts

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

Visual Validate

Drive a real browser via MCP to verify a UI change works as intended. Auto-detects which browser MCP is available (chrome-devtools preferred, playwright fallback). Screenshots, interactions, and console capture confirm the change is real — not just type-checked.

MCP Auto-Detection

Prefer chrome-devtools MCP tools (mcp__chrome-devtools__*); fall back to playwright (mcp__playwright__*) if absent. If neither is available, STOP and tell the user to install one. State the detected MCP at the start: "Using chrome-devtools MCP for visual validation."

Workflow

Phase 1 — Setup

  1. Confirm the dev server URL with the user (default to http://localhost:3000 if a Next.js/Vite project is detected; otherwise ask).
  2. If the dev server is not running, ask the user to start it. Do NOT start it automatically — port collisions are easy and dev servers are user state.
  3. Open the page via the detected MCP:
    • chrome-devtools: new_page → navigate_page
    • playwright: equivalent navigate tool

Phase 2 — Capture baseline (before)

  1. Take a "before" screenshot of the relevant page/component. Save reference to it.
  2. Capture the initial console state.
  3. If the user provides a specific element or component to focus on, take an element-scoped screenshot via DOM snapshot.

Phase 3 — Exercise the change

  1. Ask the user what interactions to validate (e.g., "click the toggle", "submit form with X data", "resize to mobile width").
  2. Execute interactions via MCP:
    • chrome-devtools: click, fill, hover, press_key, resize_page
    • playwright: equivalent tools
  3. Wait for any animations / network requests to settle (wait_for or equivalent).

Phase 4 — Capture after

  1. Take "after" screenshot(s).
  2. Capture console messages and any new network errors via list_console_messages and list_network_requests.
  3. Run accessibility audit on the final state via lighthouse_audit (chrome-devtools) if available.

Phase 5 — Report

Read the full file on GitHub · 95 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. 3d ago First seen · 95 lines · 96 tokens per session scan A 5aec78a72cbf

Subscribe to this mod's changes

visual-validate is a skill published in the GitHub repository helderberto/agent-skills (13 stars, last pushed 12d ago), licensed MIT. It adds 96 tokens to every session and 942 once invoked, about $0.0005 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.

Browser automationE2E testingTestingagent-skillsaiantigravityclaude-codecursorskills
Related

Other skills, from other repositories

browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be…

addyosmani/agent-skills · 68 tokens

browser-testing-with-devtools

在真实浏览器中测试。构建或调试任何在浏览器中运行的内容时使用。当你需要通过 Chrome DevTools MCP 检查 DOM、捕获 console 错误、分析网络请求、分析性能，或用真实运行时数据验证视觉输出时使用。.

vinvcn/addyosmani-agent-skills-zh · 67 tokens

browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be…

borhen68/SkillEngine · 68 tokens

azure-microsoft-playwright-testing-ts

Run Playwright tests at scale with cloud-hosted browsers and integrated Azure portal reporting.

tmolavi/mcp-agent-skills-hub · 25 tokens

awt-e2e-testing

AI-powered E2E web testing — eyes and hands for AI coding tools. Declarative YAML scenarios, Playwright execution, visual matching (OpenCV + OCR), platform auto-detection (Flutter/React/Vue), learning DB. Install: npx skills add ksgisang/awt-skill --skill awt -g.

tmolavi/mcp-agent-skills-hub · 74 tokens

test-e2e-playwright

Activate when creating, generating, or debugging Playwright end-to-end (E2E) browser automation tests for web applications — trigger phrasings include "write a Playwright test for this user flow", "create an E2E login test", "debug failed Playwright test", "setup automated browser testing", "test form submission with…

ieeecsopen/mcp-cs · 112 tokens