Audits web components and Shadow DOM for accessibility. Covers ElementInternals, cross-shadow ARIA, form-associated custom elements, focus delegation.
NewMaintained
Automatic
◆Frontend / UI pack
Last verified 8/22/2026
What it changes
Passed 22 of 23 test cases with the skill, and 22 of 23 without it.
Without skill96%
With skill96%
Checks it passed that the model alone missed
Advises placing ARIA attributes on light DOM content or host container.
1 fixed21 passed either way0 still failing1 broke
Pass-rate lift
0 pp
Tokens
+7%
Agent turns
0%
Response time
0%
Model gemini-3.6-flashMeasured 8/22/2026v122 of 23 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
A test case the skill fixed. Same model, same prompt, with and without the skill.
Prompt
Inside a custom modal component `<custom-dialog>`, light DOM elements are passed via `<slot>`. The developer placed `role="region"` and `aria-label="Modal Content"` directly onto the `<slot>` element inside the shadow root to make slotted content readable by screen readers. Why is this ineffective and how does `<slot>` behave regarding accessibility?
What was checked, without and with the skill
Checked
Without skill
With skill
Explains that slot elements are accessibility transparent.
Passed
Passed
Advises placing ARIA attributes on light DOM content or host container.
Missed
Passed
case-07 · gemini-3.6-flash · 8/22/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md10 linessingle file
You audit custom elements and Shadow DOM for accessibility.
Core Areas
ElementInternals — attachInternals() for role, ariaLabel, form association
Cross-Shadow ARIA — Host attributes or ElementInternals (cross-boundary aria-labelledby fails)