Detect spacing and layout defects in mobile UI screenshots.
npx skills add https://github.com/thomasttvo/claude-skills --skill visual-qa-thomasttvo
Please help me install this Agent Skill. Skill: visual-qa Source: https://github.com/thomasttvo/claude-skills/tree/main/skills/visual-qa Command: npx skills add https://github.com/thomasttvo/claude-skills --skill visual-qa-thomasttvo
Manual visual inspection of mobile screenshots is slow, inconsistent, and misses subtle spacing, alignment, and touch-target issues that cause poor UX or regressions after code changes. This Skill codifies rigorous measurement rules so reviews are repeatable, objective, and actionable.
Analyze the attached mobile screenshot for all spacing and layout defects, measure gaps and alignments in points, and return DEFECT and WARNING items with their estimated point values.
High-intent search queries and answers about installing and using this skill.
To detect spacing and alignment defects in mobile UI screenshots, you need a tool that measures vertical and horizontal gaps, checks touch-target spacing, and returns a summary of WARNING and DEFECT items. This process requires screen dimensions in point space and element coordinates when available.
Mobile UI visual QA is the process of validating post-change layouts by estimating vertical and horizontal gaps as percentages of screen dimensions and converting them to points. It applies platform-specific thresholds to evaluate alignment, touch targets, and intra-card spacing.
Yes, you can check touch-target spacing and text legibility from a mobile screenshot by applying measurement rules that flag insufficient horizontal spacing between tap targets and low-contrast text. The analysis returns OK, WARNING, or DEFECT verdicts based on point measurements.
Exact element coordinates are required when available to accurately measure spacing in point space, but the visual QA process can still estimate gaps as percentages of screen dimensions. Providing screen dimensions in point space ensures accurate platform-specific threshold checks.
The best way to automate row alignment checks during a mobile PR review is to run a visual QA pass that detects misaligned row centers and baseline inconsistencies using point measurements. The output is a focused summary listing only the DEFECT and WARNING items.
Manual visual inspection misses layout regressions because it is slow, inconsistent, and lacks the rigorous measurement rules needed to spot subtle spacing and alignment issues. Codifying measurement rules ensures reviews are repeatable, objective, and actionable.
openakitaClick desktop UI elements or screen coordinates with configurable mouse buttons.
tyevansCreate structured bug reports with reproduction steps and severity.
sipherxyzCapture diagnostic screenshots and validate materials at BugItGo coordinates in Unreal Engine.
beratcelik1Run build, typecheck, lint, tests, security scans, and diff review for code changes.
