imagery

Originally fromaladicf/better-web-ui
Installation
SKILL.md

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

MANDATORY PREPARATION

Read frontend-design and follow its Context Gathering Protocol. Reuse available context and ask only about consequential gaps. 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.

When working from an approved visual reference, follow reference fidelity. Preserve the subject and medium that make the reference meaningful, and report missing defining assets instead of silently substituting generic shapes.


Assess Imagery Problems

Analyze where visual media is helping or hurting:

Installs
60
GitHub Stars
5
First Seen
May 20, 2026