CtrlK
BlogDocsLog inGet started
Tessl Logo

input-image-alt

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide alt text for image buttons. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

67

Quality

81%

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

SKILL.md
Quality
Evals
Security

Quality

Content

85%

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-organized, actionable overview of a single accessibility rule with a clean one-level reference to rule.md. Its only real weakness is mild explanatory padding of concepts Claude already knows.

Suggestions

Drop or condense the opening rationale sentence ('Without alt text, screen readers may read the file name...') and the 'Ensures the button's purpose is clear to assistive technology' bullet; keep only actionable Check/Fix guidance.

Consider folding the 'Explain' section into the Fix or Code Review step to reduce overlap, since the button-purpose rationale is already covered nearby.

DimensionReasoningScore

Conciseness

The body is generally lean and well-sectioned, but the opening rationale ('Without alt text, screen readers may read the file name of the image...') and the 'Ensures the button's purpose is clear to assistive technology' bullet explain a basic accessibility concept Claude already knows, so it could be tightened.

2 / 3

Actionability

Gives concrete, specific guidance — 'Add an alt attribute to <input type="image">' with example values ('Search', 'Submit') and a precise check ('Verify that all <input type="image"> elements have a non-empty alt attribute'); for an instruction-only rule this is directly actionable, so the absence of a code block is not penalized per the rubric notes.

3 / 3

Workflow Clarity

A simple single-task skill under 50 lines, clearly organized as Check → Fix → Explain → Code Review with an explicit 'Verify' check and a 'note how to verify the fix with browser accessibility tooling' step; the simple-skills note allows a 3, and this is not a destructive/batch op so no validation cap applies.

3 / 3

Progressive Disclosure

The body is a concise overview that delegates 'full implementation details, code examples, and framework-specific guidance' to references/rule.md — a clearly signaled, one-level-deep reference that exists as a real file — matching the score-3 anchor.

3 / 3

Total

11

/

12

Passed

Description

77%

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 clearly answers both what the skill does and when to use it, with concrete accessibility-inspection actions. Its weak spots are the broad, meta-style trigger framing and the resulting overlap risk with sibling accessibility-rule skills.

Suggestions

Lead with a third-person capability statement before the 'Use when' clause (e.g., 'Audits <input type="image"> elements for missing alt text and guides remediation.') so the action is immediately clear.

Rewrite the trigger around phrasing users actually say — 'add alt text to image buttons', 'image button accessibility' — instead of the generic 'reviewing rendered HTML, interactive components, or design-system patterns' framing shared with sibling rules.

Name the specific element (<input type='image'>) directly in the description to sharpen distinctiveness and reduce conflict with other accessibility-checklist skills.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output' — matching the score-3 anchor; no explicit first/second-person pronouns, and the 'Use when...' phrasing mirrors the rubric's good examples, so no voice penalty applies.

3 / 3

Completeness

Explicitly answers both: 'Use when reviewing rendered HTML ... related to Provide alt text for image buttons' (when) and 'Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output' (what), matching the score-3 anchor with an explicit 'Use when' trigger.

3 / 3

Trigger Term Quality

'Provide alt text for image buttons' is a natural term, but the trigger is framed as 'reviewing rendered HTML, interactive components, or design-system patterns' — broad, meta-review phrasing rather than the variations a user would naturally say, so common variations are only partly covered.

2 / 3

Distinctiveness Conflict Risk

The rule itself ('alt text for image buttons') is a clear niche, but the shared 'reviewing rendered HTML, interactive components, or design-system patterns' trigger framing could plausibly fire for sibling frontendchecklist accessibility skills, so overlap risk remains.

2 / 3

Total

10

/

12

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.

Validation15 / 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.