skills.rest
krzemienski
krzemienskiCOMMUNITY
Explore all skills by this author →
Website𝕏@nkrzemienskiGitHub

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
One-click install
npx skills add https://github.com/krzemienski/validationforge --skill visual-inspection-krzemienski
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
samjhechtsamjhecht
4

frontend-visual-regression-testing

Compare UI component screenshots against baselines to detect visual regressions.

Community
Advanced
catlog22catlog22
511

maestro-milestone-audit

Audit milestone cross-phase integrations and write verdict reports to .workflow.

Community
Advanced
lucasloutayflucasloutayf

browser-testing-with-devtools

Diagnose browser-rendered issues by inspecting real-time DOM, console, and network data.

Community
Advanced
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate