CtrlK
BlogDocsLog inGet started
Tessl Logo

label-content-name-mismatch

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Align visible labels with accessible names. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

57

Quality

66%

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/label-content-name-mismatch/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%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 excellent progressive disclosure — a lean overview deferring to a real one-level-deep reference file with the code examples. Its weaknesses are moderate: the Quick Reference and Explain sections duplicate content Claude already knows, no code example or named verification tool appears in the body itself, and validation checkpoints remain implicit.

Suggestions

Remove or merge the Quick Reference bullets and the Explain section into Check/Fix — they restate the intro and instruct Claude to explain a concept it already knows, adding tokens without new information.

Add one inline correct/incorrect markup snippet to the Fix section (e.g., <button aria-label="Add item to shopping cart">Add item</button>) so the concrete fix pattern is visible without opening the reference file.

Make the verification step concrete in Code Review by naming an actual tool and check, e.g. "verify with the browser's accessibility inspector that the accessible name starts with the visible label text" instead of the generic 'browser accessibility tooling or assistive tech'.

DimensionReasoningScore

Conciseness

Mostly efficient at ~35 lines, but there is real duplication: the Quick Reference bullets ("Visible text should be part of the accessible name (ARIA label)", "Ensure speech-to-text users can trigger controls by their visible name") restate the intro and the Check section, and the Explain section directs Claude to explain a concept it already knows. Not anchor 2 because the padding is limited to these few spots, not pervasive.

3 / 5

Actionability

Check and Fix are reasonably concrete — "Compare the visible text of buttons and links with their 'aria-label' or 'aria-labelledby' attributes" and "include the exact string of the visible label text at the beginning of the accessible name" — but no code example lives in the body, and verification is left vague ("verify the fix with browser accessibility tooling or assistive tech" names no actual tool or method). That missing key detail fits anchor 3 rather than anchor 4's mostly-executable guidance.

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections give a recognizable sequence for this review skill, but validation checkpoints are only implicit — the sole verification mention is the generic "note how to verify the fix with browser accessibility tooling or assistive tech" with no concrete step or tool. This matches anchor 3: sequence present, checkpoints missing or implicit.

3 / 5

Progressive Disclosure

The body is short and well-organized into clear sections, and detailed material (code examples, framework guidance) is correctly pushed to a single, clearly signaled one-level-deep reference — "see `references/rule.md`" — which exists in the bundle and contains the correct/incorrect code examples without further nesting. This matches the anchor 5 pattern and the rubric's exception for simple, well-organized skills.

5 / 5

Total

14

/

20

Passed

Description

75%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 is strong: it pairs an explicit "Use when..." trigger clause with a concrete, ordered inspection sequence, and anchors itself to a specific accessibility rule. Its weaknesses are moderate — a few inspection actions (keyboard behavior, focus flow) are off-target for a label-in-name rule, and common synonyms like ARIA, a11y, or voice control are missing.

DimensionReasoningScore

Specificity

Lists several concrete actions — "Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output" — which goes beyond naming the domain. It stops short of anchor 5 because several listed actions (keyboard behavior, focus flow) drift away from the actual label-in-name rule, leaving minor coverage gaps rather than comprehensive, on-target actions.

4 / 5

Completeness

Both parts are explicit: the "what" is the inspection sequence ("Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output") and the "when" opens with a clear "Use when reviewing rendered HTML, interactive components, or design-system patterns..." clause. It falls short of anchor 5 because the core deliverable — flagging mismatches between visible labels and accessible names — is only implied by the rule title rather than stated as a concrete trigger phrase.

4 / 5

Trigger Term Quality

Includes natural phrases users would plausibly say when needing this skill: "rendered HTML", "interactive components", "design-system patterns", "accessible names", "screen-reader output". Not anchor 5 because common synonyms like "a11y", "ARIA", "WCAG", or "voice control" are absent; not anchor 3 because the terms present are natural, not just technical jargon.

4 / 5

Distinctiveness Conflict Risk

The qualifier "related to Align visible labels with accessible names" carves out a distinct niche, and terms like "accessible names" are specific to this rule. Minor overlap risk remains with other accessibility-review skills because the broad triggers "reviewing rendered HTML" or "interactive components" could fire for unrelated a11y checks, keeping it below anchor 5.

4 / 5

Total

16

/

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.