axe-corelisted
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