Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

performanceVercel

No Image-caused CLS

MUST

MUST: Prevent CLS from images (explicit dimensions or reserved space)

Set explicit image dimensions and reserve space

Bad

Good

Why it matters

Images without dimensions cause layout shift when they load. Always set width and height attributes (or use aspect-ratio in CSS) so the browser can reserve the correct space before the image downloads.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.