How do I install the Figure Figcaption skill?

Run npx skillmds@latest add thedaviddias/figure-figcaption in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Figure Figcaption safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Figure Figcaption?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Figure Figcaption free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Figure Figcaption?

thedaviddias (@thedaviddias) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Figure Figcaption by thedaviddias — Agent Skill

Name: Figure Figcaption
Author: thedaviddias

Figure Figcaption

Use when reviewing image assets, markup, and CDN or build transforms related to Use <figure> and <figcaption> for image captions. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.

thedaviddias 1350fa2 2 files · 7.9 KB Updated Sep 17, 2026

File contents

Use and for image captions

Using a <p> tag as a caption is invisible to assistive technology as an image description. The <figure>/<figcaption> pattern creates a machine-readable relationship between an image and its caption, which screen readers surface to users. It also communicates to search engines that the caption describes the image, supporting image SEO.

Quick Reference

Wrap image + visible caption pairs in <figure> with <figcaption> as a direct child
<figcaption> must be the first or last child of <figure>
Do not duplicate alt text in figcaption—alt is the fallback, figcaption is the visible description
<figure> is appropriate for images, code blocks, diagrams, and charts—not every image

Check

Scan the codebase for images with adjacent visible text that acts as a caption (e.g., a or immediately below an describing it). Verify: 1) Such image-caption pairs are wrapped in . 2) The caption text is inside a element. 3) is a direct child of . 4) The alt text on the is not identical to the text—they serve different purposes. Flag any followed by descriptive text that is not structured as figure/figcaption.

Fix

For each image with an adjacent caption: 1) Wrap the and its caption text in a element. 2) Move the caption text into a element inside . 3) Review the alt attribute—if the figcaption already fully describes the image for sighted users, the alt can be shorter or empty (alt="") only if the figcaption alone is sufficient for screen readers too; otherwise keep a concise alt. 4) Position as the first or last child of . Show the corrected HTML.

Explain

Explain the semantic meaning of and . The element represents self-contained content (an image, code sample, diagram) that is referenced from the main content but could be moved without affecting the document flow. provides a caption or legend for the figure. Screen readers announce the figcaption in association with the figure, giving users context. Without this markup, sighted users see a caption but screen reader users hear only the alt text with no indication that a visible caption exists.

Code Review

Review image assets, markup, and delivery configuration related to Use and for image captions. Flag exact files or components where format choice, sizing, or loading behavior violates the rule, and describe how to confirm the fix in DevTools.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/images/figure-figcaption

---name: figure-figcaptiondescription: Use when reviewing image assets, markup, and CDN or build transforms related to Use <figure> and <figcaption> for image captions. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.---# Use <figure> and <figcaption> for image captionsUsing a `<p>` tag as a caption is invisible to assistive technology as an image description. The `<figure>`/`<figcaption>` pattern creates a machine-readable relationship between an image and its caption, which screen readers surface to users. It also communicates to search engines that the caption describes the image, supporting image SEO.## Quick Reference- Wrap image + visible caption pairs in `<figure>` with `<figcaption>` as a direct child- `<figcaption>` must be the first or last child of `<figure>`- Do not duplicate alt text in figcaption—alt is the fallback, figcaption is the visible description- `<figure>` is appropriate for images, code blocks, diagrams, and charts—not every image## CheckScan the codebase for images with adjacent visible text that acts as a caption (e.g., a <p> or <span> immediately below an <img> describing it). Verify: 1) Such image-caption pairs are wrapped in <figure>. 2) The caption text is inside a <figcaption> element. 3) <figcaption> is a direct child of <figure>. 4) The alt text on the <img> is not identical to the <figcaption> text—they serve different purposes. Flag any <img> followed by descriptive text that is not structured as figure/figcaption.## FixFor each image with an adjacent caption: 1) Wrap the <img> and its caption text in a <figure> element. 2) Move the caption text into a <figcaption> element inside <figure>. 3) Review the <img> alt attribute—if the figcaption already fully describes the image for sighted users, the alt can be shorter or empty (alt="") only if the figcaption alone is sufficient for screen readers too; otherwise keep a concise alt. 4) Position <figcaption> as the first or last child of <figure>. Show the corrected HTML.## ExplainExplain the semantic meaning of <figure> and <figcaption>. The <figure> element represents self-contained content (an image, code sample, diagram) that is referenced from the main content but could be moved without affecting the document flow. <figcaption> provides a caption or legend for the figure. Screen readers announce the figcaption in association with the figure, giving users context. Without this markup, sighted users see a caption but screen reader users hear only the alt text with no indication that a visible caption exists.## Code ReviewReview image assets, markup, and delivery configuration related to Use <figure> and <figcaption> for image captions. Flag exact files or components where format choice, sizing, or loading behavior violates the rule, and describe how to confirm the fix in DevTools.---For full implementation details, code examples, and framework-specific guidance,see `references/rule.md`.Rule page: https://frontendchecklist.io/en/rules/images/figure-figcaption

Frequently asked questions