Getting it into your agent
This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.
/plugin marketplace add ZachArticulateV/designer-pro-and-seo/plugin install designer-pro-and-seoWrote 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/zacharticulatev/designer-pro-and-seo/design-visual-qa)<a href="https://agentmods.dev/skills/zacharticulatev/designer-pro-and-seo/design-visual-qa"><img src="https://agentmods.dev/badge/skills/zacharticulatev/designer-pro-and-seo/design-visual-qa/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/zacharticulatev/designer-pro-and-seo/design-visual-qa"><img src="https://agentmods.dev/badge/skills/zacharticulatev/designer-pro-and-seo/design-visual-qa.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.00124 | $0.01471 |
| Opus 5 | $0.00062 | $0.00736 |
| Sonnet 5 | $0.00025 | $0.00294 |
| Haiku 4.5 | $0.00012 | $0.00147 |
Grade A, and why
design-visual-qa 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 12d 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 — 100 lines — stays where its author put it; the contents beside it link to each section on GitHub.
design-visual-qa
Family: design Status: Stable
Purpose
Visual regression for the rendered surface — the visual analog of seo-drift.
Captures snapshots at multiple viewports and compares them against prior baselines
to catch unintended rendering changes. It is tool-aware: rendering uses the
bundled, free Playwright extension; comparison uses Claude's vision by default (and
an exact pixel-diff CLI for precise deltas when one is installed). Without a browser
it can't capture pixels — so it delivers a structured manual visual-QA checklist and
the single step to enable the free renderer, rather than failing.
Use cases: pre/post refactor, pre/post deploy (staging vs prod), component/token updates, and cross-browser drift.
Triggers
- "visual qa" / "visual regression"
- "screenshot diff" / "pixel diff"
- "did anything change visually"
- "compare against baseline"
- "before and after screenshots"
Inputs
- Target URL(s) or local build paths
- Viewports (default: 375, 768, 1280, 1920)
- Browser(s) (default: chromium; optional firefox, webkit)
- Baseline mode: capture | diff | both
- Threshold for "changed" (pixel-diff % when an exact differ is present; otherwise a qualitative materiality call)
Steps
- Detect the renderer. Confirm the Playwright MCP is connected, then run
the capability probe to see if an exact differ (
odiff/pixelmatchvianpx) is available:python3 "${CLAUDE_PLUGIN_ROOT}/scripts/workflow/capability_probe.py" # use `py` on Windows if python3 is absent; in PowerShell the variable is $env:CLAUDE_PLUGIN_ROOT - Capture. For each (URL, viewport, browser): load, wait for network idle + fonts + animations settled, then full-page screenshot.
- Baseline vs diff.
capture: save baselines tovisual-qa/baselines/in the user's workspace.diff: compare each shot to its baseline. Exact differ present → pixel-delta %- highlighted diff image. Otherwise → Claude-vision comparison reporting the specific regions/elements that changed and whether each looks intentional.
- Aggregate which pages/viewports drifted and by how much (or how materially).
Grade each change against the four axes (hierarchy, rhythm, contrast, restraint)
and the severity ladder in
references/design-visual-qa/visual-qa-rubric.md— a large delta can be a deliberate improvement, while a tiny delta that drops text below AA or hides a focus ring is a critical regression. - Report which tier ran (per the plugin's capability-tier cascade,
references/CAPABILITY-TIERS.md: Tier 1/2 = Playwright render + exact-differ-or- Claude-vision compare; Tier 4 = no browser, guided checklist) and, if no browser was available, the one step to enable it (connect the bundled Playwright extension).
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.
- 12d ago First seen · 100 lines · 124 tokens per session scan A e0c0acfda187
design-visual-qa is a skill published in the GitHub repository ZachArticulateV/designer-pro-and-seo (8 stars, last pushed 2mo ago), licensed MIT. It adds 124 tokens to every session and 1,471 once invoked, about $0.0006 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-31.
Other skills, from other repositories
accessibility-per-component
Run an accessibility audit on a specific design system component. Trigger when someone says: accessibility check, a11y audit, WCAG compliance, is this accessible, check accessibility, does this meet WCAG, screen reader support, keyboard navigation check, or anything about auditing the accessibility of a specific…
cicd-integration
Generate CI/CD pipeline configurations that automate design system quality checks — token validation, component linting, visual regression, accessibility scanning, and release gating. Produces ready-to-use pipeline files for GitHub Actions, GitLab CI, CircleCI, or Bitbucket Pipelines, configured to enforce the…
schema-validator
Validate token files against DTCG 2025.10, Style Dictionary, or custom schemas. Trigger when someone says: validate token JSON, check my token files for errors, schema validation for tokens, are my token files valid, DTCG compliance check, validate token format, or anything about checking whether token files are…
visual-qa
Automated visual QA for a running frontend — screenshots the real rendered UI at the project's breakpoints and checks it against the project's own spec (tokens, layout rules, design language) AND its sibling screens, not hardcoded assumptions. Standalone on any frontend project; learns the project profile from docs/…
writing-skills
Use when creating a new forge-skill, editing an existing skill, when planning to contribute to forge-skills, when a session has produced a one-off prompt that should be promoted to a skill, or when verifying a skill works before deployment.
incremental-implementation
Use when .forge/tasks.yaml exists and implementation is starting, when executing a planned task list one task at a time, when a feature must ship in independently-verifiable slices, or when contracts in .forge/contracts/ need to be implemented against acceptance criteria.