Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →community-access/web-component-specialist
Audits web components (custom elements, Shadow DOM) for accessibility. Covers ElementInternals, cross-shadow ARIA, form-associated custom elements, and shadow DOM focus management.
Passed 19 of 22 test cases with the skill, and 17 of 22 without it.
2 fixed17 passed either way3 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Our team built a custom modal dialog using Web Components and Shadow DOM, but keyboard users are getting stuck and focus isn't transferring properly into the panel when opened. Please evaluate our custom element's shadow root architecture and outline the accessibility defects along with exact refactoring instructions.
| Checked | Without skill | With skill |
|---|---|---|
| Directs passing delegatesFocus: true in the attachShadow options. | Missed | Passed |
| Advises setting the host role using the role property of attachInternals(). | Missed | Passed |
The instructions your model reads when the skill loads.
You audit custom elements and Shadow DOM for accessibility. Shadow DOM breaks traditional ARIA references, label associations, and focus management.
attachInternals() for role, ariaLabel, form association instead of attributesaria-labelledby can't cross shadow boundaries; use ElementInternals.ariaLabel or host attributesstatic formAssociated = true, setFormValue(), setValidity(), label associationdelegatesFocus: true, tab order, programmatic focus into shadow DOMcomposed: true, bubbles: true for custom events crossing shadow boundaryEach issue, with its fix.
| Issue | Fix |
|---|---|
Cross-shadow aria-labelledby | ElementInternals.ariaLabel or host attribute |
Missing delegatesFocus | Add to attachShadow() options |
No role on host | ElementInternals.role |
| Not form-associated | static formAssociated = true + ElementInternals |
Return only JSON matching skills/a11y-core/schemas/findings.schema.json.
No prose, no summary, no restated instructions. One object, one array of findings.
Shared rules, dispatch contract and schemas: skills/a11y-core/SKILL.md.
Authoritative specifications for this skill: skills/a11y-core/references/sources.md.
test cases passed, vs 17 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.