Verify visual

Skill jajupmochi/agent-harness/skills/general/verify-visual

Use chrome-devtools MCP to screenshot a target URL/element and visually verify it matches a reference. Auto-fires when the user requests a UI change with a visual reference (paired with the ui-iteration-loop rule).From its SKILL.md

Install

npx -y skills add jajupmochi/agent-harness --skill verify-visual

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.5 KB, 568 tokens by cl100k_base, as published. Nobody here has run it

/verify-visual

Visually verify a UI change against a reference using chrome-devtools MCP.

Pre-flight

Confirm chrome-devtools MCP plugin is installed and not deprecated (per plugin-preflight rule)
Confirm the dev server is running (use /preview first if not)

Steps

Acknowledge what you're verifying — re-state the change and the reference (1 line).
Navigate to the target page using chrome-devtools MCP (navigate / navigate_page).
Screenshot the relevant element (or full page) via take_screenshot / take_snapshot.
Self-critique against the reference on the 4 axes (per ui-iteration-loop rule):
- Color — palette, contrast, accent
- Typography — font, weight, size, line-height
- Spacing — padding, margin, gap, rhythm
- Ornamentation — borders, shadows, decorative elements
Show user the screenshot + 1-line verdict (match / off / specific axis to retry).

Output format

Verifying <change> against <reference> — 4 axes:
- Color: ✓ matches reference accent
- Typography: ✓ font + weight align
- Spacing: ⚠ slightly tighter than reference (~2 px less rhythm)
- Ornamentation: ✓ no shadow drift

Screenshot: <path-or-url>
Verdict: 80% match. Tighten rhythm next, or ship as-is?

When NOT to use

Micro-edits (single property tweak, copy fix) — skip per output-brevity companion rule
No reference provided — there's nothing to verify against
chrome-devtools MCP unavailable — ask the user how to proceed rather than fall back to blind edits

Lighthouse integration

When the visual concern includes performance / SEO / accessibility (not just look):

chrome-devtools MCP also exposes Lighthouse via lighthouse_audit (Chrome's built-in version)
No npm install of lighthouse needed for ad-hoc audits
For CI / scheduled audits, install @lhci/cli separately (see recommendations/web-auditing.md)

Companion rules

ui-iteration-loop — when running an autonomous 8-iteration loop, this skill is invoked at each iteration's "screenshot + critique" step
plugin-preflight — verify chrome-devtools MCP installed before first invocation in a session
tool-proactivity — fire this skill automatically when the task involves visual verification, with a one-line announcement

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Gives 0 of the 12 instructions most quality gates skills give in 568 tokens

Counted across 1,524 of the 2,830 authors here whose files we hold, read 2026-09-06

Read full output and check exit codein 45 of 1524, across 40 files
Verify output confirms the claimin 44 of 1524, across 39 files
Identify the command that proves the claimin 43 of 1524, across 39 files
Execute the full verification commandin 36 of 1524, across 30 files
Produce a verification reportin 34 of 1524, across 18 files
Review git diff changesin 30 of 1524, across 16 files
Fix build failures immediatelyin 29 of 1524, across 9 files
Group findings by severityin 28 of 1524
State claim only with evidencein 27 of 1524, across 22 files
Verify regression tests with red-green cyclein 26 of 1524, across 22 files
Run the full test suitein 26 of 1524, across 25 files
Run test suite with coveragein 25 of 1524, across 10 files

Said here and by no other author read

confirm chrome-devtools plugin is installed
restate the change and reference
take a screenshot of the element
critique color typography spacing and ornamentation
show the screenshot and verdict to user

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.