CtrlK
BlogDocsLog inGet started
Tessl Logo

aria-hidden-body

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Do not use aria-hidden on the document body. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

64

Quality

76%

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-hidden-body/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

78%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 lean, well-structured body for a simple single-rule skill: an unambiguous check, a concrete fix, and a properly signaled one-level reference to references/rule.md that carries the code examples and verification detail. The weaknesses are minor — a vague "Explain" section, templated repetition of the rule title in the Code Review paragraph, and verification being implied rather than stated as an explicit step.

Suggestions

Replace the vague "Explain" directive with one or two concrete facts to convey (e.g. the whole page is removed from the accessibility tree, making the site unusable for screen reader users) or fold it into the intro and delete the section.

Make verification an explicit checkpoint in the Check/Fix flow, e.g. "Verify: inspect the accessibility tree or run axe to confirm body is exposed while a modal is open", instead of the generic "note how to verify the fix" phrasing.

Rewrite the Code Review paragraph so it does not splice the rule title into the sentence ("interactive states that affect Do not use aria-hidden on the document body" → "interactive states that affect body-level aria-hidden").

DimensionReasoningScore

Conciseness

The ~30-line body is efficient: Quick Reference bullets, one-sentence Check/Fix sections, and a clearly signaled pointer to references/rule.md, with no padding or explanation of concepts Claude already knows. It is not a 5 because the "Explain" section ("Explain the catastrophic impact...") and the twice-repeated rule title inside the "Code Review" paragraph ("interactive states that affect Do not use aria-hidden on the document body") are trimmable filler.

4 / 5

Actionability

As an instruction-only skill the guidance is concrete: the Check names the exact element, attribute, and lifecycle scope ("the <body> element has aria-hidden=\"true\" applied at any point in the lifecycle"), and the Fix names the exact remedy and the correct alternative (background containers when modals are open). It is not a 5 because no inline verification command or code snippet is given — e.g. a selector to run or an axe/DevTools check — leaving the reader to construct the check themselves, and the "Explain" step is vague direction.

4 / 5

Workflow Clarity

The single task is unambiguous and well sequenced (Quick Reference → Check → Fix → Explain → Code Review), and the "Code Review" section references verifying the fix with browser accessibility tooling, satisfying the simple-skill case. It is not a 5 because verification is only gestured at ("note how to verify the fix with browser accessibility tooling") rather than given as an explicit checkpoint, and the overlapping Check/Code Review sections blur the sequence slightly.

4 / 5

Progressive Disclosure

The body is under 50 lines with well-organized sections and a single clearly signaled, one-level-deep reference ("For full implementation details, code examples, and framework-specific guidance, see references/rule.md") that exists in the bundle. Content is appropriately split — overview inline, examples and framework guidance in the reference file — so navigation is easy and nothing is inlined that belongs elsewhere.

5 / 5

Total

17

/

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 that answers both what and when with a genuine "Use when..." clause and several concrete inspection actions. Its main weakness is the templated phrase "related to Do not use aria-hidden on the document body", which reads as an auto-inserted rule title rather than natural trigger language, and the omission of common accessibility synonyms.

Suggestions

Rewrite the when-clause as a natural sentence, e.g. "Use when reviewing HTML or interactive components where aria-hidden is applied to the body or modal background containers" instead of embedding the rule title verbatim.

Add common trigger synonyms such as "accessibility", "a11y", "screen reader", and "modal" so users phrasing the need differently still hit this skill.

Reflect the skill's full behavior (fix and report the violation, not just inspect) in the what-clause to close the coverage gap.

DimensionReasoningScore

Specificity

The description 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 is not a 5 because the action list is review-procedural and omits the fix/report half of the skill's behavior, leaving minor gaps in coverage.

4 / 5

Completeness

Both parts are explicit: the what ("Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output") and the when ("Use when reviewing rendered HTML, interactive components, or design-system patterns"). It is not a 5 because the when-clause's trigger phrase "related to Do not use aria-hidden on the document body" inserts the rule title verbatim into the sentence, making the trigger grammatically awkward rather than a natural concrete trigger phrase.

4 / 5

Trigger Term Quality

Strong natural keywords are present: "aria-hidden", "the document body", "rendered HTML", "screen-reader", "interactive components". It misses common synonyms a user would naturally say — "accessibility", "a11y", "modal", "screen reader" as a noun phrase separate from output — so it falls short of the comprehensive anchor 5 but is well above anchor 3.

4 / 5

Distinctiveness Conflict Risk

The aria-hidden-on-body rule gives this a clear niche with distinct triggers, so conflict risk is low. It is not a 5 because the broad lead-in "reviewing rendered HTML, interactive components, or design-system patterns" overlaps with general accessibility-audit and modal/focus-management skills before the rule-specific narrowing kicks in.

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.