How to use the AVIF Image Format Review agent skill

What the skill makes the agent do

Agent skills are folders of instructions that an AI agent loads when a task matches the skill's description. This one covers a single rule from the Front-End Checklist: use AVIF for modern browsers, with proper fallbacks.

When you ask for an image review, the agent checks the format choice, encoded size, rendered size and loading behaviour together. It flags the specific files or components that break the rule and explains how to confirm the fix in browser DevTools.

The skill is guidance for review. It is not a tool that converts images, so the agent does not encode files for you through a script.

• Checks whether the site serves AVIF and what fallbacks it uses
• Looks at encoded size, rendered size and loading strategy
• Flags exact files or components that break the rule
• Explains how to verify the fix in DevTools

Install the avif-format skill

Download the skill ZIP from this page and unzip it. The folder contains SKILL.md and references/rule.md. Place the unzipped folder in one of these locations, depending on how you want to use it.

For a personal install, put it in ~/.claude/skills/. For a single project, put it in the project's .claude/skills/ folder. Alternatively, upload the ZIP in the Claude apps under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/
• Project only: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Trigger the skill with natural requests

You do not need a special command. The skill loads when your request matches its description, which is about reviewing image assets, markup, and CDN or build transforms for AVIF. Mention images, formats, page performance or your build or CDN settings in plain language.

Name the files or folders you want checked so the agent looks at the right code. The more specific the request, the more useful the flagged list will be.

• Review the images on our homepage for AVIF support and fallbacks
• Check whether our <picture> elements include AVIF, WebP and JPEG sources
• Audit our build config and CDN transforms for modern image formats
• Tell me which components miss the AVIF rule and how to confirm the fix in DevTools

What the correct markup looks like

The reference file shows a picture element with an AVIF source first, a WebP source second, and a JPEG img as the final fallback. Each source has srcset widths and sizes, so the browser can pick a file that fits the rendered size. Browsers take the first source they support.

Use this pattern as the benchmark the agent compares your markup against. Your own widths and file names will differ.

• AVIF source listed first (type image/avif)
• WebP source second (type image/webp)
• JPEG img as the last fallback for older browsers

Example review requests and what to expect

A useful request names the scope and the outcome you want. For a page audit, ask the agent to list each image that is not served as AVIF and say which component renders it. For a pipeline review, ask whether the build or CDN config produces AVIF variants at the widths your markup uses.

The agent's output should name exact files or components and describe a check you can run yourself. Treat its findings as a starting list to verify, not as final proof.

• Page audit: list images not served as AVIF, with the file or component for each
• Pipeline review: confirm build or CDN settings produce AVIF at the sizes used in markup
• Fix check: explain which DevTools panel to open to confirm the new format loads

Safety notes: scripts and network

This skill runs no scripts and uses no network access, according to its listing. It requires nothing else to be installed. The agent reads the files and suggests edits, so any changes it makes to your project are the ones you approve.

Because the skill contains no conversion script, the agent has to rely on its own edits to your code. Review those edits before committing them, especially in build or CDN configuration.

• Runs scripts: no
• Uses network: no
• Requires: nothing listed
• Review any agent edits to markup or build config before committing

Tips for getting useful results

Give the agent the real rendering context. The skill asks it to weigh encoded size, rendered size and above-the-fold impact together, so tell it which images sit above the fold and which are lazy-loaded. A smaller file does not help if it is loaded too early or sized larger than it appears.

Keep the fallback chain. The reference pattern uses WebP and JPEG after AVIF, so an audit that suggests dropping them should be questioned. Finally, confirm the result in browser DevTools rather than trusting the report alone.

• Say which images are above the fold and which are lazy-loaded
• Ask for both encoded size and rendered size in the report
• Keep WebP and JPEG fallbacks after AVIF
• Verify the served format in DevTools after changes