CtrlK
BlogDocsLog inGet started
Tessl Logo

aria-meter-name

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

61

Quality

73%

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/aria-meter-name/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.

A well-structured, brief body with a clear Check→Fix flow and an appropriate one-level-deep reference that genuinely holds the implementation details. The main weakness is redundancy: the meter rationale is explained three times (intro, Quick Reference bullet, Explain section) and the Code Review section is boilerplate that adds little over the description.

Suggestions

Cut the duplicated rationale — keep one of the intro sentence, the 'Helps users understand what measurement is being displayed' bullet, or the 'Explain' section, and drop the `<meter>` definition Claude already knows.

Replace the generic 'Code Review' boilerplate with one concrete inline example of a correctly labeled meter (aria-label and aria-labelledby variants) or a named verification step such as 'inspect the accessibility tree / run axe to confirm the accessible name'.

Make the reference a markdown link (e.g., [references/rule.md](references/rule.md)) so the pointer to detail is unambiguous.

DimensionReasoningScore

Conciseness

Mostly efficient but includes unnecessary explanation: the intro 'A meter represents a scalar measurement; without a label, a user might hear a value (e.g., '50%')...' explains a concept Claude already knows, and the same rationale is repeated in 'Helps users understand what measurement is being displayed' and the 'Explain' section, while 'Code Review' is boilerplate restating the description. Not 2: the body is short (~30 lines), sectioned, and scannable rather than noticeably padded. Not 4: the duplicated rationale and the meter definition could clearly be trimmed.

3 / 5

Actionability

Concrete, executable guidance: 'Check for `<meter>` elements or elements with `role="meter"` that lack an accessible name' and 'Add an `aria-label` or `aria-labelledby` to the meter element' name the exact elements, roles, and fix attributes. Not 5: no example markup of correct/incorrect usage appears in the body (it is deferred to the reference) and no specific verification tool is named inline. Not 3: per the rubric's instruction-skill note, absence of code is not penalized when the guidance is this specific and actionable.

4 / 5

Workflow Clarity

A clear '## Check' then '## Fix' sequence makes the single action unambiguous, and 'note how to verify the fix with browser accessibility tooling or assistive tech' acknowledges verification. Not 5: verification is framed as an instruction to 'note how' rather than a concrete checkpoint (e.g., 'confirm the accessible name in the accessibility tree' or 'run axe'), so the validation step stays implicit. Not 3: the check-to-fix flow has no gaps and this is not a destructive or batch operation requiring a validation cap.

4 / 5

Progressive Disclosure

The body is a lean overview with well-ordered sections and one clearly signaled, one-level-deep reference: 'For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`' — and references/rule.md exists in the bundle and contains exactly those details (code examples, why-it-matters, exceptions, verification). Not 4: there are no organization gaps — the split between overview and detail is appropriate and navigation is trivial.

5 / 5

Total

16

/

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.

A solid description with an explicit 'Use when...' trigger clause and several concrete inspection actions. Its main weaknesses are the rule title jammed awkwardly into mid-sentence ('related to Provide accessible names for meter elements'), which muddles the capability statement, and the absence of the natural aria-* trigger terms.

Suggestions

Rewrite the embedded rule title as a proper capability statement, e.g. 'Use when reviewing rendered HTML or interactive components to verify meter elements have accessible names.'

Add the natural trigger keywords 'aria-label', 'aria-labelledby', and 'role="meter"' so users and models searching by ARIA attribute names match this skill.

State the concrete outcome (flag `<meter>`/role="meter" elements lacking an accessible name and recommend an aria-label/aria-labelledby fix) instead of only generic inspection steps.

DimensionReasoningScore

Specificity

Lists several concrete inspection actions — 'Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output' — matching the anchor for several specific actions with minor gaps. Not 5: the actual capability (flagging/fixing unnamed meter elements) is conveyed only through the awkwardly embedded rule title 'related to Provide accessible names for meter elements', and the listed actions are generic review boilerplate. Not 3: it goes well beyond naming the domain with 1-2 actions.

4 / 5

Completeness

Both what and when are explicitly present: 'Use when reviewing rendered HTML, interactive components, or design-system patterns...' gives the when, and 'Check native semantics first, then inspect...' gives the what. Not 5: the 'what' is muddled — the capability is stated only via the embedded rule title and generic inspection steps rather than a concrete capability statement. Not 3: neither half is missing or only weakly implied.

4 / 5

Trigger Term Quality

Good natural-term coverage: 'rendered HTML', 'meter elements', 'accessible names', 'keyboard behavior', 'screen-reader output' — terms a user would plausibly say. Not 5: the most natural lookup terms for this rule — 'aria-label', 'aria-labelledby', 'role="meter"' — are absent, and 'Provide accessible names for meter elements' is a rule title users would not naturally utter. Not 3: coverage extends beyond a single domain noun to multiple natural phrases.

4 / 5

Distinctiveness Conflict Risk

The 'meter elements' niche is distinct and unlikely to trigger for unrelated skills. Not 5: the surrounding review-process language ('Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant') reads as boilerplate shared with sibling accessibility-rule skills, so it can compete with other a11y review skills when the generic part matches. Not 3: the meter-specific trigger clearly separates it from most skills.

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.