← ClaudeAtlas

axe-corelisted

axe-core - accessibility testing engine for automated WCAG compliance checks. USE WHEN: user mentions "axe", "automated accessibility testing", "a11y tests", asks about "integrating accessibility checks", "CI/CD accessibility", "Playwright accessibility", "Jest accessibility", "Vitest axe" DO NOT USE FOR: manual accessibility audits - use `wcag` skill instead
claude-dev-suite/claude-dev-suite · ★ 33 · AI & Automation · score 80
Install: claude install-skill claude-dev-suite/claude-dev-suite
# axe-core - Quick Reference ## When NOT to Use This Skill - **Manual WCAG compliance audits** - Use the `wcag` skill for understanding guidelines and manual testing - **Screen reader testing** - axe-core doesn't replace manual screen reader verification - **Complex ARIA pattern implementation** - Use `wcag` skill for ARIA authoring practices - **Accessibility strategy planning** - This is for test automation, not accessibility consulting > **Deep Knowledge**: Use `mcp__documentation__fetch_docs` with technology: `axe-core` for comprehensive documentation on rules, configuration, and integrations. ## Setup Base ```bash npm install -D @axe-core/react # For React npm install -D axe-core # Core library ``` ## Pattern Essenziali ### React DevTools Integration ```typescript import React from 'react'; import ReactDOM from 'react-dom/client'; if (process.env.NODE_ENV !== 'production') { import('@axe-core/react').then(axe => { axe.default(React, ReactDOM, 1000); }); } ``` ### Jest/Vitest Integration ```typescript import { axe, toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations); test('should have no accessibility violations', async () => { const { container } = render(<MyComponent />); const results = await axe(container); expect(results).toHaveNoViolations(); }); ``` ### Playwright Integration ```typescript import { test, expect } from '@playwright/test'; import AxeBuilder from '@axe-core/playwright'; test('should not have acce