How do I install the Verify Visual skill?

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

Visual verification for UI changes using Playwright screenshots and native model vision (GPT-5.5, Claude). For models without vision (DeepSeek), uses Playwright screenshot capture with pixel comparison for regression detection. BackstopJS available as optional regression tool.

jajupmochi cc50915 2.2 KB Updated Sep 17, 2026

File contents

verify-visual

Detection: vision capability

Model	Vision	Backend
GPT-5, GPT-5.5	✅ native	Model-based screenshot analysis
Claude Opus 4+	✅ native	Model-based + chrome-devtools MCP
DeepSeek V3, DeepSeek R1	❌ none	Playwright screenshot capture + pixel comparison

Backend 1: Native model vision (GPT-5.5, Claude)

When the model has vision capability, screenshots are captured and analyzed directly by the model. No external API needed.

Backend 2: Playwright screenshots (always available)

The scripts/codex_visual_verify.sh script captures screenshots at specified viewports using Playwright or headless Chrome. Works with ANY model.

VISUAL_VERIFY_URL=https://localhost:3000 bash scripts/codex_visual_verify.sh

Output goes to .visual-verify/YYYY-MM-DD_HHMMSS/ with a results.json.

Backend 3: BackstopJS (pixel-level regression)

BackstopJS compares screenshots pixel-by-pixel against reference images. No model needed. Good for CI regression testing.

npx backstopjs init
# Configure backstop.json then:
npx backstopjs test

Workflow

graph TD
    START["/verify-visual &lt;url&gt;"] --> DETECT{"Model has<br/>vision?"}
    DETECT -->|"✅ GPT-5.5, Claude"| VISION["Native model vision<br/>analyze screenshots directly"]
    DETECT -->|"❌ DeepSeek"| SCREENSHOT["Playwright screenshot capture<br/>multiple viewports"]
    SCREENSHOT --> CHOOSE{"Need regression?"}
    CHOOSE -->|"Yes"| BACKSTOP["BackstopJS pixel comparison<br/>against reference images"]
    CHOOSE -->|"No"| REPORT["Return screenshot paths<br/>for manual review"]
    VISION --> REPORT2["Report visual issues<br/>layout, contrast, readability"]
    BACKSTOP --> REPORT2

Configuration

Optional ~/.config/agent-harness/visual-verify.json:

{
  "viewports": ["1280x720", "375x812", "1920x1080"],
  "reference_dir": "./.visual-verify/reference"
}

---name: verify-visualdescription: Visual verification for UI changes using Playwright screenshots and native model vision (GPT-5.5, Claude). For models without vision (DeepSeek), uses Playwright screenshot capture with pixel comparison for regression detection. BackstopJS available as optional regression tool.---# verify-visual## Detection: vision capability| Model | Vision | Backend ||---|---|---|| GPT-5, GPT-5.5 | ✅ native | Model-based screenshot analysis || Claude Opus 4+ | ✅ native | Model-based + chrome-devtools MCP || DeepSeek V3, DeepSeek R1 | ❌ none | Playwright screenshot capture + pixel comparison |## Backend 1: Native model vision (GPT-5.5, Claude)When the model has vision capability, screenshots are captured and analyzeddirectly by the model. No external API needed.## Backend 2: Playwright screenshots (always available)The `scripts/codex_visual_verify.sh` script captures screenshots atspecified viewports using Playwright or headless Chrome. Works with ANY model.```bashVISUAL_VERIFY_URL=https://localhost:3000 bash scripts/codex_visual_verify.sh```Output goes to `.visual-verify/YYYY-MM-DD_HHMMSS/` with a `results.json`.## Backend 3: BackstopJS (pixel-level regression)BackstopJS compares screenshots pixel-by-pixel against reference images.No model needed. Good for CI regression testing.```bashnpx backstopjs init# Configure backstop.json then:npx backstopjs test```## Workflow```mermaidgraph TD START["/verify-visual <url>"] --> DETECT{"Model has vision?"} DETECT -->|"✅ GPT-5.5, Claude"| VISION["Native model vision analyze screenshots directly"] DETECT -->|"❌ DeepSeek"| SCREENSHOT["Playwright screenshot capture multiple viewports"] SCREENSHOT --> CHOOSE{"Need regression?"} CHOOSE -->|"Yes"| BACKSTOP["BackstopJS pixel comparison against reference images"] CHOOSE -->|"No"| REPORT["Return screenshot paths for manual review"] VISION --> REPORT2["Report visual issues layout, contrast, readability"] BACKSTOP --> REPORT2```## ConfigurationOptional `~/.config/agent-harness/visual-verify.json`:```json{ "viewports": ["1280x720", "375x812", "1920x1080"], "reference_dir": "./.visual-verify/reference"}```

Frequently asked questions