Modern Web Guidance - KI-Coding-Agenten auf moderne Web-Standards bringen
Show HN: Get your coding agent off ~2019 JavaScript, onto modern web primitives
Modern Web Guidance ist ein Toolkit, das Coding-Agenten wie GitHub Copilot oder ChatGPT mit aktuellem Wissen über moderne Web-APIs und Best Practices versorgt. Statt veralteter JavaScript-Muster aus Trainingsdaten erhalten Agenten präzise, token-effiziente Anleitungen zu 250 Web-Features und 203 Use Cases – von CSS-Layouts über Performance bis Accessibility. Die CLI durchsucht Guides, ruft sie ab und scannt Codebasen nach Legacy-Patterns. Entwickelt von Google Chrome, Microsoft Edge, Mozilla Firefox und MDN, hilft es, bloatigen JavaScript-Code durch native, performante Web-Plattformlösungen zu ersetzen.
Modern Web Guidance schließt diese Lücke: Unsere CLI liefert gezielte, von Experten kuratierte Richtlinien direkt in den Kontextfenster deines Agenten.
- surround
Hier ist eine Liste von Browser-Features, die die Skills deinem Agenten empfehlen werden, die in Chrome stabil sind, aber nicht von Firefox und Safari unterstützt werden:
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
scrollsnapchange event
scrollsnapchanging event
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
CSS url() integrity() modifier
HTML meta name="text-scale"
HTML template for
HTML processing instructions
PasswordCredential
Promise-returning scroll methods
Web App Origin Migration
Local Network Access permissions
Request.targetAddressSpace
beforeinstallprompt event
Um fair zu sein: Die Skills empfehlen auch ~11 Features, die Chrome selbst nicht unterstützt. Und das Projekt scheint sich um Kompatibilität zu kümmern: „Guiding models to use sensible, lightweight fallbacks.“
- simonw
Vorschlag zur Verteilung: Zusätzlich zu den npm-Paketen, die ihr jetzt habt, richtet GitHub Pages ein, um ein Markdown-Indexdokument der Skills unter https://googlechrome.github.io/modern-web-guidance-src/skill... zu veröffentlichen (derzeit ein 404).
Diese Indexseite sollte auf reine Markdown-Versionen aller Dokumente verlinken und für die Suche mit grep konzipiert sein, um die richtigen Antworten zu finden.
Auf diese Weise muss ich überhaupt nichts installieren – vorausgesetzt, mein Agent kann HTTP-Anfragen stellen, kann ich ihm sagen: „Suche nach Tipps auf https://googlechrome.github.io/modern-web-guidance-src/skill...“, und er ruft den Index ab und navigiert dann zu den relevantesten Dokumenten – kein MCP, kein npm und keine Installation erforderlich.
- advisedwang
Chrome hat in der Welt der Browserstandards bereits zu viel Macht. Das Letzte, was wir brauchen, ist, dass die LLMs aller Leute den Empfehlungen des Chrome-Teams zur Webentwicklung folgen. Dieser Weg führt zurück zu „Um diese Seite anzuzeigen, bitte in [DOMINANT BROWSER] anzeigen“.
- chalmovsky
Fantastisch! Ich schreibe gerade einen Artikel darüber, wie Alex Russells Zitat, dass ‚React eine Legacy-Technologie ist‘, leider völlig ignoriert wurde.
Und jetzt ist mir das einfach so zugeflogen! Einige der Argumente, die ich vorbringen wollte, scheinen hier geliefert zu werden. Ich hatte noch keine Gelegenheit, es mir richtig anzusehen, aber es sieht sehr vielversprechend und gut aus!
Danke!
- flossly
Ich ziehe es vor, meine Templates in einer kompilierten Sprache zu haben: nicht eine Map von Strings an einen String mit Interpolationspunkten zu übergeben, sondern tatsächlich „einfach Code“, mit dem ich HTML-Builder definiere, indem ich Templates/Layouts/Komponenten in demselben „einfach Code“ kombiniere.
Wie HtmlFlow (Java/Kotlin) oder kotlinx.html.
Ich wähle Tailwind und Alpine.js für diesen Ansatz, weil: Ich möchte SSR-first sein (mit kleinen JS-basierten Verbesserungen dort, wo sie am meisten zählen), also KEINE SPA, ich möchte, dass das Styling nahe am HTML-Code ist, der gestylt wird (keine Notwendigkeit, zwischen CSS-Definition und -Verwendung abzugleichen), und ich ziehe es auch vor, meine winzigen JS-Schnipsel nahe am HTML zu halten, mit dem sie sich befassen (Alpine macht das einfach und bietet einen klaren Weg, um 99 % meiner JS-Bedürfnisse umzusetzen).
Wie alle anderen lasse ich es von LLMs programmieren :) Aber das Ergebnis ist für mich und mein LLM leicht nachzuvollziehen. Wenig Vanilla-JS. Kein jQuery. Meist nur einige HTML-gebundene Alpine-Anweisungen. Und überall Tailwind. Auf diese Weise kann ich an einer Stelle nachsehen, wie es funktioniert: oder mich per STRG-Klick dorthin klicken.
- phyzix5761
„Best Practices“ sind im KI-Zeitalter so gut wie tot. Schon bald wird niemand mehr den Code lesen, den KI produziert, und das ist ein beängstigender Gedanke.
- bakkoting
> Wenn dir etwas Falsches oder Seltsames auffällt, sag uns Bescheid!
Aber wie? Hoffentlich ist das Erstellen eines Issues im modern-web-guidance-src-Repo der richtige Ort? Wie auch immer, ich habe eines erstellt, weil fromBase64 und toBase64 anstelle von atob und btoa verwendet werden.
Aber da ihr ohnehin voll auf Agenten setzt, solltet ihr in Betracht ziehen, einen zumindest alle JS-, DOM- und HTML-Spec-Commits der letzten 3-5 Jahre durchsehen zu lassen und automatisch alle zu triagieren, die eindeutige Verbesserungen sind und nicht von Agenten genutzt werden. Wäre ziemlich unkompliziert.
---
Übrigens, ich denke, es wäre sehr hilfreich, automatisch Versionen davon bereitzustellen, je nachdem, welche Browser ihr anvisiert. Ich möchte zum Beispiel nichts verwenden, das nicht mindestens ein Jahr lang in allen Evergreen-Browsern verfügbar war; ich denke, die meisten Entwickler haben einen ähnlichen Standard oder wollen zumindest nicht die allerneuesten Features nutzen. Und obwohl es _möglich_ ist, das aus eurem Repo zu bekommen, erfordert es etwas Aufwand, entweder ein Skript zu schreiben oder den Agenten für jedes Feature sein eigenes Urteil fällen zu lassen. Das ist Arbeit, die ihr auf eurer Seite erledigen könntet und den Rest von uns davor bewahren würdet.
- internet2000
NEIN DANKE. Ich möchte nicht, dass meine Agenten zur Chrome-Monokultur beitragen. Chrome ist das neue IE6.