Skip to content
Get packs

Image Dimensions Checker

Finds images missing width and height and explains how to fix layout shift

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

Once installed, the agent reviews a web project's image tags and checks that each meaningful image has explicit width and height attributes, which stops the page from jumping around as images load. It reports the file and line of each problem, suggests before-and-after HTML fixes using the image's real pixel size, and separates real layout-shift risks from tiny decorative icons that are unlikely to matter. It can also explain the reasoning in plain terms and suggest how to confirm the fix in browser DevTools.

Great for

  • Front-end developers auditing a website for Core Web Vitals (CLS) problems
  • Designers or content teams who want to understand why image sizing affects page stability
  • Teams running a pre-launch review of HTML templates and image markup

Skip it if

  • Projects that do not use HTML image tags, since the check focuses on img elements and CSS background exceptions are skipped (the skill itself says they are exempt)
  • Situations needing automated measurement of real CLS scores; the skill reasons from code and does not run a browser or performance test
  • Non-web image work such as print or native mobile apps, where the rule does not apply

Try asking

  • “Check my project's HTML templates for img tags missing width and height and list each file and line number.”
  • “Show me before and after HTML for fixing the product images on my homepage so they stop causing layout shift.”
  • “Is this small SVG divider going to cause a CLS problem, or can I ignore it?”
  • “Review my image markup and CSS and tell me how to confirm the fix in Chrome DevTools.”
Step-by-step guide: how to use Image Dimensions CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    dimensions.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip dimensions.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip dimensions.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at the folder containing your templates or components so it can scan real img elements rather than guessing.
  • Give it the intrinsic pixel size of images where you know it; the skill warns against inventing dimensions that do not match the file.
  • Ask it to verify with DevTools or Lighthouse afterwards, since the skill itself only reasons from code and cannot measure CLS.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.