CtrlK
BlogDocsLog inGet started
Tessl Logo

aria-valid-attr-value

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

60

Quality

71%

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-valid-attr-value/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, token-efficient overview with clean progressive disclosure to a genuinely useful reference file. Its main weakness is actionability: the in-body Check/Fix guidance stays abstract while all concrete examples and tooling specifics are deferred to the reference.

Suggestions

Inline one concrete example in the Check section — e.g. `aria-expanded="yes"` → `aria-expanded="true"`, and `aria-labelledby="non-existent-id"` — so the check is executable without opening the reference.

Name the concrete validation tooling in the body (e.g., 'run axe or Lighthouse; inspect the accessibility pane in browser DevTools') instead of the abstract 'validate that values conform to the allowed types'.

Drop the opening sentence explaining why invalid ARIA values break assistive tech — Claude already knows this — and let the Quick Reference lead.

DimensionReasoningScore

Conciseness

The body is lean (~30 lines) with well-earned Quick Reference bullets ("Avoid using 'yes/no' where 'true/false' is required"), matching 'efficient; minor instances of over-explanation that could be trimmed'. It is not 5 because the opening line ("Invalid attribute values cause ARIA properties to be ignored or misinterpreted...") explains a concept Claude already knows, and the one-line Check/Fix sections partially duplicate content one click away in references/rule.md. It is well above 3 — there is no padding or library-tour verbosity.

4 / 5

Actionability

The Quick Reference gives some concrete guidance ("aria-expanded=\"true\"", "Avoid using 'yes/no' where 'true/false' is required", "Check that IDs referenced in aria-labelledby or aria-owns actually exist"), but the Check and Fix sections are abstract direction — "Validate that all ARIA attribute values conform to the allowed types" and "Correct any invalid ARIA attribute values to match the expected format" — with no tool, command, or code example in the body itself (the ✅/❌ HTML examples live only in references/rule.md). This matches 'some concrete guidance but incomplete; missing key details' rather than 4, which requires concrete code or commands in the body.

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections sequence the task clearly, and the Code Review section includes a verification checkpoint ("note how to verify the fix with browser accessibility tooling or assistive tech"), matching 'clear sequence with most checkpoints present; minor validation gaps'. It is not 5 because the body never says how to validate (the axe/Lighthouse/accessibility-tree steps sit in rule.md) and the verification checkpoint is a mention, not an explicit loop; it is above 3 because sequence and a validation mention are both present, and this simple review task involves no destructive or batch operations that would cap the score.

4 / 5

Progressive Disclosure

The bundle matches the ideal structure: a short overview body with a 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, contains the detailed code examples/exceptions/verification, and itself references no further files. Content is appropriately split between overview and detail with easy navigation; the only trivial redundancy is the trailing 'Rule page:' URL line.

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 is functional and concrete, with an explicit 'Use when' trigger and multiple specific review actions. Its weaknesses are an awkward templated title insertion ('related to Use valid values for ARIA attributes'), a missing statement of the core validation task, and a generic review preamble that risks collisions with sibling accessibility-rule skills.

Suggestions

State the core action explicitly, e.g. 'Validate that ARIA attribute values conform to the allowed types (boolean, integer, ID list) in rendered HTML', instead of relying on the awkward templated phrase 'related to Use valid values for ARIA attributes'.

Add natural trigger synonyms users actually say — 'accessibility', 'a11y', 'screen reader', 'aria-expanded' — to broaden discoverability.

Differentiate from sibling ARIA rules by including rule-specific triggers such as 'invalid aria values' or 'aria-labelledby pointing to a missing ID' rather than the generic accessibility-review preamble shared across rules.

DimensionReasoningScore

Specificity

The description lists several concrete actions — "Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output" — matching the anchor 'lists several specific actions; minor gaps in coverage'. It is not a 5 because the core rule-specific action (validating ARIA attribute values against allowed types such as boolean/integer/ID list) is never stated as an action; not a 3 because it goes well beyond '1-2 concrete actions' with five distinct review steps.

4 / 5

Completeness

Both 'what' and 'when' are explicitly present: the when clause is "Use when reviewing rendered HTML, interactive components, or design-system patterns..." and the what is "Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output". It matches the 4 anchor ('both present; when could be more explicit') rather than 5 because the templated phrase "related to Use valid values for ARIA attributes" is awkward and the stated what describes a generic accessibility review rather than the skill's actual task of validating ARIA attribute values.

4 / 5

Trigger Term Quality

Good natural keyword coverage: "reviewing rendered HTML", "interactive components", "design-system patterns", "ARIA attributes", "keyboard behavior", "focus flow", "screen-reader output" — phrases users would plausibly say. It falls short of the 5 anchor ('comprehensive coverage including synonyms') because common variations like "accessibility", "a11y", or specific attribute names (e.g., aria-expanded) are missing; it is above 3 because the terms present are domain-natural, not generic.

4 / 5

Distinctiveness Conflict Risk

The trigger set "reviewing rendered HTML, interactive components, or design-system patterns" plus "Check native semantics first, then inspect keyboard behavior..." is a generic accessibility-review preamble that would be nearly identical across sibling ARIA rules (aria-roles, aria-prohibited-attr, etc.), so it 'could still overlap with similar skills' (anchor 3). It is not 4 because only the embedded rule title distinguishes it from closely related skills; it is above 2 because the ARIA rule title does carve out a recognizable niche.

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