SKILL

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.

Published by @Community-Access·from Community-Access/accessibility-agents·0 agent reads / 30d·0 saves·

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

IssueFix
Cross-shadow aria-labelledbyElementInternals.ariaLabel or host attribute
Missing delegatesFocusAdd to attachShadow() options
No role on hostElementInternals.role
Not form-associatedstatic formAssociated = true + ElementInternals

More on the bench

SKILL▲0

Fixing Metadata

Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that need correct meta tags.

ibelick
ux-product-design+1
⊙ 29
SKILL▲0

Pptx Slide Auditor

Audit a PowerPoint presentation for layout issues, text overflow, visual hierarchy problems, and consistency gaps. Use when asked to review a slide deck, check a presentation before a meeting, audit slides for layout problems, or QA a deck before sharing. Produces a slide-by-slide report with issues ranked by severity and specific fixes. Best used with Claude Opus 4.7 or newer for reliable slide-level vision analysis.

Mohit Aggarwal
product-management+1
⊙ 3
SKILL▲0

Design Critique

Gives structured, constructive feedback on any design using UX frameworks. Use when asked to critique a design, review a UI, give feedback on a Figma file or wireframe, assess a user flow, or evaluate a design against UX principles. Applies Jobs-to-be-Done, Gestalt principles, and usability heuristics to give actionable feedback with prioritised issues and specific recommendations.

Mohit Aggarwal
ux-product-design+1
⊙ 2