Volver a Agent Skills
Frontend y Diseño
Accessibility Audit (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"]
};Explora herramientas de IA
Las mejores herramientas de IA que complementan tus habilidades
Lee artículos sobre IA y diseño
Consejos y tendencias en el mundo del diseño y la IA
Skills Relacionados
Frontend y Diseño
Figma MCP Server
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 Storybook Component Docs
Genera documentación interactiva de componentes de UI con ejemplos en vivo y casos de uso.
Claude Code Copilot Cursor
Frontend y Diseño Tailwind CSS IntelliSense
Autocompletado inteligente de clases de Tailwind con vista previa de colores y valores mientras escribes.
Copilot Cursor Windsurf