CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

60

Quality

71%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/figure-figcaption/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is well structured with an appropriately scoped overview that defers detail to a real, clearly signaled reference file, and the Check/Fix guidance is concrete and ordered. Its weaknesses are redundancy and background: the Explain section and intro teach figure/figcaption semantics Claude already knows and duplicate the Quick Reference, and the absence of a minimal inline good/bad HTML example forces a reference hop for the most common case.

Suggestions

Cut or drastically shrink the Explain section and its duplicated rationale in the intro — Claude already knows figure/figcaption semantics and screen-reader behavior; keep only the one non-obvious point (alt is the fallback, figcaption the visible description).

Deduplicate the Quick Reference against Check/Fix — the figcaption first/last-child and alt-not-identical rules each appear three times across sections.

Add a two-line inline example of the wrong pattern (<img> + <p>) and the corrected <figure>/<figcaption> markup so the most common case is executable without opening references/rule.md, and add a final re-scan step to close the fix loop.

DimensionReasoningScore

Conciseness

The Check/Fix sections are tight and operational, but the body spends tokens on things Claude already knows: the Explain section teaches that "<figure> represents self-contained content... <figcaption> provides a caption or legend", and the intro paragraph repeats the same screen-reader rationale; Quick Reference bullets also restate conditions that Check and Fix then enumerate again (figcaption as first/last child, alt-not-duplicated). This matches 'mostly efficient but includes some unnecessary explanation or could be tightened', not the 4 anchor, because multiple sections carry duplicative or already-known content.

3 / 5

Actionability

Check gives concrete, ordered verification criteria ("1) Such image-caption pairs are wrapped in <figure>. 2) ... 3) ... 4) The alt text... is not identical to the <figcaption> text") and Fix gives four executable steps including a nuanced alt-text decision rule and "Show the corrected HTML". Not a 5: no inline correct/incorrect HTML example in the body — the reader must open references/rule.md for the concrete markup, leaving a minor gap for the most common case.

4 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sequence is clear: scan with explicit flag criteria, apply numbered fixes, then "describe how to confirm the fix in DevTools" provides a verification endpoint. Not a 5: there is no explicit post-fix re-check loop (e.g., re-run the scan to confirm no remaining un-wrapped pairs), and the DevTools confirmation is mentioned as something to describe rather than a concrete checkpoint, fitting 'clear sequence with most checkpoints; minor validation gaps'.

4 / 5

Progressive Disclosure

The ~30-line body is a genuine overview: it keeps the rule, quick reference, and check/fix steps inline, then clearly signals exactly one level of external depth — "For full implementation details, code examples, and framework-specific guidance, see references/rule.md" (a real 153-line file) — which matches the clear-overview, well-signaled one-level-deep anchor with no competing or buried references.

5 / 5

Total

16

/

20

Passed

Description

71%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description has explicit what/when structure and concrete action verbs, but it reads like a template for image-delivery rules generally: the enumerated checks (encoded size, loading strategy, above-the-fold) describe image performance work rather than this skill's caption-semantics purpose, and the trigger framing overlaps heavily with sibling image rules. Rewriting it around figure/figcaption, alt-text duplication, and caption accessibility would sharpen both completeness and distinctiveness.

Suggestions

Rewrite the 'what' to describe the skill's actual purpose, e.g. 'Wrap images with adjacent visible captions in <figure>/<figcaption>, verify figcaption is a direct first/last child, and deduplicate alt vs. figcaption text', instead of generic image-delivery checks (encoded size, loading strategy, above-the-fold).

Replace the circular when-clause with concrete trigger scenarios: 'Use when the user mentions figure, figcaption, image captions, alt text duplication, or image accessibility/SEO', adding the missing natural synonyms (alt text, accessibility, screen readers, semantic HTML).

Drop the generic 'reviewing image assets, markup, and CDN or build transforms' framing that would cause this skill to trigger for unrelated image-optimization tasks and conflict with sibling image rules.

DimensionReasoningScore

Specificity

The description lists several concrete actions — "reviewing image assets, markup, and CDN or build transforms" and "Check encoded size, rendered size, loading strategy, and above-the-fold impact together" — which matches the anchor for several specific actions with minor gaps. Not a 5: the actions enumerated are image-delivery concerns that don't cover the skill's actual caption-semantics purpose (no mention of wrapping markup, alt/figcaption distinction, or accessibility), leaving real coverage gaps.

4 / 5

Completeness

Both what ("Check encoded size, rendered size, loading strategy, and above-the-fold impact together") and when ("Use when reviewing image assets, markup, and CDN or build transforms...") are explicit, matching the both-present anchor. Not a 5: the when clause is circular — "related to Use <figure> and <figcaption> for image captions" restates the rule title rather than naming concrete trigger scenarios (e.g., "when the user mentions captions, alt text, or image accessibility"), and the stated what is misaligned with the skill's semantic-markup purpose, so the pairing is less crisp than the anchor-5 example.

4 / 5

Trigger Term Quality

Good natural-keyword coverage: "image captions", "<figure>", "<figcaption>", "image assets", "markup", "above-the-fold" are phrases users would plausibly say. Not a 5: common synonyms a user would naturally invoke are missing — "alt text", "accessibility", "screen readers", "semantic HTML" — so coverage stops short of comprehensive.

4 / 5

Distinctiveness Conflict Risk

"Use when reviewing image assets, markup, and CDN or build transforms" plus "Check encoded size, rendered size, loading strategy, and above-the-fold impact" is generic image-optimization framing that would fire for many sibling image-delivery rules (lazy loading, formats, sizing), overlapping with similar skills; only the embedded rule title "Use <figure> and <figcaption> for image captions" is distinctive. This fits the somewhat-specific-but-overlapping anchor, not the 4 anchor, because the shared boilerplate creates more than minor overlap risk within a family of similarly templated image skills.

3 / 5

Total

15

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.