Agent skill
accessibility-audit
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.
Install this agent skill to your Project
npx add-skill https://github.com/cskiro/claudex/tree/main/plugins/accessibility-audit/skills/accessibility-audit
SKILL.md
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
- Severity Rubric - Impact x Likelihood calculation
- MUI Framework Awareness - Built-in accessibility features
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 analysisbulletproof-react-auditor- React architecture review
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
cskiro/claudex
e2e-testing
Use PROACTIVELY when setting up end-to-end testing, debugging UI issues, creating visual regression suites, or automating browser testing. Uses Playwright with LLM-powered visual analysis, screenshot capture, and fix recommendations. Zero-setup for React, Next.js, Vue, Node.js, and static sites. Not for unit testing, API-only testing, or mobile native apps.
cskiro/claudex
github-repo-setup
Use PROACTIVELY when user needs to create a new GitHub repository or set up a project with best practices. Automates repository creation with four modes - quick public repos (~30s), enterprise-grade with security and CI/CD (~120s), open-source community standards (~90s), and private team collaboration with governance (~90s). Not for existing repo configuration or GitHub Actions workflow debugging.
cskiro/claudex
sub-agent-creator
Use PROACTIVELY when creating specialized Claude Code sub-agents for task delegation. Automates agent creation following Anthropic's official patterns with proper frontmatter, tool configuration, and system prompts. Generates domain-specific agents, proactive auto-triggering agents, and security-sensitive agents with limited tools. Not for modifying existing agents or general prompt engineering.
cskiro/claudex
otel-monitoring-setup
Use PROACTIVELY when setting up OpenTelemetry monitoring for Claude Code usage tracking, cost analysis, or productivity metrics. Provides local PoC mode (full Docker stack with Grafana) and enterprise mode (centralized infrastructure). Configures telemetry collection, imports dashboards, and verifies data flow. Not for non-Claude telemetry or custom metric definitions.
cskiro/claudex
json-outputs-implementer
Use PROACTIVELY when extracting structured data from text/images, classifying content, or formatting API responses with guaranteed schema compliance. Implements Anthropic's JSON outputs mode with Pydantic/Zod SDK integration. Covers schema design, validation, testing, and production optimization. Not for tool parameter validation or agentic workflows (use strict-tool-implementer instead).
cskiro/claudex
mutation-testing
Use PROACTIVELY when checking if tests catch real bugs, assessing test suite quality, finding weak tests, or measuring mutation score. Validates test effectiveness beyond coverage metrics by introducing code mutations. Supports Stryker (JS/TS), PIT (Java), mutmut (Python). Not for projects without existing test suites.
Didn't find tool you were looking for?