visual-inspection

Capture rendered UI states with screenshots and DOM snapshots into severity-classified markdown reports.

2|Updated Apr 8, 2026

Search Tags:#accessibility #evidence #playwright #responsive #ui-testing #screenshot #visual-inspection

Ready to run

npx skills add https://github.com/krzemienski/validationforge --skill visual-inspection-krzemienski

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-inspection
Source: https://github.com/krzemienski/validationforge/tree/main/skill-audit-workspace/visual-inspection/skill-snapshot
Command: npx skills add https://github.com/krzemienski/validationforge --skill visual-inspection-krzemienski

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Visual inspection closes the gap between developer assumptions and what users actually see by capturing rendered UI state, documenting visual defects, and producing evidence-backed PASS/FAIL verdicts so teams never ship unverified front-end work.

Core Features & Use Cases

Multi-breakpoint screenshots: Capture full-page and viewport screenshots at mobile, tablet, and desktop breakpoints to verify responsive layouts.
Mode & edge-case validation: Verify dark/light modes, loading/empty/error states, and long-content edge cases with targeted evidence.
Structured findings & report: Produce a severity-classified report with reproducible filenames and DOM snapshots that integrates with ValidationForge verdict writers and e2e journeys.
Platform scope: Use for web Playwright/Chrome DevTools captures and iOS simulator screenshots plus accessibility tree exports for precise documentation.

Quick Start

Run a visual inspection across mobile, tablet, and desktop and save a severity-classified report to e2e-evidence/visual-inspection/report.md.

Frequently Asked Questions about visual-inspection

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

FAQPage Schema

How do I capture UI screenshots across responsive breakpoints using Playwright?▼

Multi-breakpoint screenshots capture full-page and viewport images at mobile, tablet, and desktop sizes using Playwright to verify responsive layouts. You apply this across web and iOS breakpoints to validate rendered UI state and document visual defects with structured findings.

What is the best way to document visual defects with DOM snapshots and severity classifications?▼

Documenting visual defects with DOM snapshots involves capturing rendered UI state and producing a severity-classified markdown report. This report uses reproducible filenames for evidence naming and integrates with verdict agents to produce evidence-backed PASS/FAIL verdicts for unverified front-end work.

Can I capture dark mode, light mode, and empty state screenshots for UI validation?▼

Yes, you can capture dark/light modes, loading, empty, and error states, plus long-content edge cases. Mode and edge-case validation targets these specific UI states with evidence-backed screenshots and accessibility tree exports for precise documentation.

Does visual inspection work with iOS simulator screenshots and accessibility tree exports?▼

Visual inspection supports iOS simulator screenshots and accessibility tree exports alongside web Playwright and Chrome DevTools captures. This platform scope ensures precise documentation of rendered UI state across both web and iOS environments for comprehensive validation workflows.

How do I generate a severity-classified report for e2e visual testing evidence?▼

Generating a severity-classified report involves capturing multi-breakpoint screenshots and DOM snapshots, then saving the structured findings to a markdown file. This report satisfies evidence naming requirements and integrates with ValidationForge verdict writers and e2e journeys.