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.
MCP get_skill({ skillId: "web-component-specialist-c4fccfa4" })Use this skill with your agent
Create a free account and connect via MCP
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 1. **ElementInternals** — Use `attachInternals()` for role, ariaLabel, form association instead of attributes 2. **Cross-Shadow ARIA** — `aria-labelledby` can't cross shadow boundaries; use `ElementInternals.ariaLabel` or host attributes 3. **Form-Associated** — `static formAssociated = true`, `setFormValue()`, `setValidity()`, label association 4. **Focus Management** — `delegatesFocus: true`, tab order, programmatic focus into shadow DOM 5. **Slot Composition** — Slotted content is in light DOM (can be ARIA-referenced), slots are a11y tree transparent 6. **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` |
Related Skills
More skills in Security & Compliance
1password
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in, and reading/injecting secrets for commands.
1password
Set up and use 1Password CLI for sign-in, desktop integration, and reading or injecting secrets.
Accessibility Lead
Accessibility team lead and orchestrator. Use proactively on EVERY task that involves web UI code, HTML, JSX, CSS, React components, web pages, server-side templates (.leaf, .ejs, .erb, .hbs), or any user-facing web content. This agent coordinates the accessibility specialist team and ensures no accessibility requirement is missed. Runs the final review before any UI code is considered complete. Applies to any web framework, server-side templating framework (Vapor/Leaf, Rails/ERB, Django/Jinja, Express/EJS), or vanilla HTML/CSS/JS. Works alongside other team leads (e.g., swift-lead) in multi-language projects.
Accessibility Regression Detector
Detects accessibility regressions by comparing audit results across commits/branches. Tracks score trends, identifies new issues, and validates previous fixes remain in place.
Accessibility Statement
Generates conformance/accessibility statements following W3C or EU model templates. Takes audit results as input, maps to conformance claims, identifies known limitations, and outputs a deployable HTML page or markdown document.
Accessibility Tool Builder
Expert in building accessibility scanning tools, rule engines, document parsers, report generators, and audit automation. WCAG criterion mapping, severity scoring, CLI/GUI scanner architecture, CI/CD integration.
Explore Other Categories
Skills from other categories with shared topics
Actions Manager
GitHub Actions command center -- view workflow runs, read logs, re-run failed jobs, manage workflows, and debug CI failures entirely from the editor. Bypasses the deeply nested, visually-dependent Actions UI that is largely inaccessible to screen readers.
Alt Text Headings
Alternative text and heading structure specialist for web applications. Use when building or reviewing any page with images, icons, SVGs, videos, figures, charts, or heading hierarchies. Covers meaningful vs decorative images, complex image descriptions, heading levels, document outline, and landmark structure. Can analyze images visually, compare existing alt text against image content, and interactively suggest appropriate alternatives. Applies to any web framework or vanilla HTML/CSS/JS.
Analytics
Your GitHub analytics command center -- team velocity, review turnaround, issue resolution metrics, contribution activity, bottleneck detection, and code churn analysis with dual markdown + HTML reports.