Cómo un bot de revisión de Modern Web Guidance ayuda a MetaMask a lanzar una IU accesible y moderna

Gilberto Cocchi

Rick Viscomi

Publicado: 10 de noviembre de 2026

MetaMask es una plataforma financiera de autocustodia con más de 100 millones de descargas en aproximadamente 190 países. Su extensión de navegador se desarrolla de forma abierta, por lo que recibe un flujo constante de solicitudes de extracción de colaboradores internos y externos.

El ingeniero de UX de MetaMask, Francis Nepomuceno, revisó muchas de esas solicitudes de extracción y quería una forma coherente de ayudar a los colaboradores a aplicar las prácticas recomendadas de accesibilidad y usar las funciones web modernas. En su editor, ya usó la Guía web moderna de Chrome, un conjunto de habilidades que aporta las prácticas recomendadas de la plataforma web y los datos de compatibilidad del navegador a los agentes de programación. Para brindar la misma orientación a otros colaboradores, configuró un bot que revisa cada solicitud de extracción en el repositorio de código abierto de MetaMask, independientemente de las herramientas que haya usado su autor.

El desafío: Mantenerse al día con las funciones web modernas

HTML y CSS modernos siguen agregando funciones que mejoran la accesibilidad y la experiencia del usuario, y es difícil hacer un seguimiento de cuáles funcionan en todos los navegadores. Con muchos colaboradores, ese conocimiento debe llegar a todos los que abren una solicitud de extracción.

La seguridad agrega otro motivo para preocuparse: MetaMask coloca en una zona de pruebas cada dependencia de terceros de forma predeterminada, lo que hace que una función nativa del navegador sea más económica de adoptar que una alternativa de biblioteca. Como dijo Nepomuceno, "tener acceso a estas APIs modernas, como poder usar diálogos y menús desplegables sin JavaScript, fue una gran victoria".

La solución: Modern Web Guidance revisa cada solicitud de extracción

El 16 de septiembre de 2026, una solicitud de extracción a MetaMask/metamask-extension agregó una página de "Cómo funciona" con una sección de preguntas frecuentes compilada de la forma en que se compilan la mayoría de las preguntas frecuentes de React:

// Before: Custom React state (removes content from DOM)
const [expanded, setExpanded] = useState(false);
<button type="button" aria-expanded={expanded} onClick={() => setExpanded(c => !c)}>
  <Text>{question}</Text>
</button>
{expanded ? <Text>{answer}</Text> : null}

Unos cinco minutos después, el bot agregó un comentario. Citando la guía de search-hidden-content, se hicieron tres observaciones:

• Renderizar cada respuesta de forma condicional la quita del DOM, por lo que el texto contraído no se puede encontrar con la función de búsqueda en la página del navegador y es más difícil de descubrir para la tecnología de accesibilidad.
• Una divulgación nativa de <details>/<summary> (Baseline desde 2020) mantiene el contenido en el DOM con la semántica correcta. En el caso de los paneles mutuamente excluyentes, un atributo name compartido (disponible recientemente en Baseline desde 2024) cierra los demás automáticamente. En el caso de las preguntas frecuentes de apertura múltiple, omítelo.
• Si el equipo prefiere su componente Disclosure existente, al menos debe mantener las respuestas en el DOM con hidden="until-found" y un objeto de escucha beforematch que sincronice aria-expanded y el estado del ícono.

// After: Native <details> / <summary> disclosure (findable with find-in-page)
<details>
  <summary>
    <Text>{question}</Text>
  </summary>
  <Text>{answer}</Text>
</details>

Trece minutos después, el autor envió una corrección. El componente se convirtió en una divulgación nativa de <details>/<summary>, las respuestas contraídas permanecieron en el DOM para la búsqueda en la página y dos botones de navegación se convirtieron en vínculos.

Ese bot es una automatización de Cursor que ejecuta Modern Web Guidance, y Nepomuceno lo configuró con una instrucción de tres líneas. Para el 21 de octubre de 2026, cinco semanas después:

• El bot se había ejecutado en aproximadamente 480 solicitudes de extracción y había comentado en 64 de ellas (57 solicitudes de extracción de funciones y correcciones, más 7 solicitudes de extracción de lanzamiento y sincronización automatizadas) de 26 autores.
• En las solicitudes de extracción de funciones y correcciones, los ingenieros corrigieron 43 de sus hallazgos y corrigieron parcialmente 3 más, en 22 solicitudes de extracción.
• Los ingenieros actuaron con rapidez: de las 38 correcciones con una confirmación identificable, 19 se aplicaron en un plazo de 15 minutos y 26 en una hora, con una mediana de 15.2 minutos desde el comentario hasta la corrección.

Aquí te mostramos cómo MetaMask configuró el bot, qué detectó y dónde generó ruido.

La configuración es un mensaje de tres líneas

Cuando se le preguntó cómo se configura la automatización, Nepomuceno respondió: "Claro, no hay nada especial en nuestra configuración. Solo lo mantenemos conciso y acotado". La instrucción completa:

- Run /modern-web-guidance for any client-facing changes
- Run /chrome-extensions for any relevant extension changes
- Comment on the PR only when there are issues to address. Keep the comment focused on actionable items

Cómo se comporta en la práctica:

• Es consultivo: En sus primeros dos días, el bot publicó revisiones de "solicitud de cambios" (y una aprobación), que los autores descartaron una vez que las abordaron; desde el 18 de septiembre, cada revisión ha sido un comentario. No bloquea una combinación, por lo que los autores mantienen la decisión final sobre cada sugerencia.
• Cita guías y archivos específicos en el repositorio: En las 64 solicitudes de extracción en las que comentó, el bot planteó 122 hallazgos. De las 102 solicitudes de extracción de funciones y correcciones, 63 nombran la guía específica de Modern Web Guidance que aplican, como search-hidden-content, state-aware-sticky-headers o sms-otp-form, y apuntan a un archivo existente en el repositorio cuando ya usa el patrón recomendado.
• Permanece inactivo, a menos que una solicitud de extracción afecte la IU: De las aproximadamente 480 solicitudes de extracción en esas cinco semanas, al menos 100 afectaron la IU o el código del cliente, y el bot promedió alrededor de dos hallazgos por solicitud de extracción que comentó. Los equipos con repositorios principalmente de frontend pueden esperar que comente en una parte más grande.

La instrucción en sí funciona con cualquier ejecutor de agentes. Modern Web Guidance se instala como una habilidad o un complemento para Cursor, Claude Code, Codex, GitHub Copilot, Antigravity y otros agentes de programación. Cuando un agente ejecuta la habilidad, busca las guías coincidentes en un índice local sin necesidad de claves de API y verifica la diferencia con ellas, usando el modelo que ya proporciona el ejecutor de agentes del equipo.

Qué detectó Modern Web Guidance que los linters no detectaron

Un linter estático puede marcar un atributo faltante en un solo elemento, pero los hallazgos que siguen se redujeron al comportamiento de interacción, la semántica de HTML y cómo encajan los componentes en los archivos.

Un campo de comisión por transacción que parecía editable, pero que ignoraba la entrada de forma silenciosa

En la configuración avanzada de la comisión por transacción de MetaMask, el campo de límite de gas (que limita la comisión de red que puede consumir una transacción) parecía editable, pero ignoraba de forma silenciosa la entrada de los usuarios. Esto ocurría cuando aún se estaba cargando una estimación de la tarifa o cuando se producía un error. Mientras tanto, el botón Guardar estaba inhabilitado, sin ninguna explicación que la tecnología de accesibilidad pudiera leer.

Citando la guía de formularios, el bot marcó tres correcciones:

• Inhabilitar el campo de límite de gas cuando no haya una estimación disponible y conectar su texto de estado visible al campo para que la tecnología de accesibilidad lea la explicación
• Conecta el botón Save inhabilitado a ese mismo texto de estado para que los lectores de pantalla sepan por qué está inhabilitado.
• Cambia el campo a un modo de entrada numérico para que los usuarios de dispositivos móviles obtengan un teclado numérico.

El autor aplicó las tres correcciones en ambos modales de configuración y las consolidó en un solo componente.

Botones de banner que ocultaban sus URLs

En un banner de estado de una de las funciones de trading de MetaMask, las acciones intercaladas "Preguntas frecuentes" y "Comunicarse con el equipo de asistencia de MetaMask" se crearon como botones que abrían una pestaña nueva con JavaScript, en lugar de como vínculos. En tres minutos, el bot, que cita las guías de HTML y accesibilidad, marcó que los lectores de pantalla los anuncian como botones y que los usuarios pierden las affordances de los vínculos, como copiar la URL o abrirla en una pestaña nueva desde el menú contextual. También indicó un componente de banner existente en la base de código de MetaMask que ya renderiza estas acciones como vínculos reales.

Doce minutos después, el autor cambió ambas acciones a vínculos. "Me parece muy útil que, una vez que se adopta una orientación, las revisiones futuras la mencionen como un ejemplo de referencia", dijo Nepomuceno.

Entradas de verificación cuyas etiquetas se encontraban en otro lugar

La capacidad del bot para leer varios archivos también dio sus frutos en un formulario de varios pasos. Un linter estático solo ve un campo de texto con texto de marcador de posición dentro de cada paso y no puede determinar que el encabezado y las instrucciones visibles se encuentran en un componente de diseño de nivel superior. Con citas de las guías de formularios y accesibilidad, el bot detectó que el marcador de posición era la única etiqueta del campo, que el título del paso y las instrucciones del diseño de nivel superior no estaban asociados con la entrada, y que los mensajes de error y de "código reenviado" no se anunciaban a los lectores de pantalla. Quince minutos después, se corrigieron los tres, y ese cableado de accesibilidad se mantuvo intacto cuando una solicitud de extracción de seguimiento cambió el estilo de la entrada de código como seis cuadros de dígitos visuales.

Otras cosas que detectó el bot

Cinco hallazgos más de la misma ejecución de cinco semanas:

• Un detalle de CSS que el ingeniero detrás del bot pasó por alto: La propia solicitud de extracción de Nepomuceno para las pestañas fijas de la página principal anidó consultas de estado de desplazamiento de CSS sin nombrar sus contenedores y activó un borde de una manera que cambió el diseño a mitad del desplazamiento. El bot citó la guía de encabezados fijos que reconocen el estado y él corrigió ambos. Las opiniones le resultaron útiles para el posicionamiento de anclas y las consultas de estado de desplazamiento.
• Deslizamiento limitado a mitad de la pulsación de tecla: Las entradas de deslizamiento personalizadas (el movimiento de precios que un usuario tolerará en una operación) limitaban los valores superiores al 100% en cada pulsación de tecla, convirtiendo 101 en 100 mientras el usuario aún estaba escribiendo. Siguiendo la guía de formularios, la corrección movió la validación al momento en que el campo pierde el enfoque y agregó un banner de advertencia visible.
• Un indicador de carga que los lectores de pantalla no podían usar: Un esqueleto de carga de lista de tokens colocaba su etiqueta "loading" en un elemento genérico sin rol, lo que ARIA prohíbe. El bot señaló dos componentes en la base de código que ya usaban el patrón de solo lector de pantalla de MetaMask (ambos actualizados después de una revisión de Modern Web Guidance seis días antes), y el autor alineó el esqueleto con ese patrón ocho minutos después.
• Acción asíncrona sin protección: Un botón asíncrono "Ver en el proveedor" no tenía protección en curso, por lo que al hacer doble clic podía abrir pestañas duplicadas y observadores en segundo plano. El autor agregó una protección menos de cuatro minutos después del comentario.
• Validación de pulsaciones de teclas sin un formulario: Una página de importación de NFT se validaba con cada pulsación de tecla y carecía de un elemento <form> para la semántica de envío. Ambos se corrigieron 19 minutos después de la revisión.

Todas las opiniones son públicas. Los comentarios completos del bot se encuentran en cada solicitud de extracción vinculada, y puedes explorarlos todos en GitHub.

Qué no solucionó y qué tan ruidoso es

No todos los hallazgos se concretaron. En la siguiente tabla, se muestra cómo MetaMask contabilizó los 102 hallazgos en las solicitudes de extracción de funciones y correcciones (se encontraron 20 más en 7 solicitudes de extracción de lanzamiento y sincronización, en las que no se espera que una revisión cambie el código):

Desglose por tema de los 122 hallazgos (incluidos los 20 sobre las solicitudes de extracción de lanzamiento y sincronización):

Algunos patrones en esos números:

• Las correcciones que se mantienen dentro de un componente se aplican con mucha más frecuencia que los cambios de accesibilidad transversales. Las correcciones de formularios y HTML permanecen dentro del componente que se está revisando, por lo que los autores suelen aplicarlas de inmediato (se corrigieron 19 de 31). La accesibilidad tuvo la mayor cantidad de hallazgos (38), pero solo se corrigieron 12, por lo general, porque la corrección estaba fuera del alcance de la solicitud de extracción o necesitaba un componente compartido del sistema de diseño que aún no existía.
• La categoría "Otros" es donde se desvía de la guía de la plataforma web. Dieciséis hallazgos abarcaron la coherencia del sistema de diseño, los errores lógicos, el texto, la calidad de las pruebas, el modo oscuro y la higiene del código; se tomaron medidas en 3 de ellos, uno de los cuales fue una regresión real (un cambio en la lista de redes que interrumpió el autocompletado de formularios). La mayoría de esos 16 eran fáciles de pasar por alto, pero detectar esa regresión hizo que valiera la pena echarles un vistazo rápido.
• Los falsos positivos se debieron a la forma en que el agente aplicó las guías, y la mayor parte del ruido se puede corregir en la configuración. Debido a que el bot de revisión es un agente que lee una diferencia en lugar de un linter estático, sus falsos positivos provinieron de una lectura incorrecta del código circundante o de la aplicación de una regla de manera más estricta que la guía vinculada. Omitir las ramas de lanzamiento y sincronización, y ajustar la instrucción para que el agente se ciña a las reglas que se indican de forma explícita en una guía son los próximos ajustes obvios.

Nepomuceno describe el efecto más amplio en el equipo y el tiempo de respuesta de la revisión:

David Murdoch, ingeniero de MetaMask, también contribuyó a la guía: cuando la guía de diseño de CSS tuvo un error en uno de sus ejemplos, presentó un problema y el equipo de Modern Web Guidance combinó una corrección dos días después.

Qué le diría MetaMask a un equipo que está considerando usarlo

• Lee la orientación antes de escribir cualquier cosa. Ejecuta npx modern-web-guidance@latest search "accordion find in page" para ver qué guías recuperaría un agente para una tarea. También puedes explorar el conjunto completo de guías de Modern Web Guidance.
• Comienza con la instrucción de tres líneas y el agente que ya ejecutaste. Instala la habilidad (npx modern-web-guidance@latest install o el comando del complemento de un agente), apunta lo que se pueda ejecutar en las solicitudes de extracción y dile que comente solo cuando haya algo que se pueda realizar y que se ciña a las reglas establecidas de forma explícita en una guía. Mantener el bot en silencio cuando no hay problemas es la razón por la que los ingenieros de MetaMask siguen leyendo sus comentarios.
• Espera que algunos hallazgos no se aborden. De los 102 hallazgos en las solicitudes de extracción de funciones y correcciones, 43 se corrigieron y 36 se rechazaron o no se abordaron. Esa proporción funciona bien para un bot de revisión de asesoramiento, mientras que sería disruptiva como una verificación de bloqueo.
• Mantén la revisión humana. El bot es bueno con la semántica de la plataforma web, el CSS moderno y los patrones de interacción, pero no conoce el producto.

También hay aspectos que MetaMask aún no midió: después de cinco semanas, el equipo no realizó un seguimiento del costo por solicitud de extracción, el tiempo de ejecución, las comparaciones de modelos ni el comportamiento del bot de revisión fuera de una base de código de React.

Con tres líneas de configuración, MetaMask obtuvo un bot de revisión que cita una guía específica para la mayoría de los hallazgos (y un ejemplo existente en el repositorio cuando hay uno). Las sugerencias aceptadas suelen corregirse en el plazo de una hora.