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 agentmods add skills/sauravvarma/garage/visual-qanpx skills add sauravvarma/garage --skill visual-qagit clone --depth 1 https://github.com/sauravvarma/garageWrote 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/sauravvarma/garage/visual-qa)<a href="https://agentmods.dev/skills/sauravvarma/garage/visual-qa"><img src="https://agentmods.dev/badge/skills/sauravvarma/garage/visual-qa.svg" alt="Measured on agentmods" 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 | $0.00305 | $0.05077 |
| Opus 5 | $0.00152 | $0.02538 |
| Sonnet 5 | $0.00061 | $0.01015 |
| Haiku 4.5 | $0.00030 | $0.00508 |
Grade A, and why
visual-qa 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 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.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
- **Not running →** *do not silently spawn a long-running process.* Surface to the user: *"Dev server doesn't appear to be running at `[base URL]`. Want me to start it with `[discovered command]`, or will you start it ma How it starts
The opening of the file, as written. The whole thing — 319 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Visual QA
Automated visual verification loop for frontend projects. Takes screenshots of the running app at defined breakpoints, reads them (multimodal), and checks against the project's own spec — not hardcoded assumptions.
When to use
- After making layout or component changes
- User asks "does this look right", "check breakpoints", "visual QA"
- Before reporting a layout task as complete
- When you can't verify a visual QA checklist item from code alone
Spec preflight
Before capturing anything, verify what's available. Visual-qa is graceful — it can run with minimal context and still do useful work — but tell the user what's missing so they understand which checks will and won't fire.
Required:
- A way to run the app — discovered from
CLAUDE.md"Commands" section orpackage.jsonscripts (Phase 0a). If neither yields a dev/start command, ask the user. - Playwright — auto-installed in Phase 1 if missing.
Recommended (enables project-specific checks):
docs/DESIGN-TOKENS.md— without it, no token/color/typography checksdocs/DESIGN-LANGUAGE.md— without it, no semantic role checks (rest vs interaction, etc.)
Optional (enables design ↔ code comparison):
docs/DESIGN-TAXONOMY.mdwith rows markedFinalandSynced— without it, only spec-vs-code comparison runs; design-vs-code is skipped
If recommended docs are missing, tell the user: "Project-specific design checks won't run — only universal checks (no horizontal overflow, fonts loaded, touch target sizes, etc.). Run /spec-first-project-setup to scaffold the docs and fill them in, or proceed with universal-only checks."
Phase 0: Learn the Project
Before capturing anything, build a project profile by reading project configuration. This is what makes the skill work across any frontend project.
0a. Discover dev server
Read these sources in order (stop at first match):
CLAUDE.md— look for a "Commands" section withdev/start/runcommands. Treated as authoritative.README.md— look for a "Getting started" / "Development" / "Run locally" section that names the command. Confirm the extracted command with the user before treating it as authoritative (prose-derived; easier to mis-parse than CLAUDE.md).- Ask the user directly.
What ships with it
1 file 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.
- 5d ago First seen · 319 lines · 305 tokens per session scan A 0b518e7dcec5
visual-qa is a skill published in the GitHub repository sauravvarma/garage (3 stars, last pushed 1mo ago), licensed MIT. It adds 305 tokens to every session and 5,077 once invoked, about $0.0015 per session on Opus 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-08-31.
Other skills, from other repositories
testing-and-quality
Use throughout the build and before claiming any phase or the project "done", to run the four mandatory quality gates and verify them with evidence. Covers the test pyramid, Playwright + Chrome DevTools browser verification, WCAG AA, and the commit/finish gate wiring.
testing-strategy
Use when defining a project's test approach, when choosing what gets tested at unit vs integration vs e2e level, when setting per-component coverage targets, when reviewing test quality, or when CI is slow / flaky and tests need a strategy reset.
test-native-extension
Validate a third-party control repo across four automated layers plus one printed manual recipe. Layer 1 asserts native-source structure (Android getName() and iOS +moduleName to manifest nativeModule; @ReactMethod / RCTEXPORTMETHOD to methods; no @ReactModule) plus load/init readiness (ReactPackage public no-arg…
test-site
Tests a deployed, activated Power Pages site at runtime using browser-based navigation, page crawling, and API request verification via Playwright. Use when the user wants to test, verify, or smoke-test their deployed site.
qa
Browser-based QA verification. Launches a real browser, navigates the app, clicks buttons, fills forms, and tests user flows. Works as a standalone skill or as a phase end condition in campaigns. Requires Playwright (optional dependency, graceful skip if not installed).
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.