Guide · Agent skill
How to use the Critical Image Loading Review agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The critical-images skill is a set of instructions that teaches an AI agent to review a page's images, markup, and build or CDN settings, with one goal: making the most important image load first. This is usually the hero image or the Largest Contentful Paint (LCP) element. This guide explains what the skill makes the agent do, how to install it, how to trigger it with plain requests, and what to check before you accept its suggestions.
Critical Image Loading Reviewthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the critical-images skill ZIP from the Front-End Checklist page for this item.
- 2Unzip the skill folder. Unzip it so you have a folder containing SKILL.md and references/rule.md.
- 3Place it where the agent can find it. Copy the folder into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project.
- 4Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
- 5Ask for a critical-image review. Describe the page or component and ask the agent to review hero and above-the-fold image loading.
- 6Check the suggestions and test. Review each change, apply it, then confirm LCP and image priority in browser DevTools.
What does the critical-images skill make the agent do?
When the skill runs, the agent looks for images that appear before the user scrolls, meaning the above-the-fold content. It then checks how those images are loaded and suggests changes where a critical image is loaded with low priority.
The skill's guidance covers four main points: use fetchpriority='high' on the LCP image, preload hero images in the document head, remove loading='lazy' from above-the-fold images, and treat the LCP image as the image that matters most for the Core Web Vitals score. The agent also explains why this matters and how to confirm the result in browser DevTools.
- Finds images that are critical for the first render of the page
- Suggests adding fetchpriority='high' to those images
- Suggests preload hints for hero images
- Flags lazy-loading on images that should load immediately
- Explains how image loading affects LCP
- Describes how to confirm the fix in DevTools
How do you install the critical-images skill?
The skill is distributed as a ZIP file from the Front-End Checklist page for this item. Download the ZIP and unzip it. The skill folder contains SKILL.md and references/rule.md.
For a personal install, put the unzipped skill folder in ~/.claude/skills/. For a single project, put it in that project's .claude/skills/ folder instead.
If you use the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills instead.
- Personal install: ~/.claude/skills/
- Project install: the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
How do you trigger the skill with a natural request?
You do not need a special command. The skill's description tells the agent when to use it: reviewing image assets, markup, and CDN or build transforms related to prioritising critical images. Ask for that work in ordinary language and mention the page or files involved.
Good requests name the page or component and the goal, such as checking the hero section before launch or auditing LCP on a landing page.
- Review the hero image on our homepage for LCP problems.
- Check the images above the fold in src/components/Hero.tsx and tell me what to change.
- Audit our landing page images for fetchpriority and lazy-loading issues.
- Explain why our hero image might be slowing down Largest Contentful Paint.
What does a typical fix look like?
The reference file gives this example of a preloaded hero image in the document head. The fetchpriority='high' attribute tells the browser to prioritise the image. The responsive example uses media queries so mobile and desktop each preload their own hero file.
Treat the snippet as a pattern. Your file names, paths, and formats will differ.
<head>\n <!-- Preload hero image for fastest loading -->\n <link rel="preload" as="image" href="/images/hero.webp" type="image/webp" fetchpriority="high">\n\n <!-- With responsive images -->\n <link rel="preload" as="image" href="/images/hero-mobile.webp" media="(max-width: 768px)" type="image/webp">\n <link rel="preload" as="image" href="/images/hero-desktop.webp" media="(min-width: 769px)" type="image/webp">\n</head>How do you confirm the fix worked?
The skill asks the agent to describe how to confirm changes in browser DevTools. After you apply a change, reload the page and check the LCP element and the priority the browser gave the image. Compare the result with the state before the change.
The source also states that prioritising the LCP image can improve LCP by 20-40%. Treat that as the source's claim, not a guarantee for your site. Measure your own page before and after.
- Open DevTools and inspect the page's LCP element
- Check that the hero image loads early in the network timeline
- Compare LCP before and after the change
What does the skill need, and what are the safety notes?
The skill lists no requirements. It does not run scripts and does not use the network. It is guidance for the agent, so it reads your files and suggests changes.
Edits to production code should be reviewed by a person before they go live. Do not expect the skill to make automatic changes that you have not checked.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Review all suggested edits to production code before deploying
What people use it for
- Auditing a homepage hero image before a launch
- Checking a landing page's above-the-fold images for lazy-loading mistakes
- Reviewing a component that renders the LCP image
- Explaining to a non-specialist why LCP depends on image loading
- Preparing a list of preload and fetchpriority changes for a developer to review
Frequently asked questions
Is the critical-images skill free?
The source gives the licence as MIT, which is a permissive open-source licence. Check the licence file in the source repository for the full terms before you reuse or redistribute it.
What do I need to run the critical-images skill?
The skill lists no requirements. It runs no scripts and uses no network access. You need an AI agent that supports skills, such as Claude, with the skill installed.
Where do I put the critical-images skill folder?
Put it in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder for one project. In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
Will the skill change my code automatically?
No. The skill is guidance for the agent. It suggests changes such as fetchpriority='high' or a preload hint, and a person should review any edits to production code before they go live.
Does this skill also reduce image file size?
No. The skill focuses on loading priority, not file size optimisation. Image format and compression work is a separate task that this skill does not cover.
How is this different from a general image optimisation checklist?
This skill targets one question: which images load before the user scrolls, and are they loaded with high priority. It checks markup and loading strategy for those images, rather than compressing files or changing formats.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer, a team reviewing a launch page, or a designer or SEO specialist who wants a clear explanation of LCP and image loading. Pick something else if your pages have little image content above the fold, or if your main problem is file size and compression rather than loading priority.
Download the skill