How do I install the Web Component Specialist skill?

Run npx skillmds@latest add community-access/web-component-specialist-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Web Component Specialist safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web Component Specialist?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web Component Specialist free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web Component Specialist?

Community-Access (@community-access) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Component Specialist

Name: Web Component Specialist
Rating: 4.2 (5 reviews)
Author: Community-Access

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

Community-Access Updated Sep 22, 2026

Web & Frontend

Install

Press C to copy

$ npx skillmds@latest add community-access/web-component-specialist-2

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download SKILL.md

＋ Add to plugin

README badge

[![SkillMD](https://skillmd.com/badge/community-access/web-component-specialist-2.svg)](https://skillmd.com/skills/community-access/web-component-specialist-2)

Trust & safety

Audits pending

Not yet audited · commit c14fa20

Permissions this skill uses

Documentation only
No scripts, network access, or credentials are involved.

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

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)
Form-Associated — static formAssociated = true + setFormValue()/setValidity()
Focus — delegatesFocus: true, tab order, programmatic focus
Slots — Light DOM content (ARIA-referenceable), a11y-transparent <slot>
Events — composed: true, bubbles: true for cross-boundary events

Community-Access/accessibility-agents/tree/main/.gemini/extensions/a11y-agents/skills/web-component-specialist commit c14fa2015a

Frequently asked questions

npx skillmds@latest add community-access/web-component-specialist-2