skills.rest
jpoutrin
jpoutrinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qa-screenshot-validation

Detect layout and rendering issues in captured screenshots.

14|1|Updated Dec 5, 2025
Search Tags:#automation#screenshots#responsive design#qa#playwright#visual testing#ui bugs#layout validation
One-click install
npx skills add https://github.com/jpoutrin/product-forge --skill qa-screenshot-validation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-screenshot-validation
Source: https://github.com/jpoutrin/product-forge/tree/main/plugins/product-design/skills/qa-screenshot-validation
Command: npx skills add https://github.com/jpoutrin/product-forge --skill qa-screenshot-validation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solves?

Manually validating screenshots for visual correctness, layout issues, and clipping is time-consuming and prone to human error, especially across different viewports. This Skill automates the validation of captured screenshots and intelligently handles common issues.

Core Features & Use Cases

  • Validation Process: Automatically evaluates screenshots for element visibility, layout integrity, clipping/masking, overlapping elements, and rendering issues.
  • Automatic Resize Logic: For desktop viewports, attempts to automatically resize the viewport and retake the screenshot if elements are clipped.
  • Mobile/Tablet Testing Rules: Critically, does not auto-resize for mobile/tablet viewports, instead documenting clipping as a responsive design bug.
  • Validation Checklist: A structured checklist to run on each screenshot, ensuring comprehensive visual quality checks.
  • Detection Heuristics: Identifies visual indicators for clipping and overlapping elements.
  • Use Case: Automatically validating screenshots taken during QA testing, detecting clipped elements on desktop and attempting a resize, identifying responsive design bugs on mobile/tablet, or documenting visual issues with clear descriptions.

Quick Start

Use the qa-screenshot-validation skill to outline the validation process for a captured screenshot, including checks for clipping and layout.

Frequently Asked Questions about qa-screenshot-validation

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

FAQPage Schema
How do I detect clipping and layout issues in screenshots automatically?▼

Screenshot validation detects clipping, element visibility problems, and layout defects by analyzing captured images for rendering issues. This Skill automatically evaluates screenshots for these visual problems and suggests viewport adjustments on desktop to resolve clipping.

Can I automatically fix clipped elements in screenshots during QA testing?▼

Yes. For desktop viewports over 1024px, the Skill automatically attempts to resize and retake screenshots when clipping is detected, applying width increments and full HD fallback. Mobile and tablet screenshots document clipping as responsive design bugs instead of auto-resizing.

What visual issues does screenshot validation catch?▼

Screenshot validation checks for element visibility, layout integrity, clipping, masking, overlapping elements, and rendering defects. It produces structured validation results with actionable guidance suitable for bug reporting and QA workflows.

How does screenshot validation handle responsive design testing across viewports?▼

The Skill applies different rules by viewport type: desktop viewports trigger automatic resize logic when clipping occurs, while mobile and tablet viewports are treated as responsive design bugs and documented without auto-resizing.

Why use automated screenshot validation instead of manual visual checks?▼

Automated validation eliminates manual review time and human error across different viewports. It provides consistent, structured checklists for comprehensive visual quality checks and generates clear, actionable descriptions for UI bugs and layout problems.

Does screenshot validation work with web and app surfaces?▼

Yes. The Skill validates screenshots across both web and app surfaces, applying the same detection heuristics for visibility, layout integrity, clipping, and rendering issues with viewport-aware adjustment guidance.

Related Skills

Explore More Software Engineering Skills→
yohey-wyohey-w
1.4k

shogun-screenshot

Capture and process screenshots with cropping, resizing, and masking.

Community
Intermediate
antriksh-29antriksh-29

qa-only

Generate structured QA reports with health scores, screenshots, and reproducible steps.

Community
Advanced
bacchus-labsbacchus-labs
4

visual-regression-testing

Automate visual regression testing by comparing screenshots against baselines.

Official
Advanced
kobogithubkobogithub

uiux-viewport-testing

Automate responsive design testing by resizing browser viewports and capturing screenshots.

Community
Intermediate