screenshot-analysis

Screenshot Analysis

Interpret what an image SHOWS and turn it into actionable findings. Screenshots live in /var/www/html/screenshots/ (Docker volume, auto-created).

Step 0 — Vision check (mandatory, before anything else)

This skill only works on a model that accepts image input (MODEL_VISION; the visual-analyzer agent is configured with it). After Reading the image, verify you truly perceive it: can you state the dominant background color and one piece of visible text WITHOUT guessing? If not — tool error, blank result, or you notice you are inferring from the filename — STOP and report: "This analysis requires a vision-capable model; I could not visually inspect the image." NEVER fabricate a description; a fabricated finding is worse than none.

Step 1 — Obtain the image

• Existing file: Read /var/www/html/screenshots/<name>.png (Read renders the pixels).
• Need a capture: use the playwright-testing skill — browser_navigate to the HTTP URL, browser_take_screenshot with filename: "name.png", fullPage: true. Admin pages: ssh web drush uli first, replace https:// with http://.
• Responsive analysis: browser_resize to 375 (mobile), 768 (tablet), 1440 (desktop); screenshot at each width; analyze each capture separately.

Step 2 — Analysis checklist

Work through ALL sections; report only what you actually see, anchored to a region ("header, right side", "third card in the grid", "below the fold").

1. Rendering failures (highest priority) — visible error text (exception traces, "The website encountered an unexpected error", SQL errors, PHP warnings), raw unrendered markup ({{ ... }}, <?php, unparsed HTML entities), placeholder/broken image icons, missing web fonts (fallback serif in a sans design).
2. Layout — overlapping elements, content overflowing its container, horizontal scrollbars, misaligned columns/cards, elements outside the viewport, floats that escaped their parent.
3. Spacing — inconsistent gaps between sibling elements, missing padding (text touching edges), collapsed margins producing glued sections.
4. Typography — hierarchy (is the visual order h1 > h2 > body respected?), line length over ~90 characters, truncated text/ellipsis where full text is expected, ALL-CAPS body text, inconsistent font sizes for the same role.
5. Color and accessibility — text/background contrast visibly below WCAG AA (4.5:1 normal text, 3:1 large text — flag anything that LOOKS borderline for manual measurement), color as the only carrier of meaning, focus states absent on the captured focused element, touch targets visibly under ~44px on mobile captures.
6. Content integrity — untranslated strings or literal translation keys, lorem ipsum leftovers, empty regions that should hold content, "Array" / "[object Object]" artifacts, wrong or default images.
7. Responsive artifacts (per-width captures) — desktop nav unbroken on mobile, images not scaling, fixed-width elements forcing zoom-out, hidden critical content.