Modern Web Guidance - Mantén tu agente de código al día con las mejores prácticas web
Show HN: Get your coding agent off ~2019 JavaScript, onto modern web primitives
Modern Web Guidance es un conjunto de habilidades que integra experiencia en la plataforma web, mejores prácticas y datos de compatibilidad de navegadores directamente en tus agentes de código. Desarrollado por los equipos de Google Chrome, Microsoft Edge, Mozilla Firefox y MDN, ayuda a que los agentes eviten patrones obsoletos y generen código moderno y eficiente. Con más de 250 características web y 203 casos de uso reales, puedes instalarlo fácilmente con npx modern-web-guidance@latest install y empezar a modernizar tu código.
Nuestras guías están diseñadas para ser eficientes en tokens; realizamos evaluaciones que nos permiten eliminar el contenido más básico que los modelos ya conocen.
- surround
Aquí tienes una lista de características del navegador que las skills le dirán a tu agente que use, que son estables en Chrome pero no están soportadas por Firefox y Safari:
CSS @function
CSS calc-size()
CSS interpolate-size
CSS corner-shape
CSS border-shape
CSS flex-wrap: balance
CSS text-fit
CSS text-decoration-skip-spaces
CSS scroll-axis-lock
CSS scroll-target-group
CSS :target-current
CSS scroll-initial-target
CSS container scroll-state queries
evento scrollsnapchange
evento scrollsnapchanging
HTML focusgroup
Element.startViewTransition()
CSS view-transition-scope
Interest Invokers (interestfor)
LanguageModel (Prompt API)
LanguageDetector
Translator
Summarizer API
Window.fetchLater()
Speculation Rules API
Long Animation Frames API
VisibilityStateEntry
PerformanceSoftNavigation
InteractionContentfulPaint
Connection-Allowlist
modificador CSS url() integrity()
HTML meta name="text-scale"
HTML template for
HTML processing instructions
PasswordCredential
métodos de scroll que devuelven Promise
Web App Origin Migration
permisos de Local Network Access
Request.targetAddressSpace
evento beforeinstallprompt
Para ser justos, las skills también recomiendan ~11 características que Chrome no soporta. Y el proyecto parece preocupado por la compatibilidad: "Guiar a los modelos para que usen fallbacks sensatos y ligeros."
- simonw
Sugerencia de distribución: además de los paquetes de npm que tienes ahora mismo, configura GitHub Pages para publicar un documento índice en markdown de las skills en https://googlechrome.github.io/modern-web-guidance-src/skill... (actualmente da 404)
Esa página índice debería enlazar a versiones en markdown plano de todos los documentos, y debería estar diseñada para buscar con grep y encontrar las respuestas correctas.
Así no tendría que instalar nada en absoluto: siempre que mi agente tenga la capacidad de hacer peticiones HTTP, puedo decirle "Busca consejos en https://googlechrome.github.io/modern-web-guidance-src/skill..." y descargará el índice, luego navegará a los documentos más relevantes. Sin MCP, sin npm y sin instalación de ningún tipo.
- advisedwang
Chrome ya tiene demasiado poder en el mundo de los estándares de navegadores. Lo último que necesitamos es que los LLMs de todo el mundo sigan las directrices del equipo de Chrome sobre cómo hacer desarrollo web. Este camino nos lleva de vuelta a "Para ver este sitio, ábrelo en [NAVEGADOR DOMINANTE]".
- chalmovsky
¡Increíble! Justo estaba escribiendo un artículo sobre cómo la cita de Alex Russell acerca de que 'React es una tecnología heredada' fue, por desgracia, totalmente ignorada.
¡Y ahora esto me cae del cielo! Algunos de los argumentos que quería plantear parecen estar aquí. No he tenido la oportunidad de echarle un vistazo en condiciones, pero tiene muy buena pinta y se ve genial.
¡Gracias!
- flossly
Prefiero tener mis plantillas en un lenguaje compilado: no pasar un mapa de strings a un string con puntos de interpolación, sino realmente "solo código" con el que defino constructores de HTML combinando plantillas/layouts/componentes en ese mismo "solo código".
Como HtmlFlow (Java/Kotlin) o kotlinx.html.
Elijo Tailwind y Alpine.js para acompañar este enfoque porque: quiero ser SSR-first (con pequeñas mejoras basadas en JS donde más importan), así que NO una SPA; quiero que el estilado esté cerca del código HTML que se está estilando (sin necesidad de emparejar la definición de CSS con su uso); y también prefiero mantener mis pequeñas dosis de JS cerca del HTML con el que tratan (Alpine lo hace fácil y ofrece un camino claro para implementar el 99% de mis necesidades de JS).
Como todo el mundo, los LLMs me lo programan :) Pero el resultado es fácil de razonar para mí y para mi LLM. Poco JS vanilla. Nada de jQuery. Sobre todo solo algunas instrucciones de Alpine vinculadas al HTML. Y Tailwind por todas partes. Así puedo mirar un solo sitio para ver cómo funciona: o llegar a él con CTRL-clic.
- phyzix5761
Las "buenas prácticas" están prácticamente muertas en la era de la IA. Muy pronto nadie va a leer nada del código que produce la IA, y ese es un pensamiento que da miedo.
- bakkoting
> Si ves algo mal o raro, ¡dínoslo!
Pero ¿cómo? Espero que abrir un issue en el repo modern-web-guidance-src sea el sitio correcto. En cualquier caso, abrí uno sobre usar fromBase64 y toBase64 en lugar de atob y btoa.
Pero ya que estáis metidos de lleno en los agentes, deberíais considerar hacer que uno revise al menos todos los commits de las especificaciones de JS, DOM y HTML de los últimos 3-5 años y triaje automáticamente cualquiera que sean mejoras claras y que los agentes no usen. Sería bastante sencillo.
---
Por cierto, creo que sería muy útil ofrecer automáticamente versiones de esto según los navegadores a los que apuntes. Yo no quiero usar nada que no esté disponible en todos los navegadores evergreen desde hace al menos un año, por ejemplo; creo que la mayoría de los desarrolladores tienen un estándar parecido, o al menos no quieren usar lo más puntero. Y aunque es _posible_ obtener eso de vuestro repo, requiere cierto esfuerzo, ya sea escribir un script o dejar que el agente use su propio criterio para cada característica. Es trabajo que podríais hacer vosotros y ahorrárnoslo al resto.
- internet2000
NO, GRACIAS. No quiero que mis agentes contribuyan a la monocultura de Chrome. Chrome es el nuevo IE6.