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.

68

Quality

83%

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

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.

The body is a well-structured, token-efficient overview that assumes competence, delegates code to a real one-level-deep reference, and provides specific, actionable instruction via named APIs. The main gaps are mild redundancy between Quick Reference and the Check/Fix sections and the absence of any minimal inline example.

Suggestions

Collapse the duplicate native-vs-custom guidance: keep it once (e.g., in Check, where the decision is made) and drop the restated advice in Quick Reference and Fix to save tokens.

Add a 5–10 line minimal constructor snippet in the body (attachInternals + ariaRole + formAssociated) so the core fix is executable without opening references/rule.md, and let the reference carry the full component.

Merge or cross-link the Fix and Code Review sections, which currently restate the same checklist (internals attachment, ARIA reflection, keyboard handling, form association) from two angles.

DimensionReasoningScore

Conciseness

The ~47-line body is lean and delegates implementation to references/rule.md, but there is mild redundancy: the native-control-first advice appears in both Quick Reference ("Prefer native <button>...") and Fix ("Replace the component with native HTML"), and form association is restated across Quick Reference, Fix, and Code Review. This matches 'efficient; minor instances of over-explanation that could be trimmed' rather than the lean 5.

4 / 5

Actionability

Guidance names exact APIs — "ElementInternals.ariaRole", "attachInternals" in the constructor, "formAssociated", roving tabindex, and the specific keys (Tab, Enter, Space, Arrow) — which is actionable, specific instruction. However, no inline code snippet exists (all code lives one level deeper in references/rule.md), leaving minor gaps versus fully copy-paste-ready guidance.

4 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections give a clear implicit sequence for a review task (verify native alternative first, then check, then fix, then explain). This is effectively a single-purpose review skill with an unambiguous action, but the sequence is conveyed by section roles rather than explicit steps or checkpoints — solidly between the simple-skill 5 and the checkpointed 4.

4 / 5

Progressive Disclosure

The body is under 50 lines with well-organized sections (Quick Reference, Check, Fix, Explain, Code Review) and a single clearly signaled, one-level-deep reference to references/rule.md, which exists and carries the full implementation details and code. This matches the anchor of a clear overview with a well-signaled one-level reference and easy navigation.

5 / 5

Total

17

/

20

Passed

Description

87%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 strong description: it states a precise domain, lists concrete checks, and provides an explicit 'Use when' trigger clause tied to reviewing custom element or Web Component source. Only minor synonyms (a11y, shadow DOM, screen reader) and a couple of check categories could broaden trigger coverage.

DimensionReasoningScore

Specificity

The description names concrete review actions: "check for missing ARIA reflection, keyboard handling, and form association" on "custom element class definitions or Web Component source code". It lists several specific checks with only minor coverage gaps (e.g., no mention of focus management or roving tabindex), matching the 'several specific actions' anchor rather than the comprehensive 5.

4 / 5

Completeness

Both parts are explicit: the 'what' is checking for missing ARIA reflection, keyboard handling, and form association, and the 'when' is a concrete "Use when reviewing custom element class definitions or Web Component source code" trigger clause. This matches the anchor for clearly answering both what and when with concrete trigger phrases.

5 / 5

Trigger Term Quality

Natural trigger terms include "custom element", "Web Component", "ARIA", "keyboard", and "form association" — phrases a user reviewing web component code would plausibly say. A few common synonyms are missing ("a11y", "accessibility", "shadow DOM", "screen reader"), so it does not reach the comprehensive 5.

4 / 5

Distinctiveness Conflict Risk

The niche is narrow and well-defined (custom element / Web Component accessibility via ElementInternals), with distinct trigger terms unlikely to collide with other skills' descriptions. Minimal conflict risk, matching the top anchor.

5 / 5

Total

18

/

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.