qa-screenshot-validation

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.