Modern Web Guidance ist eine Reihe von Skills, mit denen Sie Fachwissen zur Webplattform, Best Practices und Daten zur Browserkompatibilität direkt in Ihre Coding-Agents einbinden können. So werden Ihre KI-Agenten für die Programmierung von Legacy-Mustern weggeführt und stattdessen zu Lösungen geleitet, die die Leistungsfähigkeit und Funktionen der modernen Webplattform nutzen.
Installation
Modern Web Guidance kann mit jedem Coding-Agenten installiert und verwendet werden, der Skills unterstützt.
modern-web-guidance-Befehlszeile (empfohlen)
Die empfohlene Installationsmethode ist die Verwendung der modern-web-guidance-Befehlszeile, die vom Chrome-Team entwickelt wurde. Wenn Sie Modern Web Guidance über die modern-web-guidance-Befehlszeile installieren, werden automatische Updates aktiviert. Sie können die Installation über die modern-web-guidance-Befehlszeile so ausführen:
npx modern-web-guidance@latest install
Wenn Sie Chrome-Erweiterungen entwickeln, empfehlen wir optional den folgenden Befehl:
npx modern-web-guidance@latest install --choose
Dadurch wird ein interaktiver Assistent ausgeführt, mit dem Sie die Skills nach Ihren Wünschen installieren können.
Wenn Sie Modern Web Guidance lieber ohne die modern-web-guidance-Befehlszeile installieren möchten, finden Sie im Folgenden die entsprechenden Anleitungen für die einzelnen Agents. Beachten Sie, dass die meisten dieser Optionen keine automatischen Updates unterstützen.
Antigravity
Laden Sie Antigravity herunter und aktivieren Sie „modern-web-guidance“ während der Installation oder auf der Seite Einstellungen unter Anpassungen und dann Build with Google-Plug-ins.
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Sie finden Modern Web Guidance im Skill-Manager, der unter Einstellungen > KI-Assistent > Skills verfügbar ist. Wählen Sie eine Fähigkeit aus, um die zugehörige Detailseite zu öffnen. Klicken Sie auf Installieren, um den Skill in der aktuellen IDE-Instanz zu installieren.
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
claude plugin install modern-web-guidance@claude-plugins-official
Claude Code-Befehlszeile
Die Installation von Modern Web Guidance für die Verwendung mit der Claude Code CLI erfolgt in drei Schritten:
1. Fügen Sie den Marktplatz hinzu:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Installieren Sie das Plug-in über den Marketplace:
/plugin install modern-web-guidance@googlechrome
3. Plug-ins neu laden:
/reload-plugins
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
Copilot CLI
Die Installation von Modern Web Guidance für die Verwendung mit Copilot erfolgt in zwei Schritten:
1. Fügen Sie den Marktplatz hinzu:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Installieren Sie das Plug-in über den Marketplace:
/plugin install modern-web-guidance@googlechrome
Gans
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Grok
grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust
Kimi Code
/plugins install https://github.com/GoogleChrome/modern-web-guidance
Vor der Installation erkunden
Sehen Sie sich die Modern Web Guidance-Leitfadenbibliothek vor der Installation an, indem Sie eine Suchanfrage stellen oder unsere Leitfäden nach ID abrufen. Verwenden Sie dazu den Befehl search der Befehlszeile, um die Anwendungsfall-ID mithilfe eines Prompts zu finden:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Dadurch wird ein JSON-Objekt in Ihrem Terminal ausgegeben:
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"ui-behaviors","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"ui-behaviors","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"ui-behaviors","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
Anhand der description-Werte können Sie dann die id auswählen, die am besten zu Ihrem Ziel passt, und den Befehl retrieve verwenden:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
In diesem Fall wird im Terminal die Markdown-Anleitung für den Anwendungsfall animate-to-from-top-layer angezeigt. Ersetzen Sie animate-to-from-top-layer bei anderen Leitfäden durch eine gültige Leitfaden-ID.
Warum Modern Web Guidance verwenden?
Modern Web Guidance bietet Webentwicklern aus drei Gründen einen Vorteil gegenüber KI-Modellen ohne Unterstützung:
- KI-Codierungs-Agents greifen bei modernen Problemen der Webentwicklung standardmäßig auf ältere, veraltete Lösungen zurück. Diese Lösungen enthalten oft JavaScript, um Funktionen für Probleme bereitzustellen, die besser mit modernen CSS- und HTML-APIs gelöst werden können.
- KI-Modelle hatten bisher keine Kenntnis von den neuesten Webplattform-Features oder hatten falsche Informationen darüber.
- Außerdem neigen KI-Modelle dazu, veraltete Empfehlungen zu geben, die Projektanforderungen oder Kriterien für die Browserunterstützung nicht berücksichtigen, anstatt die Anleitung auf die Baseline-Anforderungen eines bestimmten Projekts zuzuschneiden.
Modern Web Guidance behebt diese Mängel und sorgt dafür, dass Ihr KI-gestützter Programmierworkflow die Tools enthält, mit denen Sie neue Funktionen der Webplattform zuerst und mit Fallbacks im Hinterkopf nutzen können.
Was ist in Modern Web Guidance enthalten?
Modern Web Guidance enthält Best Practices für über 100 Anwendungsfälle der Webentwicklung in mehreren Kerndisziplinen. Im Hintergrund ist es ein Agenten-Skill, der Ihren KI-Agenten für die Programmierung anweist, die modern-web-guidance-Befehlszeile aufzurufen, um die beste Anleitung für Ihren Anwendungsfall zu finden und abzurufen.
- Nutzererfahrung: Ansichtsübergänge, CSS-
scrollbar-color-Stile sowie Animationen zum Ein- und Ausblenden. - CSS: Containerabfragen, moderne Farbräume wie
oklch, CSS-Subgrid-Layout,text-wrapund Kürzung der Zeilenhöhe für Typografie. - Leistung: Interaction to Next Paint (INP)-Diagnose,
scheduler.yieldzum Aufteilen langer Aufgaben, Planung von Hintergrundaufgaben und Priorisierung des Ladens von Bildern. - Formulare: Eingabefelder mit automatischer Größenanpassung (
field-sizing: content) und genaue Validierungsstile mit:user-invalid. - Integrierte UI-Komponenten: Direkte Steuerung von Dialogfeldern, CSS Anchor Positioning für Kurzinfos und
popover. - Barrierefreiheit: Barrierefreie Fehleransagen und Verwaltung des Tastaturfokus.
- Integrierte KI: Verwenden Sie lokale Clientmodelle auf dem Gerät (native APIs für Spracherkennung, Zusammenfassung und Übersetzung).
- Passkeys: Passkey-Registrierung, ‑Authentifizierung und ‑Verwaltung.
Dies sind einige der Leitfäden aus den einzelnen Kategorien. Eine vollständige Liste aller Leitfäden finden Sie hier.
Referenz
Baseline bietet Entwicklern Klarheit darüber, welche Webfunktionen in den wichtigsten Browser-Engines interoperabel sind. Wenn eine Webfunktion Baseline ist, können Sie sich auf die Browserkompatibilität verlassen. Webfunktionen fallen in eine von drei Kategorien, die von Baseline definiert werden:
- Begrenzte Verfügbarkeit bedeutet, dass die Funktion nicht interoperabel ist.
- Neu verfügbar bedeutet, dass die Funktion innerhalb der letzten 30 Monate interoperabel geworden ist.
- Weit verbreitet bedeutet, dass die Funktion seit mindestens 30 Monaten interoperabel ist.
Baseline ist zwar eine Definition für die Interoperabilität von Webfunktionen, aber auch ein konfigurierbarer Aspekt Ihres Projekts. Sie können ein Baseline-Ziel auswählen und Ihr Projekt dann so konfigurieren, dass es verwendet wird. Fügen Sie es dazu beispielsweise Ihrer AGENTS.md- oder CLAUDE.md-Datei hinzu:
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance und Fallbacks für Funktionen
Modern Web Guidance verwendet eine Vielzahl moderner Webfunktionen. Einige davon sind möglicherweise neu oder allgemein verfügbar, andere sind möglicherweise nur eingeschränkt verfügbar. Wenn eine Funktion nicht allgemein verfügbar ist, finden Kundenservicemitarbeiter in den Anwendungsfall-Leitfäden spezifische Anweisungen, wie sie für eine breitere Kompatibilität in Browsern sorgen können, die die Funktion nicht unterstützen. In vielen Fällen werden Fallbacks als progressive Verbesserungen implementiert, bei denen die moderne Funktion überall dort verwendet werden kann, wo sie unterstützt wird. Wenn Polyfills für nicht unterstützte Browser erforderlich sind, werden die Agents immer angewiesen, sie bedingt zu laden, damit nur bei Bedarf Kosten anfallen.
Wie wird die Genauigkeit sichergestellt?
Jeder Anwendungsfall in Modern Web Guidance enthält eine Reihe von Bewertungen, die kontinuierlich kalibriert werden, um eine hohe Qualität der Ausgabe zu gewährleisten.
Bei Anwendungsfallbewertungen wird ein automatisiertes QA-Framework ausgeführt, um das korrekte Verhalten des Agenten zu testen. Dabei spielt Playwright eine zentrale Rolle:
- Für jeden Leitfaden wird ein Playwright-Script entwickelt, um zu testen, ob die Implementierungsdetails des Leitfadens eingehalten wurden, z. B. ob
@media (prefers-reduced-motion: reduce)beachtet wurde, wenn es erforderlich ist. - Diese Playwright-Skripts werden kontinuierlich mit einer „korrekten“ Referenz-Demo-Implementierung abgeglichen, die eine Erfolgsquote von 100 % erwartet. Am anderen Ende prüfen die Skripts eine absichtlich fehlerhafte Implementierung, die eine Erfolgsquote von 0 % erwartet.
- Wenn die „korrekte“ und die absichtlich fehlerhafte Implementierung nicht zu 100 % bzw. 0 % Erfolgsquote führen, versucht ein Generator automatisch, den Kontext zu verwenden, bis eine 100%ige Kalibrierung erreicht ist.
- Schließlich werden End-to-End-Bewertungen für eine Basisanwendung durchgeführt. Eine dieser Bewertungen ist ungeführt und dient als Kontrolle. Dabei werden die Standardtrainingsdaten verwendet, ohne Modern Web Guidance aufzurufen, um eine Aufgabe zu erledigen. Eine andere Bewertung (das Experiment) befasst sich mit derselben Aufgabe, verwendet aber Modern Web Guidance.
Unsere Bewertungen werden mehrmals pro Woche mit hochmodernen Modellen und Coding-Agents durchgeführt. So erhalten wir ein klares Bild davon, wie gut Agents mit und ohne unsere Anleitung funktionieren. Erste Ergebnisse zeigen, dass die Einhaltung moderner Best Practices im Durchschnitt um 37 Prozentpunkte verbessert wird, wenn Kundenservicemitarbeiter mit Modern Web Guidance ausgestattet sind. Die Ergebnisse können jedoch je nach Projektanforderungen, Modell, Prompts und bevorzugten agentischen Programmiertools variieren.
Anleitung für flüchtige Features aktivieren
Volatile Funktionen sind experimentelle Webfunktionen, die nur in einer Browser-Engine implementiert sind und funktionsgefährdenden Änderungen unterliegen. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus, um die Unterstützung für diese Funktionen zu aktivieren:
npx modern-web-guidance@latest set-allow-volatile-features
Anleitung für Funktionen im Ursprungstest aktivieren
Wenn experimentelle Funktionen zum ersten Mal veröffentlicht werden, sind sie in der Regel hinter einem Flag verborgen oder nur über Ursprungstests auf Produktionswebsites verfügbar. Einige Modern Web Guidance-Leitfäden verwenden diese Funktionen, aber die entsprechenden Anleitungen werden Ihrem KI-Agenten für die Programmierung standardmäßig nicht zur Verfügung gestellt. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus, um eine Anleitung für diese Funktionen zu erhalten:
npx modern-web-guidance@latest set-allow-origin-trials
Nächste Schritte
Sie haben jetzt einen allgemeinen Überblick über Modern Web Guidance und das Potenzial, das es bietet, um Best Practices für das moderne Web in Ihren KI-Codierungs-Workflow zu integrieren. Sie können sich jetzt die Anleitungen von Modern Web Guidance ansehen.