CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

alt-text

Use when reviewing image assets, markup, and CDN or build transforms related to Provide meaningful alt text for images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together.

60

Quality

76%

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/alt-text/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 a well-structured overview with strong operational guidance: concrete check criteria, flag conditions with examples, and per-role fix strategies, plus a clean hand-off to a real one-level-deep reference file. The main drag is redundancy — the intro and Explain sections restate WCAG basics Claude already knows and duplicate each other — and the absence of an executable scan command or an explicit post-fix re-validation step.

Suggestions

Collapse the opening paragraph and the 'Explain' section into one short line telling Claude to cite WCAG 2.1 SC 1.1.1 when reporting findings, instead of restating the screen-reader and 2.2-billion-people rationale twice in the body (it already lives in references/rule.md's 'Why It Matters').

Add an executable scan step to the Check section, e.g., `grep -rE '<img(?![^>]*\balt=)' --include='*.html'` or framework-specific component checks, so the 'Scan all <img> elements' instruction is copy-paste ready.

Close the workflow loop in Fix with an explicit re-validation checkpoint after edits (re-scan the flagged components to confirm every <img> now passes the five criteria).

DimensionReasoningScore

Conciseness

The operational core (Quick Reference, Check, Fix) is tight and instruction-dense, but the opening paragraph and the 'Explain' section both restate WCAG 1.1.1 / screen-reader basics Claude already knows, duplicating each other and references/rule.md's 'Why It Matters'. Matches anchor 3 (mostly efficient, some unnecessary explanation) rather than 4 (two full sections of known-concept explanation is beyond minor trimming) or 2 (the majority of the body is not padding).

3 / 5

Actionability

Check enumerates five concrete verification criteria plus specific flag conditions ('alt matching the filename (e.g., alt="photo1.jpg")', 'generic values like alt="image"'), and Fix gives per-case remediation with before/after example alt text and aria-describedby for complex images. Not 5 because 'Scan all <img> elements in the codebase' lacks an executable command; not 3 because the guidance is specific and example-backed well beyond high-level hints.

4 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections form a clearly labeled sequence in execution order, with a verification checkpoint present ('describe how to confirm the fix in DevTools'). Not 5 because there is no explicit re-validation loop after applying fixes; not 3 because the sequence is unambiguous and a DevTools confirmation step is stated.

4 / 5

Progressive Disclosure

The ~35-line body is a well-organized overview with a single clearly signaled, one-level-deep pointer to references/rule.md ('For full implementation details, code examples, and framework-specific guidance, see references/rule.md'), which exists and contains exactly that without further nested file references. Matches anchor 5 and the simple-skill exception for well-organized short skills.

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 an explicit and specific 'Use when...' trigger plus a concrete capability statement, placing it above the midpoint. Its weaknesses are the awkward embedded rule-title phrase that obscures the core alt-text capability and delivery-metric language ('encoded size', 'loading strategy', 'above-the-fold') that overlaps with sibling image-optimization skills rather than distinguishing this one.

Suggestions

Rewrite to separate capability from trigger, stating the core action explicitly: e.g., 'Audit <img> elements for missing, generic, or misleading alt text and prescribe fixes per image role (decorative, informative, linked, text-bearing). Use when reviewing markup or image assets for accessibility or WCAG 1.1.1 compliance.'

Remove or de-emphasize 'Check encoded size, rendered size, loading strategy, and above-the-fold impact together' — those belong to image-optimization skills and create wrong-skill triggering; if the delivery angle must stay, narrow it to how transforms affect alt-text preservation (e.g., CDN transforms that strip attributes).

Add accessibility trigger synonyms users naturally say — 'accessibility', 'screen reader', 'WCAG', 'a11y' — to improve trigger-term coverage.

DimensionReasoningScore

Specificity

Explicit concrete actions are enumerated — 'reviewing image assets, markup, and CDN or build transforms' and 'Check encoded size, rendered size, loading strategy, and above-the-fold impact' — with only a minor gap: the alt-text action itself is never stated as a verb, only embedded via the phrase 'related to Provide meaningful alt text for images'. Matches anchor 4 (several specific actions, minor gaps) rather than 5 (capability coverage is not comprehensive) or 3 (more than 1-2 minimal actions are listed).

4 / 5

Completeness

Both are explicitly answered: 'when' via the clause 'Use when reviewing image assets, markup, and CDN or build transforms' and 'what' via 'Check encoded size, rendered size, loading strategy, and above-the-fold impact together'. Not 5 because the capability statement is tangled into the trigger sentence and the awkward embedded phrase 'related to Provide meaningful alt text for images' blurs the what; not 3 because both what and when are explicitly present.

4 / 5

Trigger Term Quality

Natural trigger terms are present — 'alt text', 'image assets', 'markup', 'loading strategy', 'above-the-fold' — but common variations a user would say ('accessibility', 'screen reader', 'WCAG', 'a11y') are missing. Matches anchor 4 (good coverage, a few natural terms missing) rather than 5 (no synonym/extension coverage) or 3 (the core natural phrase 'alt text for images' is explicitly present).

4 / 5

Distinctiveness Conflict Risk

The alt-text niche itself is distinct, but 'Check encoded size, rendered size, loading strategy, and above-the-fold impact together' is the exact territory of sibling image-optimization rules (formats, responsive images, lazy loading), so the description would trigger on image-delivery questions that are not about alt text. Matches anchor 3 (somewhat specific but could still overlap with similar skills) rather than 4 (the overlap risk is more than minor).

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

Path

skills/alt-text/SKILL.md

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.