CtrlK
BlogDocsLog inGet started
Tessl Logo

custom-element-accessibility

Use when reviewing custom element class definitions or Web Component source code to check for missing ARIA reflection, keyboard handling, and form association.

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/custom-element-accessibility/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-organized overview that uses progressive disclosure correctly by deferring executable detail to a single real reference file. Its weaknesses are repeated explanation of the shadow-DOM/ElementInternals concept, no inline executable example, and validation steps that are signaled only in the reference rather than the body.

Suggestions

Remove the redundancy between the intro paragraph, the 'shadow DOM does not automatically expose ARIA' Quick Reference bullet, and the Explain section — state the shadow-DOM/ElementInternals bridge once.

Add a minimal inline code snippet to the Fix section (e.g. attachInternals() + ariaRole/ariaChecked reflection in the constructor) so the body is directly actionable without opening rule.md.

Add an explicit verification checkpoint to the body (e.g. 'after fixing, run axe DevTools and a keyboard-only tab-through; confirm zero critical ARIA violations') rather than deferring all validation to rule.md.

DimensionReasoningScore

Conciseness

The body is mostly lean, but the shadow-DOM/ElementInternals-bridge concept is restated across the intro paragraph, the Quick Reference bullet, and the Explain section, so it could be tightened rather than earning the 'every token earns its place' top anchor.

2 / 3

Actionability

The Fix and Code Review sections name concrete APIs (ElementInternals.ariaRole, ariaLabel, formAssociated, roving tabindex) and specific keys, but the body itself contains no executable code and defers all copy-paste examples to references/rule.md, matching 'concrete guidance but incomplete for direct execution.'

2 / 3

Workflow Clarity

The Check → Fix → Explain → Code Review structure gives a recognizable review sequence, but validation checkpoints (axe DevTools, keyboard-tab, screen-reader verification) live in rule.md rather than the body, leaving checkpoints implicit per the level-2 anchor.

2 / 3

Progressive Disclosure

The body is a concise overview (Quick Reference, Check, Fix, Explain, Code Review) that clearly signals one real, one-level-deep reference — 'see references/rule.md' — which exists and holds the full details rather than chaining onward.

3 / 3

Total

9

/

12

Passed

Description

85%

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 strong, well-scoped description with an explicit 'Use when' trigger and multiple concrete check actions. Its main gap is the absence of common accessibility trigger terms (accessibility, a11y, screen reader), which keeps trigger-term coverage from the top level.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'check for missing ARIA reflection, keyboard handling, and form association' against 'custom element class definitions or Web Component source code' — going beyond the single-action anchor at level 2.

3 / 3

Completeness

Explicitly states what it does ('check for missing ARIA reflection, keyboard handling, and form association') and when to use it via a 'Use when reviewing...' trigger clause, satisfying both halves with an explicit trigger.

3 / 3

Trigger Term Quality

'custom element' and 'Web Component' are natural developer terms, but the description omits common accessibility variations a user would actually say ('accessibility', 'a11y', 'screen reader', 'accessible'), matching the 'some relevant keywords but missing common variations' anchor.

2 / 3

Distinctiveness Conflict Risk

Targets a clear niche — custom element/Web Component source review for specific ARIA/keyboard/form checks — with triggers unlikely to fire for unrelated skills.

3 / 3

Total

11

/

12

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.

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