Skip to content
Get packs

Figure and figcaption captions

Reviews image captions and marks them up with accessible figure/figcaption HTML

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 how images and their visible captions are written in a web project. When an image has descriptive text beside it, the agent flags it and suggests wrapping the pair in the HTML figure and figcaption elements, so screen readers can link the caption to the image. It also reviews image size, loading behaviour and above-the-fold impact in the code, and explains how to confirm fixes in browser DevTools.

Great for

  • Front-end developers reviewing a site's HTML for accessibility and image SEO
  • Designers or content editors who want captions on blog posts or product pages handled correctly

Skip it if

  • Projects with no images or no visible captions, where the skill has nothing to act on
  • Automated bulk rewrites of production HTML without review, since alt text and caption wording need human judgement

Try asking

  • “Review my blog templates and wrap image captions in figure and figcaption”
  • “Check whether the product gallery captions duplicate the alt text and suggest a fix”
  • “Explain why screen readers miss my <p> captions and show the corrected HTML”
Step-by-step guide: how to use Figure and figcaption captionsInstall, 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.

    figure-figcaption.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip figure-figcaption.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip figure-figcaption.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 components or templates so it can flag exact files rather than general advice.
  • Review suggested alt text changes yourself, since the skill notes that alt may be shortened or emptied only when the caption fully covers the image.
  • The skill's description mentions CDN and build transforms; supply your build config if you want those checked too.

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.