How do I install the Verify Visual skill?

Run npx skillmds@latest add jajupmochi/verify-visual-3 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

File contents

/verify-visual

Visually verify a UI change against the design intent or a reference.

Pre-flight

Confirm chrome-devtools MCP plugin is installed (per plugin-preflight rule)
Confirm dev server is running (use /preview first if not — site needs HTTP, not file://)

Steps

Acknowledge what you're verifying — re-state the change and the reference (1 line).
Navigate to http://localhost:8000/<page>.html via chrome-devtools navigate.
Screenshot the relevant element (or full page) via take_screenshot.
Self-critique 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, decorations
Show user the screenshot + 1-line verdict (match / off / specific axis).

Output format

Verifying <change> against <reference> — 4 axes:
- Color: ✓
- Typography: ✓
- Spacing: ⚠ tighter than reference
- Ornamentation: ✓

Screenshot: <path>
Verdict: 80% match. Tighten rhythm next?

When NOT to use

Micro-edits (single property tweak, copy fix) — skip per output-brevity rule
Themes other than default need separate verification — verify each theme that's affected

Round-file context

When iterating via index_v{N}_round{M}.html files (per the iterative workflow):

Always serve the round file: http://localhost:8000/index_v{N}_round{M}.html
Compare against the previous round file or against index.html (current deployed)
Don't promote round3 to index.html until visual verification on round3 passes

Lighthouse integration

For performance / SEO / a11y audits beyond visual, use chrome-devtools MCP's lighthouse_audit (Chrome's built-in Lighthouse — zero install). For headless / CI runs, see agent-harness/recommendations/web-auditing.md.

Companion rules

ui-iteration-loop — when user provides a visual reference, run the autonomous 8-iteration loop
plugin-preflight — verify chrome-devtools MCP installed before first invocation
tool-proactivity — fire automatically on UI-affecting tasks (with announcement)

---name: verify-visual-3description: Use chrome-devtools MCP to screenshot the local site (or a specific element) and visually verify it matches the design intent. Required after every UI-affecting change before marking work done.---# /verify-visualVisually verify a UI change against the design intent or a reference.## Pre-flight- Confirm `chrome-devtools` MCP plugin is installed (per `plugin-preflight` rule)- Confirm dev server is running (use `/preview` first if not — site needs HTTP, not `file://`)## Steps1. **Acknowledge** what you're verifying — re-state the change and the reference (1 line).2. **Navigate** to `http://localhost:8000/<page>.html` via chrome-devtools `navigate`.3. **Screenshot** the relevant element (or full page) via `take_screenshot`.4. **Self-critique** 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, decorations5. **Show user** the screenshot + 1-line verdict (match / off / specific axis).## Output format```Verifying <change> against <reference> — 4 axes:- Color: ✓- Typography: ✓- Spacing: ⚠ tighter than reference- Ornamentation: ✓Screenshot: <path>Verdict: 80% match. Tighten rhythm next?```## When NOT to use- Micro-edits (single property tweak, copy fix) — skip per `output-brevity` rule- Themes other than default need separate verification — verify each theme that's affected## Round-file contextWhen iterating via `index_v{N}_round{M}.html` files (per the iterative workflow):- Always serve the round file: `http://localhost:8000/index_v{N}_round{M}.html`- Compare against the previous round file or against `index.html` (current deployed)- Don't promote `round3` to `index.html` until visual verification on round3 passes## Lighthouse integrationFor performance / SEO / a11y audits beyond visual, use chrome-devtools MCP's `lighthouse_audit` (Chrome's built-in Lighthouse — zero install). For headless / CI runs, see `agent-harness/recommendations/web-auditing.md`.## Companion rules- `ui-iteration-loop` — when user provides a visual reference, run the autonomous 8-iteration loop- `plugin-preflight` — verify chrome-devtools MCP installed before first invocation- `tool-proactivity` — fire automatically on UI-affecting tasks (with announcement)

Frequently asked questions

Verify Visual