How does this skill handle clipping on mobile devices?

Unlike desktop viewports, if an element is clipped on a mobile or tablet viewport (<= 1024px), the skill identifies it as a genuine responsive design bug rather than attempting to resize the viewport.

What kind of rendering issues does it detect?

It checks for missing images, broken icons, font rendering errors, and overlapping content caused by z-index or positioning conflicts.

How are the validation results reported?

Results are provided in a standardized markdown format that includes the viewport size, element description, issue type, and specific recommendations for CSS fixes.

Does it support standard device breakpoints?

Yes, it includes a reference for standard devices including iPhone SE, iPhone 14 Pro Max, iPad Mini, and various desktop resolutions.

Can this skill be used with Playwright?

Yes, the skill includes specific Playwright commands and logic for managing viewports and capturing retries when layout issues are detected on desktop.

QA Screenshot Validation

Name: QA Screenshot Validation
Author: jpoutrin

byjpoutrin

•

安全与测试

Validates UI screenshots for layout integrity, element clipping, and rendering issues with intelligent viewport handling.

This skill provides a structured framework for auditing visual snapshots during the development process, ensuring that UI elements are correctly rendered and visible across different viewports. It automates the detection of horizontal or vertical clipping, overlapping text, and broken assets, while implementing a smart viewport strategy that distinguishes between fixable desktop layout constraints and genuine mobile responsive bugs. By integrating these automated checks into your workflow, you can ensure high-fidelity UI implementation and catch visual regressions before they reach production.

主要功能

01Intelligent desktop viewport resizing logic to resolve layout constraints

02Standardized validation checklists for layout, spacing, and asset rendering

032 GitHub stars

04Automated detection of clipped, masked, or overlapping UI elements

05Responsive bug identification specific to mobile and tablet breakpoints

06Structured issue documentation format for clear developer handoff

使用场景

01Validating cross-device layout consistency for responsive web applications

02Automating visual QA audits during end-to-end browser testing

03Generating detailed bug reports for frontend rendering and CSS issues

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jpoutrin/product-forge qa-screenshot-validation

For use in Claude.ai and ChatGPT

Download Skill