Modern Web Guidance ist eine Reihe von Skills, mit denen Sie Fachwissen zu Webplattformen, Best Practices und Daten zur Browserkompatibilität direkt in Ihre Coding-Agents einbinden können. So können Sie Ihre Coding-Agents von Legacy-Mustern wegleiten und stattdessen Lösungen entwickeln, 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 ohne die modern-web-guidance-Befehlszeile installieren möchten, finden Sie im Folgenden die entsprechenden Anleitungen für die einzelnen Agenten. Beachten Sie jedoch, 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
Sie können die Leitfadenbibliothek von Modern Web Guidance vor der Installation bewerten, 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.
Vorteile von Modern Web Guidance
Modern Web Guidance bietet Webentwicklern gegenüber nicht unterstützten KI-Modellen drei wesentliche Vorteile:
- KI-Codierungs-Agents greifen bei modernen Problemen der Webentwicklung in der Regel 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 Funktionen der Webplattform 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 Coding-Workflow die Tools hat, um neuere Webplattform-Funktionen zuerst zu übernehmen – und mit Fallbacks im Hinterkopf.
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 dies ein Agenten-Skill, der Ihren Coding-Agenten 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 Ein- und Ausblendanimationen. - 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.
Hier 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-Status hat, 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 erst in den letzten 30 Monaten 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 Feature-Fallbacks
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 qualitativ hochwertige Ergebnisse zu erzielen.
Bei Anwendungsfallbewertungen wird ein automatisiertes QA-Framework ausgeführt, um das korrekte Verhalten des Agents 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 dies erforderlich ist. - Diese Playwright-Skripts werden kontinuierlich mit einer „korrekten“ Referenz-Demo-Implementierung abgeglichen, die eine 100%ige Erfolgsquote 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 weitere Bewertung (das Experiment) befasst sich mit derselben Aufgabe, verwendet jedoch 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 Agenten mit Modern Web Guidance ausgestattet sind. Die Ergebnisse können jedoch je nach Projektanforderungen, Modell, Prompts und bevorzugten agentischen Programmiertools variieren.
Nächste Schritte
Sie haben jetzt einen allgemeinen Überblick über Modern Web Guidance und das Potenzial, das es bietet, um die Übernahme von Best Practices für das moderne Web in Ihren KI-Coding-Workflow zu vereinfachen. Sie können sich jetzt die Anleitungen von Modern Web Guidance ansehen.