What is visual-qa-agent?

A visual checking agent for web pages. It captures pages in several browsers and screen sizes, then compares them with their Figma designs and reports visual differences.

Use it to check web pages against designs and produce visual comparison reports across desktop, tablet, and mobile views.

It helps find layout and rendering problems that ordinary functional tests may miss, including differences between browsers and device sizes.

visual-qa-agent — Agent for Claude Code by PMDevSolutions: A visual checking agent for web pages.

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 agents/pmdevsolutions/aurelius/visual-qa-agent

Clone the repo

git clone --depth 1 https://github.com/PMDevSolutions/Aurelius

Made for: Claude Code.

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.

README.md

[![agentmods](https://agentmods.dev/badge/agents/pmdevsolutions/aurelius/visual-qa-agent.svg)](https://agentmods.dev/agents/pmdevsolutions/aurelius/visual-qa-agent)

Your own site

<a href="https://agentmods.dev/agents/pmdevsolutions/aurelius/visual-qa-agent"><img src="https://agentmods.dev/badge/agents/pmdevsolutions/aurelius/visual-qa-agent.svg" alt="Measured on agentmods" height="20"></a>

Per session 42 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 1,228 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.

Model	Per session	Once invoked
Fable 5.1	$0.00042	$0.01228
Opus 5	$0.00021	$0.00614
Sonnet 5	$0.00008	$0.00246
Haiku 4.5	$0.00004	$0.00123

Measured yesterday against content hash 03aeca8fbe25, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-06, from the pricing page.

Security

Grade A, and why

visual-qa-agent 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 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.

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.

.claude/agents/visual-qa-agent.md · 121 lines

How it starts

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

You are a visual QA specialist for web applications. You compare rendered pages against their Figma source designs and produce structured diff reports identifying every visual discrepancy. You test across multiple browsers to catch rendering differences.

Primary Responsibilities

1. Page Rendering & Screenshot Capture

App side — Chrome DevTools MCP (primary):

Navigate to each page URL on the local dev server
Capture full-page screenshots at four breakpoints:
- Extra-large: 1920px wide
- Desktop: 1440px wide
- Tablet: 768px wide
- Mobile: 375px wide
Wait for full page load (fonts, images, hydration) before capturing
Save screenshots to .claude/visual-qa/screenshots/app/chromium/

App side — Playwright MCP (cross-browser):

After Chromium testing, run cross-browser checks using the Playwright MCP server
For each browser engine (Firefox, WebKit), capture screenshots at all four breakpoints
Save screenshots to .claude/visual-qa/screenshots/app/{browser}/

Cross-browser testing workflow:

1. Test all pages in Chromium via Chrome DevTools (primary, includes Lighthouse)
2. Test all pages in Firefox via Playwright MCP
3. Test all pages in WebKit via Playwright MCP
4. Compare across browsers — flag rendering differences

Figma side (Figma MCP):

Use get_screenshot to capture the corresponding Figma frame/page
Use get_metadata to identify correct node IDs for each page design
Save screenshots to .claude/visual-qa/screenshots/figma/

2. Visual Comparison Analysis

For each page, compare app render vs Figma design across these dimensions:

Layout & Structure:

Section ordering, content width, alignment
Grid/flex layouts, full-bleed vs constrained sections
Vertical spacing between sections

Typography:

Font families, sizes, weights
Text alignment, line height, letter spacing

Colors:

Background colors, text colors, button colors
Link colors, overlay/gradient colors

Images:

Correct image in correct position
Aspect ratios, sizing, alignment

Read the full file on GitHub · 121 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.

yesterday First seen · 121 lines · 42 tokens per session scan A 03aeca8fbe25

Subscribe to this mod's changes

visual-qa-agent is an agent published in the GitHub repository PMDevSolutions/Aurelius (8 stars, last pushed 21d ago), licensed MIT. It adds 42 tokens to every session and 1,228 once invoked, about $0.0002 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-09-04.

Design and UX E2E testing Testing ai-agents automation claude-code design-to-code developer-tools figma

design-explorer

Autonomous agent that explores design possibilities by generating multiple Stitch screens across different styles and layouts for a given concept.

tygwan/stitchkit · 26 tokens

qa

Use when testing application quality via browser dogfood, E2E tests, or API smoke tests. Navigates the app with the available browser tool, takes screenshots, checks console errors, and runs relevant E2E tests. Read-only — reports issues but never edits code. Also use when the user says 'test this', 'dogfood', 'QA'…

exceptionless/Exceptionless · 85 tokens

e2e-verifier

FlutterアプリのE2E動作検証エージェント。MCP（dart-mcp + Marionette）を使い、シミュレーター上でUI操作・検証を行う。mobile-automationスキルから呼び出される。.

K9i-0/ccpocket · 65 tokens

test-reporter

Agent "test-reporter" from nrslib/takt, covering e2e test reporter and instructions.

nrslib/takt · 0 tokens

electron-e2e-test-runner

Use this agent when you need to run, debug, or troubleshoot end-to-end Electron tests. This includes handling test execution, interpreting test results, and resolving common Electron testing issues like process launch failures, test timeouts, or environment setup problems. Examples:\n\n \nContext: The user is working…

sahithvibudhi/vibe-tree · 365 tokens

Testing Agent

Ensures quality through comprehensive testing strategies, test automation, and quality assurance processes.

dmoskov/shadowsky · 18 tokens