Skip to content
Get packs

Image Error Fallbacks

Review a site's images and add graceful fallbacks for images that fail to load

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

What it does

This skill teaches the agent to check whether a website handles broken images well, such as showing a placeholder or fallback image instead of a broken icon. When asked to review image code, it looks at image assets, markup, and delivery settings, flags where image handling breaks the rule, and explains how to confirm the fix in browser DevTools. It is a checklist-style guide rather than a tool that changes anything on its own.

Great for

  • Front-end developers reviewing a website's image handling before launch
  • Designers who want to check how a page looks when images fail to load
  • Teams running a front-end quality checklist on a web project

Skip it if

  • Projects that do not display web images, since the guidance would not apply
  • Anyone expecting automatic fixes: the skill describes what to check and change, and the agent still needs review before editing production code

Try asking

  • “Review the image markup in this project and tell me where broken images have no fallback”
  • “Add onerror fallbacks to the product image components in my React app”
  • “Check whether my hero image has a placeholder while it loads and fails gracefully”
Step-by-step guide: how to use Image Error FallbacksInstall, 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.

    error-images.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip error-images.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 specific files or components so the review stays focused
  • Ask it to show how to confirm the fix in DevTools, for example by blocking image requests in the Network panel
  • Read references/rule.md for framework-specific code examples before applying changes

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.