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 roedyrustam/vibes-plug --skill visual-qa-vision-agentgit clone --depth 1 https://github.com/roedyrustam/vibes-plugWrote 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/roedyrustam/vibes-plug/visual-qa-vision-agent)<a href="https://agentmods.dev/skills/roedyrustam/vibes-plug/visual-qa-vision-agent"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/visual-qa-vision-agent.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
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.00044 | $0.00948 |
| Opus 5 | $0.00022 | $0.00474 |
| Sonnet 5 | $0.00009 | $0.00190 |
| Haiku 4.5 | $0.00004 | $0.00095 |
Grade A, and why
visual-qa-vision-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 4d 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.
How it starts
The opening of the file, as written. The whole thing — 72 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Visual QA & Vision Agent
English
Orchestration & Integration
Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.
Description
This skill transforms the agent from a blind code generator into a visual designer. Instead of hoping the CSS looks correct, the agent is instructed to write a script that takes a screenshot of the newly created component, analyzes the screenshot using its own Vision AI capabilities, and iteratively tweaks the CSS until it matches the design intent perfectly.
Trigger Conditions
Activate this skill when the user says:
- "Fix the CSS, the button is misaligned."
- "Make it look exactly like this mockup."
- "Ensure the UI is responsive on mobile screens."
Core Concepts
1. The Visual QA Loop
- Code: The agent writes the HTML/CSS/React component.
- Serve: The agent starts a local dev server in the background.
- Capture: The agent runs a quick Playwright/Puppeteer script to take screenshots at various viewports (Mobile, Tablet, Desktop).
- Analyze: The agent receives the screenshot (via the
view_filetool on the image) and analyzes the visual hierarchy, contrast, and alignment. - Correct: The agent fixes margin, padding, or flexbox issues based on what it saw, not just what the code says.
2. Agent Constraints (Mandatory Visual Verification)
- NO BLIND CSS GUESSING: You are strictly prohibited from finalizing a frontend component without verifying it visually first. You MUST use a
browser_subagentto capture a screenshot of your work. - Pixel-Perfect Validation: Compare the screenshot against the initial design spec or generic UI/UX best practices. Iterate on the CSS until the visual output is flawless.
- Always check contrast ratios visually if design tokens are overridden.
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.
- 4d ago First seen · 72 lines · 44 tokens per session scan A a286f169ddcc
visual-qa-vision-agent is a skill published in the GitHub repository roedyrustam/vibes-plug (49 stars, last pushed today), licensed MIT. It adds 44 tokens to every session and 948 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-03.
Other skills, from other repositories
visual-qa
Use when verifying that a UI renders correctly. Covers visual regression testing, responsive checks across breakpoints, cross-browser verification, and screenshot-based review of an implementation against a design.
responsive-audit
Responsive audit: test pages at 375/768/1024px breakpoints via Playwright. Checks overflow, tap targets, sidebar collapse, text reflow, WCAG 1.4.4 zoom.
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…
frontend-ui-engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.
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…
smoke-test
Launch the app and hands-on verify that it works by interacting with it. Falls back to an existing integration test suite when there is no interactive surface in scope. Use when the user asks to "smoke test", "test it manually", "verify it works", "try it out", "run a smoke test", "check it in the browser", or "does…