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.

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

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, concise overview that appropriately delegates detail to references/rule.md and gives concrete, API-named review and fix guidance. The main gap is the absence of inline code examples and an extra verification checkpoint, which keep actionability and workflow clarity at 4.

Suggestions

Add one short inline ElementInternals code snippet in the Fix section (constructor attachInternals + ariaRole/ariaLabel reflection) to lift actionability to fully executable.

Add an explicit verification checkpoint after the Fix steps (e.g., re-run the Check list or confirm the element now exposes correct ARIA) to strengthen the review workflow.

Tighten the opening paragraph to remove the screen-reader rationale Claude already infers, pushing conciseness to the 5-anchor.

Dimension	Reasoning	Score
Conciseness	The body is lean and assumes Claude's knowledge of ElementInternals, ARIA, and shadow DOM; the only mild over-explanation is the opening paragraph restating the screen-reader rationale, keeping it just below the 5-anchor.	4 / 5
Actionability	Concrete directive guidance names specific APIs ("ElementInternals attachment in the constructor", "ariaRole and ariaLabel reflection", "formAssociated", "roving tabindex") with clear review targets; it is instruction-only so absence of code is not penalized, but lacks copy-paste examples that would reach the 5-anchor.	4 / 5
Workflow Clarity	Check/Fix/Explain/Code Review sections form a coherent review sequence with one explicit checkpoint ("First verify that the widget truly needs to be custom rather than a native control with styling"); this is a read-only review skill so the destructive/batch validation cap does not apply, but an additional verification checkpoint would reach 5.	4 / 5
Progressive Disclosure	The body is a concise overview that defers full implementation details, code examples, and framework-specific guidance to a single well-signaled one-level-deep reference ("see `references/rule.md`"), and the referenced file exists in the bundle, matching the 5-anchor.	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.

The description is well-crafted: it states a precise domain, lists concrete accessibility checks, and provides an explicit 'Use when...' trigger covering both custom elements and Web Components. Minor specificity gaps prevent a perfect specificity score, but completeness and distinctiveness are strong.

Dimension	Reasoning	Score
Specificity	Names the domain ("custom element class definitions or Web Component source code") and three concrete checks ("missing ARIA reflection, keyboard handling, and form association"), matching the several-specific-actions anchor with minor coverage gaps rather than the comprehensive 5-anchor.	4 / 5
Completeness	Explicitly answers what ("check for missing ARIA reflection, keyboard handling, and form association") and when ("Use when reviewing custom element class definitions or Web Component source code") with concrete trigger phrases, matching the 5-anchor.	5 / 5
Trigger Term Quality	Includes natural review-time phrases ("reviewing custom element class definitions", "Web Component source code", "ARIA reflection", "keyboard handling", "form association") with good synonym coverage of custom elements/Web Components, but lacks a few common variations users might say.	4 / 5
Distinctiveness Conflict Risk	Occupies a clear niche (custom element accessibility) with distinct triggers unlikely to fire for unrelated skills, matching the minimal-conflict-risk 5-anchor.	5 / 5
	Total	18 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: thedaviddias/Front-End-Checklist
Path: skills/custom-element-accessibility/SKILL.md
Commit: 30756a7

Reviewed: 28 days ago

Table of Contents

Discovery Implementation Validation

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.