UI Screenshot Composition

UI Screenshot Composition

Use this skill to turn UI screenshots into a designed evidence system, not a pile of framed rectangles.

Workflow

• Inspect the project, media assets, framework image/video APIs, responsive breakpoints, accessibility requirements, and verification commands.
• Read UI Screenshot Composition Guide for detailed direction before changing visuals or code.
• Define the media's job: proof, desire, navigation, instruction, atmosphere, conversion, or accessibility.
• Implement with stable dimensions, responsive crops, useful fallbacks, and real content hierarchy.
• Inspect rendered desktop and mobile states, then refine crop, contrast, loading, labels, captions, and polish.

Always Protect

• Inspect before coding: framework, image/video components, asset folders, CMS or source content, styling system, responsive breakpoints, performance checks, accessibility checks, and available browser QA commands.
• Treat images and video as content strategy, not decoration: every asset should reveal the real product, person, venue, object, interface, proof, or mood needed by the page.
• Avoid generic stock-like visuals, dark blurred filler, random gradients, and media that crops away the subject users need to inspect.
• Plan desktop, mobile, high-density, slow-network, reduced-motion, no-autoplay, failed-asset, and screen-reader states.
• Reserve layout space with dimensions, aspect-ratio, CSS constraints, or framework image components to avoid layout shift.
• Use meaningful alt text for informative images, empty alt for decorative images, captions/transcripts/tracks for media that needs them, and visible text for critical information.
• Before delivery, inspect rendered desktop and mobile media crops, verify assets load without 404s, and run available lint/build/test/browser checks.