Skip to content
Get packs

Fix broken images

Finds missing or broken image paths and adds fallbacks so pages don't show broken icons.

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

What it does

When installed, the agent reviews a website's image tags, file paths, and external image links to find images that are missing or may fail. It then reports each problem with its file and line, and suggests fixes such as correcting paths, adding missing files, or adding an onerror fallback that swaps in a placeholder image. It also explains why broken images hurt user experience and Core Web Vitals scores.

Great for

  • Front-end developers maintaining a website with many images
  • Teams doing a pre-launch check on product or marketing pages
  • Anyone auditing a site for broken image links after a migration or CDN change

Skip it if

  • Non-technical users who only want to view images; the skill edits code and does not browse or fix live sites on its own (it works from the files it is given)
  • Projects where images come from a user-controlled source that should not be altered without review, since the fixes change markup and may swap in fallback images that need checking

Try asking

  • “Scan this project for <img> tags pointing to files that don't exist and report file paths and line numbers”
  • “Add onerror fallback handling to my product image components in React”
  • “Review my build and CDN image config for missing assets and suggest fixes”
  • “Explain why a missing hero image could hurt my Largest Contentful Paint score”
Step-by-step guide: how to use Fix broken imagesInstall, 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.

    broken-images.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

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

  • Give the agent access to the full project folder so it can check that referenced image files actually exist.
  • Ask it to confirm fixes in browser DevTools Network tab by blocking requests and checking the fallback appears.
  • Review suggested fallback paths like /images/fallback.png, since the agent cannot know which placeholder your project uses.

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.