How do I install the Verify Visual skill?

Run npx skillmds@latest add jajupmochi/verify-visual-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Verify Visual safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Verify Visual?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Verify Visual free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Verify Visual?

jajupmochi (@jajupmochi) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Verify Visual by jajupmochi — Agent Skill

Name: Verify Visual
Author: jajupmochi

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).

jajupmochi 020919a 2.5 KB Updated Sep 17, 2026

File contents

/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

---name: verify-visual-2description: 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).---# /verify-visualVisually 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)## Steps1. **Acknowledge** what you're verifying — re-state the change and the reference (1 line).2. **Navigate** to the target page using `chrome-devtools` MCP (`navigate` / `navigate_page`).3. **Screenshot** the relevant element (or full page) via `take_screenshot` / `take_snapshot`.4. **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 elements5. **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 driftScreenshot: <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 integrationWhen 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

Frequently asked questions