visual-verification

Capture Playwright screenshots at three breakpoints and verify UI output with layout checks and LLM vision comparison.

1|Updated Mar 1, 2026
One-click install
npx skills add https://github.com/hjemmesidekongen/ai --skill visual-verification-hjemmesidekongen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-verification
Source: https://github.com/hjemmesidekongen/ai/tree/main/plugins/smedjen/skills/visual-verification
Command: npx skills add https://github.com/hjemmesidekongen/ai --skill visual-verification-hjemmesidekongen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that user interface changes align with the intended design by automatically capturing screenshots and comparing them against design specifications or previous versions.

Core Features & Use Cases

  • Automated Screenshot Capture: Takes screenshots at multiple breakpoints (mobile, tablet, desktop).
  • Multi-Tier Verification: Employs automated layout checks, LLM vision comparison, and human escalation for thorough validation.
  • Use Case: After updating a website's navigation bar, this Skill can automatically verify that the new design looks correct on all screen sizes and matches the approved mockups, flagging any discrepancies.

Quick Start

Run a visual verification of the latest UI changes.

Frequently Asked Questions about visual-verification

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify UI changes against design intent using Playwright screenshots?

You can verify UI changes by capturing Playwright screenshots at mobile, tablet, and desktop breakpoints, then comparing them against design intent using automated layout checks and LLM vision comparison to flag discrepancies.

What is LLM vision comparison for visual verification?

LLM vision comparison for visual verification uses large language models to analyze captured screenshots and evaluate whether the UI output matches the approved design specifications across responsive breakpoints.

How do I check responsive design consistency across multiple breakpoints?

To check responsive design consistency, capture screenshots at three distinct breakpoints and run automated layout checks to ensure UI elements render correctly and align with design intent on mobile, tablet, and desktop screens.

Can I use automated layout checks to find UI discrepancies?

Yes, automated layout checks identify UI discrepancies by evaluating captured screenshots against design specifications, automatically flagging low-confidence results for human escalation to ensure visual consistency.

What is the best way to handle low-confidence results in visual verification?

The best way to handle low-confidence visual verification results is through human escalation, where uncertain discrepancies between screenshots and design intent are reviewed manually to ensure accurate UI consistency.