Skip to content
Get packs

AVIF Image Format Review

Reviews web images and markup to check whether AVIF with fallbacks is used correctly.

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

What it does

This skill gives the agent a checklist for one web performance rule: serve images in the AVIF format, which is usually smaller than JPEG or WebP, with fallbacks for browsers that lack support. When you ask it to review images, markup, or build/CDN settings, the agent checks format choice, file size, rendered size, and loading behaviour, flags the specific files or components that break the rule, and explains how to confirm the fix in browser DevTools. It is guidance for review, not a tool that converts images itself.

Great for

  • Front-end developers auditing a website's image performance
  • Teams setting up a build or CDN pipeline that serves modern image formats
  • Anyone who wants a quick check of whether a page uses AVIF with WebP or JPEG fallbacks

Skip it if

  • Projects that need automatic image conversion: the skill only describes the rule and includes no conversion script, so the agent must rely on its own edits (reason: nothing in the files does the encoding).
  • Sites with no image performance concerns, where the checklist adds little value (reason: the rule is a single optimisation item).

Try asking

  • “Review my product page markup and tell me where AVIF with fallbacks is missing.”
  • “Check whether our CDN config serves AVIF to browsers that support it.”
  • “Explain to my team why AVIF can beat WebP for photos and how to confirm it in DevTools.”
  • “Show me how to add a picture element with AVIF, WebP and JPEG sources.”
Step-by-step guide: how to use AVIF Image Format ReviewInstall, 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.

    avif-format.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip avif-format.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

  • Give the agent the actual HTML, component, or build config files so it can flag exact locations rather than general advice.
  • Ask it to check rendered size and above-the-fold impact too, since the skill asks for those alongside encoded size.
  • Verify browser support claims against current caniuse data, because the skill's support list is brief and may be out of date.

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.