„Modern Web Guidance“ ist eine Agent-Fähigkeit, die moderne Best Practices auf Ihren KI-gestützten Codierungs-Workflow anwendet. So wird Ihr Coding-Agent von Legacy-Workarounds für häufige Webentwicklungsprobleme abgelenkt und stattdessen auf Lösungen ausgerichtet, die neuere Webplattformfunktionen verwenden sollten.
Installation
Modern Web Guidance-Skills können in einer Vielzahl von Agents installiert werden. So können Sie Ihren bevorzugten Workflow beibehalten und trotzdem von den Anleitungen profitieren.
modern-web-guidance CLI (empfohlen)
Die empfohlene Installationsmethode ist die modern-web-guidance CLI, die vom Chrome-Team entwickelt wurde. Wenn Sie die Skills über die modern-web-guidance-Befehlszeile installieren, werden sie automatisch auf dem neuesten Stand gehalten. Sie können die Installation über die modern-web-guidance-Befehlszeile so vornehmen:
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 gestartet, mit dem Sie die Skills nach Ihren Wünschen installieren können.
Wenn Sie die Skills für Modern Web Guidance lieber ohne die modern-web-guidance-CLI verwenden möchten, lesen Sie weiter, um zu erfahren, wie Sie sie für Ihren bevorzugten Agenten installieren.
Antigravity
Laden Sie Antigravity herunter und aktivieren Sie „modern-web-guidance“ während der Installation oder auf der Seite Einstellungen unter Anpassungen > Mit Google-Plug-ins erstellen.
Antigravity-Befehlszeile
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 die Skills für Modern Web Guidance im Skill Manager unter Einstellungen > AI Assistant > Skills. Wählen Sie einen Skill aus, um die Detailseite zu öffnen. Klicken Sie zum Installieren des Skills auf die Schaltfläche Installieren, um ihn 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
Die Installation von Modern Web Guidance zur Verwendung mit Claude Code umfasst drei Schritte:
1. Fügen Sie den Marketplace 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
Copilot CLI
Die Installation von Modern Web Guidance für die Verwendung mit Copilot erfolgt in zwei Schritten:
1. Fügen Sie den Marketplace 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
Vor der Installation ansehen
Sehen Sie sich vor der Installation die Skill-Guide-Bibliothek „Modern Web Guidance“ an, indem Sie eine Anfrage senden oder unsere Guides anhand der ID abrufen. Verwenden Sie dazu den Befehl search der CLI, um die ID des Anwendungsfalls anhand eines Prompts zu ermitteln:
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":"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 Zielvorhaben 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 für andere Anwendungsfälle animate-to-from-top-layer durch eine beliebige gültige Anwendungsfall-ID.
Warum Modern Web Guidance verwenden?
Die Fähigkeiten von Modern Web Guidance bieten Webentwicklern aus drei verschiedenen Gründen Vorteile gegenüber KI-Modellen ohne Unterstützung:
- KI-basierte Coding-Agents 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 bisher nicht über die neuesten Webplattformfunktionen informiert oder hatten falsche Informationen dazu.
- Außerdem geben KI-Modelle oft veraltete Empfehlungen, die Projektanforderungen oder Browserunterstützungskriterien nicht berücksichtigen, anstatt die Anleitung an die Baseline-Anforderungen eines bestimmten Projekts anzupassen.
Die Fähigkeiten von Modern Web Guidance beheben diese Mängel und sorgen dafür, dass Ihr KI-gestützter Codierungs-Workflow die Tools hat, um neuere Webplattformfunktionen zuerst zu übernehmen – und zwar mit Fallbacks.
Was ist in Modern Web Guidance enthalten?
Die Modern Web Guidance enthält Best Practices für über 100 Anwendungsfälle für die Webentwicklung in verschiedenen Kernbereichen. Im Hintergrund ist es eine einzelne Agent-Fähigkeit, die Ihrem Coding-Agent anweist, wie die modern-web-guidance-CLI aufgerufen wird, um die beste Anleitung für Ihren Anwendungsfall zu finden und abzurufen.
- Nutzerfreundlichkeit:Übergänge, CSS-
scrollbar-color-Formatierung sowie Ein- und Ausblendanimationen. - CSS:Containerabfragen, moderne Farbräume wie
oklch, CSS-Subgrid-Layout,text-wrapund das Kürzen der Zeilenhöhe bei der Typografie. - Leistung:INP-Diagnose (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 Positioning für Tooltips und
popover. - Barrierefreiheit: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 Disziplinen. Eine vollständige Liste der Anwendungsfälle finden Sie hier.
Referenz
Die Baseline gibt Entwicklern Aufschluss darüber, welche Webfunktionen in den wichtigsten Browser-Engines interoperabel sind. Wenn ein Web-Feature den Status „Baseline“ hat, können Sie sich auf die Browserkompatibilität verlassen. Webfunktionen lassen sich in eine von drei Kategorien einteilen, die von Baseline definiert werden:
- Begrenzt verfügbar bedeutet, dass die Funktion nicht interoperabel ist.
- Neu verfügbar bedeutet, dass die Funktion in den letzten 30 Monaten interoperabel geworden ist.
- Weitverbreitet 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 dann Ihr Projekt 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...>
Leitfaden für moderne Webtechnologien und Fallback-Funktionen
Modern Web Guidance verwendet eine Vielzahl moderner Webfunktionen. Einige davon sind möglicherweise neu oder weitgehend verfügbar, andere sind möglicherweise nur eingeschränkt verfügbar. Wenn eine Funktion nicht allgemein verfügbar ist, enthalten die Anleitungen für Anwendungsfälle spezifische Anweisungen für Kundenservicemitarbeiter, wie sie eine breitere Kompatibilität in Browsern sicherstellen 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 für nicht unterstützte Browser ein Polyfill erforderlich ist, werden Agents immer angewiesen, es bedingt zu laden, damit nur bei Bedarf Kosten anfallen.
Wie wird die Genauigkeit gewährleistet?
Jeder Anwendungsfall in Modern Web Guidance enthält einen Leitfaden. Die meisten Anwendungsfälle werden kontinuierlich angepasst, um KI-Agents zu qualitativ hochwertigen Ergebnissen zu führen.
Bei Anwendungsfällen, die kalibriert werden, wird ein automatisierter QA-Test verwendet, um das korrekte Agent-Verhalten zu testen. Playwright spielt dabei eine zentrale Rolle:
- Für jede Anleitung wird ein Playwright-Skript entwickelt, um zu prüfen, ob die Implementierungsdetails der Anleitung eingehalten wurden, z. B. ob
@media (prefers-reduced-motion: reduce)beobachtet wurde, wenn dies erforderlich ist. - Diese Playwright-Skripts werden kontinuierlich mit einer „korrekten“ Referenzdemo-Implementierung abgeglichen, die eine Erfolgsrate von 100% erwartet. Auf der anderen Seite wird mit den Skripts eine bewusst fehlerhafte Implementierung geprüft, bei der eine Erfolgsrate von 0% erwartet wird.
- Wenn bei der „korrekten“ und der bewusst fehlerhaften Implementierung keine Bestehensraten von 100 % bzw. 0 % erreicht werden, wird der Vorgang automatisch mit Kontext wiederholt, bis eine 100-prozentige Abstimmung erreicht ist.
- Schließlich werden End-to-End-Bewertungen für eine Basis-App angewendet. Eine dieser Auswertungen ist nicht geführt. Sie dient als Kontrollgruppe und verwendet die Standardtrainingsdaten, ohne dass Modern Web Guidance-Skills aufgerufen werden, um eine Aufgabe zu erledigen. Eine weitere Evaluierung (das Experiment) befasst sich mit derselben Aufgabe, wobei die Fähigkeiten von Modern Web Guidance genutzt werden.
Unsere Tests werden täglich mit modernsten 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 um durchschnittlich 37 Prozentpunkte verbessert wird, wenn Kundenservicemitarbeiter Zugriff auf Modern Web Guidance haben. Die Ergebnisse können jedoch je nach Projektanforderungen, Modell, den von Ihnen geschriebenen Prompts und den von Ihnen bevorzugten agentischen Codierungstools variieren.
Nächste Schritte
Sie haben jetzt einen allgemeinen Überblick über Modern Web Guidance und das Potenzial, das es bietet, die Einführung moderner Web-Best Practices in Ihrem KI-Coding-Workflow zu erleichtern. Sie können jetzt die von Modern Web Guidance bereitgestellten Fähigkeiten und Anwendungsfälle erkunden.