CtrlK
BlogDocsLog inGet started
Tessl Logo

aria-progressbar-name

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

66

Quality

80%

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

Quality

Content

85%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, appropriately brief body: tight Quick Reference bullets, an unambiguous single-action check/fix workflow, and a clean one-level-deep pointer to references/rule.md that verifiably exists. The only weaknesses are minor — a small amount of redundant/boilerplate text and no inline markup example, both of which keep conciseness and actionability at 4 rather than 5.

Suggestions

Inline one minimal good/bad markup pair in the Fix section (e.g. <div role="progressbar" aria-label="Uploading files" aria-valuenow="70" ...>) so the fix is copy-paste ready without opening the reference.

Merge the intro motivation sentence with the Explain section — they make the same point about screen-reader users lacking context — to trim tokens.

Cut the generic Code Review boilerplate about focus behavior and keyboard interactions, which is outside this rule's naming scope.

DimensionReasoningScore

Conciseness

The body is lean: a one-line motivation, five tight Quick Reference bullets, and one-sentence Check/Fix/Explain sections. Not a 5 because of minor over-explanation — the intro sentence ("screen reader users will only hear that a progress bar exists") overlaps with the Explain section, and the Code Review paragraph is generic boilerplate ("focus behavior, or keyboard interactions") that pads beyond this rule's scope.

4 / 5

Actionability

Guidance is concrete and executable: "Use `aria-label` or `aria-labelledby` to name progress bars", "Provide `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`", and the Check names the exact selector (role="progressbar"). Not a 5 because no markup example appears in the body — all copy-paste-ready code lives in references/rule.md — so the Fix section tells what to add but not what the fixed element looks like.

4 / 5

Workflow Clarity

This is a simple single-purpose skill (~35 lines) whose single action is unambiguous: check that role="progressbar" elements have an accessible name via aria-label/aria-labelledby, then fix with the same attributes — meeting the simple-skill exception for a 5. The Check/Fix/Explain sequence confirms the one action is unambiguous, and no destructive/batch validation is required.

5 / 5

Progressive Disclosure

The bundle structure matches the disclosure pattern: references/rule.md exists (verified, 58 lines with the ARIA code examples) and is clearly signaled at the end of the body — "For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`" — exactly one level deep with no nesting. Quick-reference content is appropriately in the body and detail appropriately in the reference.

5 / 5

Total

18

/

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 trigger clause and concrete inspection actions, held back from the top band by the verbatim rule-title embedding ("related to Provide accessible names for progress bars"), missing natural ARIA-related trigger terms, and a 'what' that describes generic accessibility review rather than the progressbar-naming remediation. Third-person voice is used correctly and verbosity is acceptable.

Suggestions

Rewrite the trigger clause with natural user language and synonyms: e.g. "Use when reviewing or fixing HTML progress bars, loading indicators, or spinners (role='progressbar') — especially adding aria-label or aria-labelledby — or when users mention ARIA, screen readers, or accessible names."

Integrate the rule task grammatically instead of pasting the title: replace "related to Provide accessible names for progress bars" with "related to naming progress bars for screen readers".

State the remediation capability, not just inspection: mention adding aria-label/aria-labelledby and providing aria-valuenow/aria-valuemin/aria-valuemax so the 'what' covers both checking and fixing.

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 a 5 because it never states the core remediation capability (adding aria-label/aria-labelledby, providing aria-valuenow/min/max), only the review-side inspection steps.

4 / 5

Completeness

Both parts are present: an explicit "Use when reviewing rendered HTML, interactive components, or design-system patterns" trigger clause and a what consisting of concrete check/inspect actions. Not a 5 because the 'what' is generic accessibility-review process rather than the progressbar-naming task itself, and the trigger clause is broad while the actual task is awkwardly bolted on via "related to Provide accessible names for progress bars".

4 / 5

Trigger Term Quality

Good natural-keyword coverage: "progress bars", "accessible names", "screen-reader output", "rendered HTML", "interactive components" are phrases users would naturally say. Not a 5 because high-signal synonyms and tokens are missing — "aria", "aria-label", "spinner", "loading indicator" — and the key phrase "Provide accessible names for progress bars" is a rule title pasted verbatim rather than natural user language.

4 / 5

Distinctiveness Conflict Risk

The tail ("Provide accessible names for progress bars", "accessible names") carves out a clear niche with minimal conflict risk. Not a 5 because the opening — "reviewing rendered HTML, interactive components, or design-system patterns" — is broad enough to overlap with sibling accessibility/ARIA review skills before the rule-specific tail disambiguates.

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.