Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Web Component Accessibility Specialist · community-access | DecimalAI

community-access/web-component-specialist

SkillScore86Maintained

Audits web components (custom elements, Shadow DOM) for accessibility. Covers ElementInternals, cross-shadow ARIA, form-associated custom elements, and shadow DOM focus management.

Frontendby community-access

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/community-access-web-component-specialist/SKILL.md

decimalai skills pull community-access-web-component-specialist --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/community-access-web-component-specialist/SKILL.md https://app.decimal.ai/s/community-access-web-component-specialist/SKILL.md

Raw file: /s/community-access-web-component-specialist/SKILL.md ↗ · machine-readable summary at /s/community-access-web-component-specialist.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 7d ago

Yes — +9% lift+6% tokens0% turns86% of whole cases pass with skill (19/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-02	✗→✓	▲ Improved	-18%	0%
case-10	✗→✓	▲ Improved	12%	0%
case-03	✓→✓	＝ Same ✓	28%	0%
case-04	✓→✓	＝ Same ✓	21%	0%
case-05	✓→✓	＝ Same ✓	8%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

community-access / accessibility-agents

codex-skills/web-component-specialist/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

Skill contents

SKILL.md

Derived from .claude/agents/web-component-specialist.md. Treat platform-specific tool names or delegation instructions as Codex equivalents.

Web Component Accessibility Specialist

You audit custom elements and Shadow DOM for accessibility. Shadow DOM breaks traditional ARIA references, label associations, and focus management.

Core Audit Areas

ElementInternals — Use attachInternals() for role, ariaLabel, form association instead of attributes
Cross-Shadow ARIA — aria-labelledby can't cross shadow boundaries; use ElementInternals.ariaLabel or host attributes
Form-Associated — static formAssociated = true, setFormValue(), setValidity(), label association
Focus Management — delegatesFocus: true, tab order, programmatic focus into shadow DOM
Slot Composition — Slotted content is in light DOM (can be ARIA-referenced), slots are a11y tree transparent
Event Retargeting — composed: true, bubbles: true for custom events crossing shadow boundary

Common Issues

| 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 |

Want to see if community-access/web-component-specialist would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/22/2026, 16:06 UTC · 22 cases

Lift

+9%

86% vs 77%

Agent turns

1.0 vs 1.0

Tokens

+6%

2,049.27 vs 1,931.5

fail → pass · 2pass → pass · 17fail → fail · 3

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I created a custom input web component using Shadow DOM, but screen readers are failing to announce the field labels when the element is used inside standard HTML forms. Could you review my component code and provide a comprehensive accessibility audit report along with the necessary code updates to fix screen reader and form integration issues?	fail→fail	23,321	15,053	-35%	1	1	0%	4,455	3,230	-27%	0	0	—
case-02 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.	fail→pass	26,145	19,942	-24%	1	1	0%	4,693	3,833	-18%	0	0	—
case-03 I am building a standard HTML light DOM card component with a heading <h3> and a paragraph of text. I want the card container <section> to be announced with the heading text as its accessible name. How should I establish this accessible relationship using standard ARIA attributes in light DOM HTML?	pass→pass	5,657	5,556	-2%	1	1	0%	985	1,264	+28%	0	0	—
case-04 We have a web component using Shadow DOM and want to allow parent page CSS variables to style internal components while keeping CSS class names scoped. How does CSS custom property inheritance work across Shadow DOM boundaries?	pass→pass	12,778	13,287	+4%	1	1	0%	2,092	2,522	+21%	0	0	—
case-05 In our React 18 application, when a dropdown menu opens, we need to programmatically move focus to the first item using a React ref. How should focus be managed using useRef and useEffect in standard React components?	pass→pass	13,369	12,341	-8%	1	1	0%	2,410	2,605	+8%	0	0	—
case-06 We are developing a custom <range-slider> web component that needs to report custom validation errors like 'Value out of range' to standard HTML <form> submission handlers. Developers currently try to validate by inspecting custom attributes. What native browser API mechanism allows custom elements to integrate directly into form validation?	pass→pass	7,853	8,928	+14%	1	1	0%	1,451	1,991	+37%	0	0	—
case-07 A developer is attempting to associate a standard <label for='my-field'> in the light DOM with an <input> inside the custom element's shadow root. The browser console shows the label click does not focus the input. What is the fundamental platform limitation here and how should cross-boundary accessibility be structured?	fail→fail	15,861	11,504	-27%	1	1	0%	2,570	2,387	-7%	0	0	—
case-08 When creating a custom button web component (<fancy-button>), developers often write this.setAttribute('role', 'button') inside connectedCallback. Is this the recommended pattern for assigning roles to custom elements, or is there a cleaner modern platform approach that prevents host DOM clutter?	pass→pass	11,392	11,042	-3%	1	1	0%	1,950	2,156	+11%	0	0	—
case-09 Our custom UI tab component fires a tab-change event when a user clicks a tab inside the shadow DOM. However, event listeners attached to <my-tabs> in the main page document never receive the event. What event initialization flags must be set when dispatching custom events across shadow DOM boundaries?	pass→pass	6,898	6,399	-7%	1	1	0%	1,239	1,371	+11%	0	0	—
case-10 We have a custom card element where a title is passed into a <slot name='title'></slot>. Inside the shadow root, we want an action button to be labeled by that slotted title. How are slotted elements represented in the accessibility tree and how can ARIA reference them?	fail→pass	12,619	13,549	+7%	1	1	0%	2,431	2,713	+12%	0	0	—
case-11 When users click on whitespace inside our custom text-editor web component's shadow DOM container, focus remains on document.body instead of moving to the inner editable element. How should the shadow root be configured during creation to ensure focus automatically delegates to focusable shadow descendants?	pass→pass	8,843	6,577	-26%	1	1	0%	1,538	1,441	-6%	0	0	—
case-12 Our custom rating control <star-rating> component displays 5 stars in shadow DOM. When placed inside a <form>, submitting the form submits nothing for <star-rating>. How should the element send its numeric rating value during standard HTML form submission?	pass→pass	11,623	11,193	-4%	1	1	0%	2,171	2,363	+9%	0	0	—
case-13 When an HTML form containing our custom text input <custom-input disabled> is submitted or reset, the host element receives the disabled attribute, but internal shadow DOM styles and form behavior don't react natively. What ElementInternals lifecycle callback or form integration mechanism handles form-disabled state changes?	pass→pass	10,394	6,560	-37%	1	1	0%	1,938	1,540	-21%	0	0	—
case-14 When a user clicks a standard <button type='reset'> inside an HTML form, our custom <color-picker> web component retains its modified color state. What custom element lifecycle callback must be declared to respond to parent form resets?	pass→pass	3,698	8,019	+117%	1	1	0%	664	1,096	+65%	0	0	—
case-15 Developers are currently adding this.setAttribute('aria-expanded', 'true') to custom disclosure elements (<custom-accordion>). What property on ElementInternals should be updated instead to reflect expanded state without polluting host DOM attributes?	pass→pass	4,086	4,689	+15%	1	1	0%	673	1,099	+63%	0	0	—
case-16 When calling .focus() on a custom element host from external JavaScript, focus highlights the outer host border rather than the internal <input> inside shadow DOM. How does delegatesFocus: true alter the behavior of programmatic .focus() calls?	pass→pass	10,018	11,247	+12%	1	1	0%	1,720	2,181	+27%	0	0	—
case-17 We have a tooltip web component in the shadow DOM, and we want an input in the main page document to use aria-describedby pointing to the internal tooltip text element's ID. Why does screen reader testing fail to read the description, and what is the proper fix?	fail→fail	15,005	14,371	-4%	1	1	0%	2,428	2,669	+10%	0	0	—
case-18 We are building a custom checkbox element (<custom-checkbox>) using Shadow DOM. We need screen readers to announce it as a checkbox with state 'checked' or 'unchecked'. How should the role and checked state be declared using modern Web Component APIs?	pass→pass	13,280	11,987	-10%	1	1	0%	2,409	2,616	+9%	0	0	—
case-19 In a custom shadow root toolbar containing multiple buttons, developers manually set tabindex='0' on every button, causing keyboard users to tab through every item sequentially rather than treating the toolbar as a single tab stop. What focus pattern combined with delegatesFocus should be used for composite widgets in Shadow DOM?	pass→pass	8,451	10,996	+30%	1	1	0%	1,425	2,410	+69%	0	0	—
case-20 For a custom progress bar custom element <custom-progress>, developers want to update its numeric progress state for screen readers without writing setAttribute('aria-valuenow', val) on the host. Which ElementInternals property manages this screen reader value?	pass→pass	5,501	4,233	-23%	1	1	0%	949	1,132	+19%	0	0	—
case-21 When a user renavigates or browser autocompletes a form containing our custom component, the browser attempts to restore saved form state. Which custom element lifecycle hook handles state restoration for form-associated custom elements?	pass→pass	4,882	4,859	-0%	1	1	0%	755	1,104	+46%	0	0	—
case-22 When an event originates inside a Shadow DOM element and bubbles up to the light DOM, event handlers on light DOM nodes see event.target as the host element rather than the inner shadow DOM <button>. What is this browser mechanism called, and how does composedPath() interact with it?	pass→pass	8,784	6,110	-30%	1	1	0%	1,547	1,361	-12%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +9 percentage points is the difference between those two pass rates over the 22 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 77.3%
Pass rate with the skill: 86.4%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/22/2026, 16:06 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-02

Prompt

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.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run86

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+17% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 6 days ago

Other measured skills in the registry, with their headline benchmark lift.