Agent-Skills.md

Agent Skills: Accessibility Audit Skill

Use PROACTIVELY when user asks for accessibility review, a11y audit, WCAG compliance check, screen reader testing, keyboard navigation validation, or color contrast analysis. Audits React/TypeScript applications for WCAG 2.2 Level AA compliance with risk-based severity scoring. Includes MUI framework awareness to avoid false positives. Not for runtime accessibility testing in production, automated remediation, or non-React frameworks.

UncategorizedID: cskiro/claudex/accessibility-audit

Repository

cskiro/claudex
cskiro
32

Install this agent skill to your local

pnpm dlx add-skill https://github.com/cskiro/claudex/tree/HEAD/plugins/accessibility-audit/skills/accessibility-audit

Skill Files

Browse the full folder contents for accessibility-audit.

Download Skill

Loading file tree…

plugins/accessibility-audit/skills/accessibility-audit/SKILL.md

Skill Metadata

Name
accessibility-audit
Description
Use PROACTIVELY when user asks for accessibility review, a11y audit, WCAG compliance check, screen reader testing, keyboard navigation validation, or color contrast analysis. Audits React/TypeScript applications for WCAG 2.2 Level AA compliance with risk-based severity scoring. Includes MUI framework awareness to avoid false positives. Not for runtime accessibility testing in production, automated remediation, or non-React frameworks.

Accessibility Audit Skill

Comprehensive WCAG 2.2 Level AA accessibility auditing for React/TypeScript applications with MUI framework awareness.

Quick Reference

| Severity | Impact | Examples | |----------|--------|----------| | Critical | Blocks access completely | Keyboard traps, missing alt on actions, no focus visible | | High | Significantly degrades UX | Poor contrast on CTAs, no skip navigation, small touch targets | | Medium | Minor usability impact | Missing autocomplete, unclear link text | | Low | Best practice enhancement | Could add tooltips, more descriptive titles |

Key Principle

Severity = Impact x Likelihood, NOT WCAG conformance level. A Level A failure can be LOW severity; a Level AA failure can be CRITICAL.

Required Tooling

# Install required tools
npm install --save-dev eslint-plugin-jsx-a11y jest-axe @axe-core/playwright

# Configure ESLint
# Add to .eslintrc: extends: ['plugin:jsx-a11y/recommended']

Workflow

| Phase | Description | |-------|-------------| | 1. Setup | Install tooling, create output directories | | 2. Static Analysis | ESLint jsx-a11y scan | | 3. Runtime Analysis | jest-axe and Playwright | | 4. Manual Validation | Keyboard, screen reader, contrast | | 5. Report Generation | JSON + Markdown outputs |

Phase 1: Setup

See workflow/setup.md for installation and configuration.

Phase 4: Manual Validation

See workflow/manual-validation.md for keyboard and screen reader testing.

Reference

Common False Positives to Avoid

| Component | Built-in Behavior | Don't Flag | |-----------|-------------------|------------| | MUI <SvgIcon> | Auto aria-hidden="true" | Icons without titleAccess | | MUI <Alert> | Default role="alert" | Missing role attribute | | MUI <Button> | 36.5px min height | Target size < 44px | | MUI <TextField> | Auto label association | Missing label | | MUI <Autocomplete> | Manages ARIA attrs | Missing aria-expanded |

Quick Audit Command

Run accessibility audit on [component/page] following WCAG 2.2 AA standards

Related Skills

  • codebase-auditor - General code quality analysis
  • bulletproof-react-auditor - React architecture review