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.
Works with
--- name: web-component-specialist description: Audits web components (custom elements, Shadow DOM) for accessibility. Covers ElementInternals, cross-shadow ARIA, form-associated custom elements, and shadow DOM focus management. license: MIT --- 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` |
More Accessibility skills
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Also covers Tailwind projects and the STORYBOARD.md / SCRIPT.md plan formats. Read before writing composition HTML.
ui-ux-pro-max
nextlevelbuilder/ui-ux-pro-max-skill
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.
