Skills de Addyosmani

Auditar y mejorar la accesibilidad web siguiendo las pautas WCAG 2.2. Úsalo cuando se te pida "mejorar la accesibilidad", "auditoría a11y", "cumplimiento WCAG", "compatibilidad con lectores de pantalla", "navegación por teclado" o "hacer accesible".

Guía el diseño estable de APIs e interfaces. Úsalo al diseñar APIs, límites de módulos o cualquier interfaz pública. Úsalo al crear endpoints REST o GraphQL, definir contratos de tipos entre módulos, o establecer límites entre frontend y backend.

Aplicar las mejores prácticas modernas de desarrollo web para seguridad, compatibilidad y calidad de código. Usar cuando se solicite "aplicar mejores prácticas", "auditoría de seguridad", "modernizar código", "revisión de calidad de código" o "verificar vulnerabilidades".

Pruebas en navegadores reales a través de Chrome DevTools MCP. Úsalo al construir o depurar cualquier cosa que se ejecute en un navegador. Úsalo cuando necesites inspeccionar el DOM, capturar errores de consola, analizar solicitudes de red, perfilar el rendimiento o verificar la salida visual con datos de ejecución reales. Requiere que el servidor MCP chrome-devtools esté configurado.

Automatiza la configuración de pipelines de CI/CD. Úsalo al configurar o modificar pipelines de compilación y despliegue. Úsalo cuando necesites automatizar puertas de calidad, configurar ejecutores de pruebas en CI o establecer estrategias de despliegue.

Realiza una revisión de código en múltiples ejes. Úsalo antes de fusionar cualquier cambio. Úsalo al revisar código escrito por ti mismo, otro agente o un humano. Úsalo cuando necesites evaluar la calidad del código en múltiples dimensiones antes de que ingrese a la rama principal.

Simplifica el código para mayor claridad. Úsalo al refactorizar código para mejorar su claridad sin cambiar su comportamiento. Úsalo cuando el código funcione pero sea más difícil de leer, mantener o extender de lo que debería. Úsalo al revisar código que ha acumulado complejidad innecesaria.

Optimiza la configuración del contexto del agente. Úsalo al iniciar una nueva sesión, cuando la calidad de la salida del agente se degrade, al cambiar entre tareas, o cuando necesites configurar archivos de reglas y contexto para un proyecto.

Optimiza Core Web Vitals (LCP, INP, CLS) para mejorar la experiencia de página y el ranking en buscadores. Úsalo cuando te pidan "mejorar Core Web Vitals", "arreglar LCP", "reducir CLS", "optimizar INP", "optimización de experiencia de página" o "arreglar cambios de diseño".

Guía la depuración sistemática de causa raíz. Úsalo cuando fallen las pruebas, se rompan las compilaciones, el comportamiento no coincida con lo esperado o encuentres cualquier error inesperado. Úsalo cuando necesites un enfoque sistemático para encontrar y corregir la causa raíz en lugar de adivinar.

Gestiona la obsolescencia y la migración. Úselo al eliminar sistemas, API o funciones antiguas. Úselo al migrar usuarios de una implementación a otra. Úselo al decidir si mantener o retirar código existente.

Registra decisiones y documentación. Úsalo al tomar decisiones arquitectónicas, cambiar APIs públicas, lanzar funcionalidades o cuando necesites registrar contexto que futuros ingenieros y agentes necesitarán para entender el código base.

Somete cada decisión no trivial a una revisión adversarial con contexto nuevo antes de que se confirme. Úsalo cuando la corrección importe más que la velocidad, cuando trabajes en código desconocido, cuando haya mucho en juego (producción, lógica sensible a la seguridad, operaciones irreversibles), o cada vez que una salida segura sea más barata de verificar ahora que de depurar después.

Construye interfaces de usuario accesibles, responsivas y de calidad de producción. Úsalo al construir o modificar interfaces y páginas, crear componentes, implementar diseños, cumplir con los requisitos de accesibilidad WCAG, gestionar estado, o cuando el resultado deba verse y sentirse como de calidad de producción en lugar de generado por IA.

Estructura las prácticas de flujo de trabajo de git. Úsalo al realizar cualquier cambio de código. Úsalo al hacer commits, ramificar, resolver conflictos o cuando necesites organizar el trabajo en múltiples flujos paralelos. Úsalo al preparar un lanzamiento, elegir un incremento de versión semántica, etiquetar o escribir un registro de cambios.

Refina ideas en bruto para convertirlas en conceptos nítidos y accionables mediante pensamiento divergente y convergente estructurado. Úsalo cuando una idea aún sea vaga, cuando necesites poner a prueba supuestos antes de comprometerte con un plan, o cuando quieras expandir opciones antes de converger en una. Se activa con "idear", "refinar esta idea" o "poner a prueba mi plan".

Entrega los cambios de forma incremental. Úsalo al implementar cualquier funcionalidad o cambio que afecte a más de un archivo. Úsalo cuando estés a punto de escribir una gran cantidad de código de una sola vez, o cuando una tarea parezca demasiado grande para completarla en un solo paso.

Extrae lo que el usuario realmente quiere en lugar de lo que cree que debería querer. Lo logra mediante una pregunta a la vez hasta alcanzar aproximadamente un 95% de confianza sobre la intención subyacente. Úsalo cuando una solicitud esté poco especificada ("construye X" sin "para quién" o "por qué ahora"), cuando el usuario lo invoque explícitamente ("entrevístame", "interrógame", "¿estamos seguros?", "pon a prueba mi pensamiento"), o cuando te sorprendas llenando en silencio requisitos ambiguos antes de que exista cualquier plan, especificación o código.

Instrumenta el código para que el comportamiento en producción sea visible y diagnosticable. Úsalo al agregar registro, métricas, trazado o alertas. Úsalo al implementar cualquier funcionalidad que se ejecute en producción y necesites evidencia de que funciona. Úsalo cuando se reporten problemas en producción pero no puedas determinar qué sucedió a partir de los datos disponibles.

Optimizar el rendimiento web para una carga más rápida y una mejor experiencia de usuario. Usar cuando se solicite "acelerar mi sitio", "optimizar el rendimiento", "reducir el tiempo de carga", "arreglar carga lenta", "mejorar la velocidad de la página" o "auditoría de rendimiento".

Optimiza el rendimiento de aplicaciones en frontend, backend, consultas y bases de datos. Úsalo cuando existan requisitos de rendimiento, cuando sospeches regresiones de rendimiento, cuando sea necesario mejorar Core Web Vitals o tiempos de carga, cuando se necesiten corregir patrones de consultas N+1, o cuando la creación de perfiles revele cuellos de botella.

Divide el trabajo en tareas ordenadas. Úsalo cuando tengas una especificación o requisitos claros y necesites dividir el trabajo en tareas implementables. Úsalo cuando una tarea parezca demasiado grande para comenzar, cuando necesites estimar el alcance o cuando sea posible el trabajo en paralelo.

Endurece el código contra vulnerabilidades. Úsalo al manejar entrada de usuario, autenticación, almacenamiento de datos o integraciones externas. Úsalo al construir cualquier funcionalidad que acepte datos no confiables, gestione sesiones de usuario o interactúe con servicios de terceros.

Optimizar para la visibilidad y el posicionamiento en motores de búsqueda. Úsalo cuando se te pida "mejorar el SEO", "optimizar para búsqueda", "arreglar metaetiquetas", "agregar datos estructurados", "optimización de sitemap" o "optimización para motores de búsqueda".

Prepara lanzamientos a producción. Úsalo al preparar un despliegue a producción. Úsalo cuando necesites una lista de verificación previa al lanzamiento, al configurar monitoreo, al planificar un despliegue por fases, o cuando necesites una estrategia de reversión.

Fundamenta cada decisión de implementación en la documentación oficial. Úsalo cuando quieras código autorizado y con citas de fuentes, libre de patrones obsoletos. Úsalo al construir con cualquier framework o biblioteca donde la corrección sea importante.

Crea especificaciones antes de codificar. Úsalo al iniciar un nuevo proyecto, funcionalidad o cambio significativo cuando aún no exista una especificación. Úsalo cuando los requisitos no estén claros, sean ambiguos o solo existan como una idea vaga.

Impulsa el desarrollo con pruebas. Úsalo al implementar cualquier lógica, corregir cualquier error o cambiar cualquier comportamiento. Úsalo cuando necesites demostrar que el código funciona, cuando llegue un reporte de error o cuando estés a punto de modificar funcionalidad existente.

Descubre e invoca habilidades de agente. Úsalo al iniciar una sesión o cuando necesites descubrir qué habilidad aplica a la tarea actual. Esta es la meta-habilidad que rige cómo se descubren e invocan todas las demás habilidades.

Auditoría integral de calidad web que cubre rendimiento, accesibilidad, SEO y mejores prácticas. Úsalo cuando te pidan "auditar mi sitio", "revisar la calidad web", "ejecutar auditoría Lighthouse", "verificar la calidad de la página" o "optimizar mi sitio web".