Volver a Agent Skills
Frontend y Diseño
Auditoría de Accesibilidad (axe-core)
Auditoría automática de problemas de accesibilidad con sugerencias para mejorar la experiencia de todos los usuarios.
Claude Code Codex Copilot Cursor
Descripción General
axe-core es el motor de auditoría de accesibilidad más utilizado en la industria, capaz de detectar automáticamente problemas de WCAG 2.1 en tus componentes web. Tu agente de IA puede ejecutar auditorías, interpretar resultados y aplicar correcciones automáticas.
El agente analiza el DOM de tu aplicación buscando problemas como falta de atributos ARIA, contraste insuficiente de colores, elementos interactivos sin etiquetas accesibles y estructura de encabezados incorrecta. Para cada problema, sugiere la corrección específica según las pautas WCAG.
Esta habilidad es fundamental para garantizar que tu aplicación sea usable por todos, incluyendo personas con discapacidades visuales, motoras o cognitivas. Las auditorías automáticas se pueden integrar en el pipeline de CI para prevenir regresiones.
El agente analiza el DOM de tu aplicación buscando problemas como falta de atributos ARIA, contraste insuficiente de colores, elementos interactivos sin etiquetas accesibles y estructura de encabezados incorrecta. Para cada problema, sugiere la corrección específica según las pautas WCAG.
Esta habilidad es fundamental para garantizar que tu aplicación sea usable por todos, incluyendo personas con discapacidades visuales, motoras o cognitivas. Las auditorías automáticas se pueden integrar en el pipeline de CI para prevenir regresiones.
¿Para Quién Es?
- Desarrolladores frontend asegurando cumplimiento de WCAG 2.1
- Equipos de producto mejorando la experiencia de todos los usuarios
- Ingenieros de calidad integrando checks de accesibilidad en CI
- Empresas cumpliendo requisitos legales de accesibilidad
Instalación
Configurar Claude Code
npm install -D axe-core @axe-core/cliConfiguración
// axe.config.js
module.exports = {
rules: [
{ id: "color-contrast", enabled: true },
{ id: "label", enabled: true },
{ id: "aria-roles", enabled: true }
],
tags: ["wcag2a", "wcag2aa"]
};Skills Relacionados
Frontend y Diseño
Servidor MCP de Figma
Convierte diseños de Figma a código directamente preservando estilos y componentes del sistema de diseño.
Claude Code Cursor
Frontend y Diseño Documentación de Componentes con Storybook
Genera documentación interactiva de componentes de UI con ejemplos en vivo y casos de uso.
Claude Code Copilot Cursor
Frontend y Diseño IntelliSense de Tailwind CSS
Autocompletado inteligente de clases de Tailwind con vista previa de colores y valores mientras escribes.
Copilot Cursor Windsurf