Modern Web Guidance ist eine Reihe von Fähigkeiten, die Webplattform-Expertise, Best Practices und Daten zur Browserkompatibilität direkt in Ihre Coding-Agenten einbetten. So können Sie Ihre Coding-Agenten von älteren Mustern weg und hin zu Lösungen lenken, die die Leistungsfähigkeit und Möglichkeiten der modernen Webplattform nutzen.
Installation
Modern Web Guidance kann mit jedem Coding-Agenten installiert und verwendet werden, der Fähigkeiten unterstützt.
modern-web-guidance-Befehlszeile (empfohlen)
Die empfohlene Installationsmethode ist die 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. So installieren Sie Modern Web Guidance über die modern-web-guidance-Befehlszeile:
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 Fähigkeiten nach Ihren Wünschen installieren können.
Wenn Sie Modern Web Guidance lieber ohne die modern-web-guidance-Befehlszeile installieren möchten, lesen Sie die folgende agentspezifische Anleitung. 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 Mit Google-Plug-ins erstellen.
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 unter Einstellungen > KI-Assistent > Fähigkeiten. Wählen Sie eine Fähigkeit aus, um die zugehörige Detailseite zu öffnen. Klicken Sie auf die Schaltfläche Installieren, um die Fähigkeit auf die aktuelle IDE-Instanz anzuwenden.
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 CLI
Die Installation von Modern Web Guidance für die Verwendung mit der Claude Code CLI umfasst drei Schritte:
1. Marketplace hinzufügen:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Plug-in aus dem Marketplace installieren:
/plugin install modern-web-guidance@googlechrome
3. Plug-ins neu laden:
/reload-plugins
Copilot CLI
Die Installation von Modern Web Guidance für die Verwendung mit Copilot umfasst zwei Schritte:
1. Marketplace hinzufügen:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Plug-in aus dem Marketplace installieren:
/plugin install modern-web-guidance@googlechrome
Goose
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Kimi Code
/plugins install https://github.com/GoogleChrome/modern-web-guidance
Vor der Installation erkunden
Sie können die Modern Web Guidance-Anleitungsbibliothek vor der Installation bewerten, indem Sie eine Suchanfrage ausführen oder unsere Anleitungen anhand der ID abrufen. Verwenden Sie dazu den Befehl search der Befehlszeile, um die ID des Anwendungsfalls mit einem Prompt zu finden:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Dadurch wird ein JSON-Objekt im 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":"user-experience","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":"user-experience","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":"user-experience","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 die Markdown-Anleitung für den Anwendungsfall animate-to-from-top-layer im Terminal angezeigt. Ersetzen Sie für andere Anwendungsfälle animate-to-from-top-layer durch eine gültige Anwendungsfall-ID.
Warum Modern Web Guidance verwenden?
Modern Web Guidance bietet Webentwicklern gegenüber KI-Modellen ohne Unterstützung aus drei verschiedenen Gründen Vorteile:
- KI-Coding-Agenten greifen in der Regel auf ältere, veraltete Lösungen für moderne Webentwicklungsprobleme 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 waren in der Vergangenheit nicht über die neuesten Webplattformfunktionen informiert oder hatten falsche Informationen dazu.
- Außerdem geben KI-Modelle oft veraltete Empfehlungen, die keine Projektanforderungen oder Browserunterstützungskriterien berücksichtigen, anstatt die Anleitung an die Baseline-Anforderungen eines bestimmten Projekts anzupassen.
Modern Web Guidance behebt diese Mängel und sorgt dafür, dass Ihr KI-gestützter Coding-Workflow die Tools hat, um neuere Webplattformfunktionen zuerst zu übernehmen – und zwar mit Fallbacks.
Was ist Modern Web Guidance?
Modern Web Guidance enthält Best Practices für über 100 Anwendungsfälle der Webentwicklung in verschiedenen Kernbereichen. Im Hintergrund ist es 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-Styling für
scrollbar-colorsowie Ein- und Ausblendeanimationen. - CSS:Containerabfragen, moderne Farbräume wie
oklch, CSS-Subgrid-Layout,text-wrapund Zeilenhöhenanpassung für Typografie. - Leistung:INP-Diagnosen (Interaction to Next Paint),
scheduler.yieldzum Aufteilen langer Aufgaben, Planung von Hintergrundaufgaben und Priorisierung des Bildladens. - Formulare:Automatische Größenanpassung von Eingabefeldern (
field-sizing: content) und genaue Validierungsstile mit:user-invalid. - Integrierte UI-Komponenten:Direkte Steuerung von Dialogfeldern, CSS-Anchor-Positionierung für Tooltips und
popover. - Bedienungshilfen:Zugängliche Fehlermeldungen und Verwaltung des Tastaturfokus.
- Integrierte KI:Verwenden Sie lokale Clientmodelle auf dem Gerät (native APIs für Spracherkennung, Zusammenfassung und Übersetzung).
- Passkeys:Registrierung, Authentifizierung und Verwaltung von Passkeys.
Dies sind einige der Anwendungsfälle aus den einzelnen Bereichen. Eine vollständige Liste aller Anwendungsfälle finden Sie hier.
Baseline
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:
- Begrenzt verfügbar bedeutet, dass die Funktion nicht interoperabel ist.
- Neu verfügbar bedeutet, dass die Funktion seit Kurzem (in den letzten 30 Monaten) interoperabel ist.
- Weitgehend verfügbar bedeutet, dass die Funktion seit mindestens 30 Monaten interoperabel ist.
Baseline ist nicht nur eine Definition für die Interoperabilität von Webfunktionen, sondern auch ein konfigurierbarer Aspekt Ihres Projekts. Sie können ein Baseline-Ziel auswählen und dann Ihr Projekt so konfigurieren, dass es verwendet wird, indem Sie es beispielsweise der Datei AGENTS.md oder CLAUDE.md hinzufügen:
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 „Baseline neu“ oder „Baseline weitgehend verfügbar“, andere jedoch „Baseline begrenzt verfügbar“. In Fällen, in denen eine Funktion nicht weitgehend verfügbar ist, enthalten die Anleitungen für Anwendungsfälle spezifische Anweisungen für Agenten, wie eine breitere Kompatibilität in Browsern erreicht werden kann, die die Funktion nicht unterstützen. In vielen Fällen werden Fallbacks als progressive Verbesserungen implementiert, bei denen die moderne Funktion überall verwendet werden kann, wo sie unterstützt wird. Wenn für nicht unterstützte Browser Polyfills erforderlich sind, werden Agenten immer angewiesen, sie bedingt zu laden, damit nur Kosten entstehen, wenn sie wirklich benötigt werden.
Wie wird die Genauigkeit sichergestellt?
Jeder Anwendungsfall in Modern Web Guidance enthält eine Reihe von Evals, die kontinuierlich kalibriert werden, um eine hohe Qualität zu gewährleisten.
Bei den Anwendungsfall-Evals wird eine automatisierte QA-Harness ausgeführt, um das korrekte Agentenverhalten zu testen. Playwright spielt dabei eine zentrale Rolle:
- Für jede Anleitung wird ein Playwright-Skript entwickelt, um zu testen, ob die Implementierungsdetails der Anleitung befolgt wurden, z. B. ob
@media (prefers-reduced-motion: reduce)verwendet wurde, wenn dies erforderlich ist. - Diese Playwright-Skripts werden kontinuierlich mit einer „korrekten“ Referenzdemo-Implementierung kalibriert, bei der eine Erfolgsrate von 100% erwartet wird. Andererseits werden die Skripts mit einer bewusst fehlerhaften Implementierung verglichen, bei der eine Erfolgsrate von 0% erwartet wird.
- Wenn bei einer oder beiden Implementierungen („korrekt“ und bewusst fehlerhaft) keine Erfolgsraten von 100% bzw. 0% erzielt werden, versucht ein Generator automatisch, den Kontext zu verwenden, bis eine Kalibrierung von 100% erreicht ist.
- Schließlich werden End-to-End-Bewertungen für eine Basis-App angewendet. Eine dieser Evals ist nicht geführt. Sie dient als Kontrolle und verwendet die Standardtrainingsdaten, ohne Modern Web Guidance aufzurufen, um eine Aufgabe zu erledigen. Bei einer anderen Eval (dem Experiment) wird dieselbe Aufgabe mit Modern Web Guidance ausgeführt.
Unsere Evals werden mehrmals pro Woche mit modernsten Modellen und Coding-Agenten ausgeführt. So erhalten wir ein klares Bild davon, wie gut Agenten mit und ohne unsere Anleitung abschneiden. Die ersten Ergebnisse zeigen durchschnittlich eine Verbesserung von 37 Prozentpunkten bei der Einhaltung moderner Best Practices, wenn Agenten mit Modern Web Guidance ausgestattet sind. Die Ergebnisse können jedoch je nach Projektanforderungen, Modell, den von Ihnen erstellten Prompts und den von Ihnen bevorzugten Agenten-Coding-Tools variieren.
Nächste Schritte
Sie haben jetzt einen allgemeinen Überblick über Modern Web Guidance und das Potenzial, das es bietet, um die Einführung moderner Web-Best Practices in Ihrem KI-Coding-Workflow zu erleichtern. Jetzt können Sie sich über die von Modern Web Guidance bereitgestellten Bereiche und Anwendungsfälle informieren.