Guide · Agent skill
How to use the Figure and figcaption captions agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The figure-figcaption skill is a set of instructions that teaches an AI coding agent to check how images and their visible captions are written in a web project. When it finds a caption sitting beside an image in plain paragraph or span tags, it flags it and suggests wrapping the pair in the HTML figure and figcaption elements. This guide is for developers, designers and content editors who want to use the skill, and after reading it you will know how to install it, how to ask for a review, and how to check the result.
Figure and figcaption captionsthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the figure-figcaption ZIP from this page. It contains SKILL.md and references/rule.md.
- 2Unzip into the skills folder. Unzip it into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
- 4Ask for a review in plain language. Describe the pages or components to check and mention captions, images or figure markup.
- 5Review the proposed HTML. Read the corrected markup and check alt text wording yourself before applying changes.
- 6Confirm the fix in DevTools. Use browser DevTools to inspect the rendered figure and figcaption structure, as the skill describes.
What the figure-figcaption skill makes the agent do
The skill looks for images that have descriptive visible text next to them, such as a paragraph or span placed directly below an img. It checks that these pairs are wrapped in a figure element, that the caption text sits inside a figcaption, and that figcaption is a direct child of figure.
It also checks the alt text on the image. Alt text should not be identical to the figcaption, because the two serve different purposes. The skill reviews image size, loading behaviour and above-the-fold impact in the code, and explains how to confirm fixes in browser DevTools.
- Flags <img> elements followed by descriptive text that is not marked up as figure and figcaption
- Proposes corrected HTML with the caption moved into figcaption
- Reviews whether alt text should be shortened, emptied or kept concise after the change
- Describes how to confirm the fix in DevTools
Install the figure-figcaption skill
Download the ZIP for the skill from this page. The skill is in the skills/figure-figcaption folder of the Front-End-Checklist repository and includes two files: SKILL.md and references/rule.md.
To install it for yourself, unzip the download into ~/.claude/skills/. To make it available only inside one project, unzip it into that project's .claude/skills/ folder instead.
If you use the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills instead.
- Personal install: ~/.claude/skills/
- Project install: .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's description tells the agent when to use it, so ask for what you want in plain language. Mention images, captions, markup or image assets, and the agent will look for the skill's guidance.
Be specific about the scope. Pointing the agent at a folder of blog templates or a product page component gives it a clearer target than asking about the whole site.
- "Review the blog post templates for image captions that should use figure and figcaption."
- "Check our product pages for captions placed in paragraphs under images."
- "Fix the figure and figcaption markup in src/components/Gallery.html and show me the changes."
- "Check whether the images on the home page affect above-the-fold loading."
Example: fixing a caption
The rule's reference page shows the typical problem. A caption in a paragraph after an image is visually adjacent to it but has no programmatic link. The corrected version wraps both in a figure and moves the caption into a figcaption. The alt text describes the image itself, while the figcaption gives the visible description.
<figure>
<img
src="waterfall.jpg"
alt="Nauyaca Waterfalls, a wide two-tier waterfall surrounded by rainforest"
>
<figcaption>Nauyaca Waterfalls, Dominical, Costa Rica — March 2023</figcaption>
</figure>What the skill needs and what it does not do
The skill lists no requirements. It does not run scripts and does not use the network, so it works by reading and suggesting changes to your files. You still review and apply any edits yourself.
Because alt text and caption wording need human judgement, review the agent's suggestions before accepting them rather than letting it rewrite production HTML in bulk.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Keep a review step before merging any changes
Tips for better results
Give the agent a bounded area of the project and a clear goal, such as accessibility or image SEO. Ask it to show the corrected HTML before editing files, then check the result in browser DevTools as the skill suggests.
Remember that figure is for self-contained content such as images, code blocks, diagrams and charts, so not every image needs one. Decorative images without visible captions are outside the skill's main pattern.
- Start with one template or component, then widen the scope
- Ask for the proposed HTML first, then apply it
- Check alt text wording by hand, since it is a judgement call
What people use it for
- Auditing blog post templates for captions written as plain paragraphs under images
- Reviewing product pages where image descriptions sit in span tags beside the picture
- Checking a component library for alt text that duplicates the visible caption
- Reviewing image size and loading behaviour alongside caption markup on landing pages
Frequently asked questions
How do I install the figure-figcaption agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
Does the figure-figcaption skill require anything else to run?
The skill lists no requirements. It does not run scripts and does not use the network, so it reads your files and suggests changes.
Is the figure-figcaption skill free to use?
The skill is published under the MIT licence. This page does not list any price, so check the repository for the licence text.
Will the skill rewrite my HTML automatically?
It proposes corrected HTML, but the skill's own guidance says alt text and caption wording need human judgement. Review each change before applying it.
Why does a caption need figure and figcaption instead of a paragraph?
A paragraph under an image is visible but has no programmatic link to it, so screen readers do not announce it with the image. Figure and figcaption create that relationship and also signal to search engines that the caption describes the image.
Should every image be wrapped in figure?
No. The skill's guidance says figure suits self-contained content such as images, code blocks, diagrams and charts, and not every image needs it. Use it when there is a visible caption to pair with the image.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you maintain a site's HTML and want a consistent check for captions that are not linked to their images, or if you want help with image SEO and accessibility. Pick something else if your project has no images or visible captions, or if you want an tool that rewrites production HTML automatically without review.
Download the skill