Assess and improve image usage so photography, illustrations, screenshots, icons, and uploaded media feel intentional, readable, and well-contained.

MANDATORY PREPARATION

Users start this workflow with /imagery. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: what role imagery plays here (brand, explanation, proof, decoration, content).

Consult the color and contrast reference when images create readability problems, need overlays, or should be harmonized with the palette. Consult the semantic color when imagery intersects with status, alerts, meaning, or tinted contextual surfaces rather than pure atmosphere. Consult the image treatment as the canonical shared source for overlays, screenshot sizing, icon scaling, media containment, and background bleed prevention. Consult the surface separation when images or media need cleaner separation from surrounding surfaces.

Assess Imagery Problems

Analyze where visual media is helping or hurting: