Modern Web Guidance 1.0: Claude Code, Codex und Cursor einrichten

Installiere Modern Web Guidance 1.0 als Projekt-Skill und prüfe zunächst bei einer Frontend-Aufgabe, ob der Agent den passenden Guide tatsächlich nutzt. Verwende legacy-scan für Modernisierungsvorschläge, die du anschließend prüfst, nicht für unbeaufsichtigte Änderungen. Setze vor dem ersten Befehl DISABLE_TELEMETRY=1, wenn Modern Web Guidance keine Nutzungstelemetrie senden soll.

Was Modern Web Guidance 1.0 verändert

Modern Web Guidance liefert deinem vorhandenen Coding-Agenten gezielte Anweisungen zu Browserfunktionen, bevor er Code schreibt. Das Release 1.0 vom 10. November 2026 umfasst 203 anwendungsbezogene Guides zu 250 Funktionen der Webplattform. Die Teams von Chrome, Edge, Firefox und MDN betreuen das Projekt gemeinsam mit der Community.

Ein Skill ist ein Paket von Anweisungen für den Agenten. Er weist den Agenten an, passende Guides zu suchen, abzurufen und ihre Implementierungsregeln anzuwenden. Dazu gehören auch Fallbacks, also alternative Lösungen für die Kompatibilität.

Die Suche kombiniert ein lokales Embedding-Modell mit BM25, einem Verfahren zur Rangfolge anhand von Schlüsselwörtern. Laut dem offiziellen Projekt-README benötigt dieser Suchvorgang weder eine externe Modell-API noch einen API-Schlüssel.

Das hilft, wenn ein Agent eine Browser-API kennt, aber Details zu Übergängen oder notwendigen Fallbacks übersieht. Unterstützte Browser festzulegen, Änderungen zu prüfen und Anwendungstests auszuführen, bleibt deine Aufgabe.

In Claude Code, Codex oder Cursor installieren

Nutze für alle drei Agenten dieselbe projektbezogene Installation über die Kommandozeile, kurz CLI. Der Installations-Wrapper ruft Vercel Skills auf. Stand 2026-11-13: Verwende Node.js 22.20 oder neuer, um die aktuelle Anforderung des Skills-Installers zu erfüllen. Du brauchst außerdem npm/npx und die Berechtigung, die erforderlichen Pakete herunterzuladen.

Öffne Bash im Stammverzeichnis deines Projekts. Schalte die Telemetrie von Modern Web Guidance vor dem offiziellen Installationsbefehl ab:

export DISABLE_TELEMETRY=1
npx modern-web-guidance@latest install

Im interaktiven Installer wählst du die Zielagenten aus. Wähle Claude Code, Codex, Cursor oder nur die Agenten, die du nutzt. Installiere den Skill für einen Versuch in einem einzelnen Repository nur im Projekt. Das ist auch die Voreinstellung des Installers.

Prüfe bei diesem CLI-Installationsweg die folgenden Dateien und Aufrufmöglichkeiten:

Agent	Skill-Datei im Projekt	Expliziter Aufruf
Claude Code	.claude/skills/modern-web-guidance/SKILL.md	Gib /modern-web-guidance ein.
Codex	.agents/skills/modern-web-guidance/SKILL.md	Nutze /skills oder erwähne $modern-web-guidance.
Cursor	.agents/skills/modern-web-guidance/SKILL.md	Gib im Agent-Chat / ein und wähle den Skill.

Die Verzeichnisse entsprechen der aktuellen Zuordnung des Installers für die jeweiligen Agenten. Es sind keine Plugin-Cache-Pfade oder Verzeichnisse einer globalen Installation.

Starte im selben Repository eine neue Agentensitzung und rufe den Skill beim ersten Test ausdrücklich auf. Fehlt er, prüfe vor einer Neuinstallation den gewählten Agenten, den Installationsumfang und den Dateipfad.

Einen per CLI installierten Skill aktualisierst du aus dem Projektverzeichnis mit:

npx modern-web-guidance@latest update

Prüfe danach die geänderten Skill-Dateien und wiederhole den Guide-Abruf aus dem nächsten Abschnitt. Die Befehle verwenden @latest. Gehe daher nicht davon aus, dass ein künftiges Update bei Version 1.0 bleibt.

Die Installation über einen Plugin-Marktplatz ist ein anderer Weg mit einem eigenen Update-Verfahren. Vermische dieses nicht mit der CLI-Anleitung. Mehr zum Aufbau und zur Verwaltung von Claude-Code-Plugins findest du unter Claude-Code-Plugins installieren, prüfen und entfernen.

Suche, Abruf und tatsächliche Nutzung durch den Agenten prüfen

Prüfe sowohl die CLI als auch die Nutzung ihrer Ausgabe durch den Agenten. Ein erfolgreicher Terminalbefehl allein belegt nicht, dass der Agent den Skill geladen hat.

Führe das dokumentierte Dialogbeispiel in Bash aus:

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

Die Suche liefert JSON mit Guide-IDs und Beschreibungen. Der Abruf liefert den Inhalt des gewählten Guides. Bei großen Ausgaben kann die CLI stattdessen den Pfad zu einer gespeicherten Datei anzeigen. Lass den Agenten diese Datei vollständig lesen.

Rufe anschließend den installierten Skill auf und gib dem Agenten eine klar begrenzte Aufgabe. Der folgende Prompt erhält das bestehende Framework und die Browserrichtlinie. Er verlangt außerdem, die relevanten Guides vor Änderungen abzurufen:

Use the modern-web-guidance skill to add an animated modal dialog.
Keep the existing framework and browser support policy.
Retrieve the relevant guidance before editing.
Afterward, report the guide IDs, required fallbacks, and tests run.

Prüfe im Tool-Protokoll, ob Suche und Abruf tatsächlich stattgefunden haben. Der Abschlussbericht sollte den Guide nennen und erklären, welche Implementierungsentscheidungen darauf beruhen. Die Aussage, der Agent habe „Best Practices verwendet“, reicht als Nachweis nicht aus.

Der Dialoganimations-Guide aus dem Release bietet einen konkreten Prüfpunkt. Nutzt der Code die Kurzschreibweise transition, muss transition-behavior: allow-discrete danach stehen. Andernfalls setzt die Kurzschreibweise den Wert zurück.

Teste das Ein- und Ausblenden, das Verhalten bei reduzierten Animationen und die vorhandenen Interaktionen des Dialogs.

Scheitert der erste Befehl vor der Ausgabe von Suchergebnissen, prüfe zunächst Node.js und die Berechtigungen für Paketdownloads. Die Skill-Anweisungen des Releases unterscheiden ausdrücklich zwischen Paketdownload und Offline-Betrieb. Erlaube den benötigten Paketbefehl, statt beliebige npx-Aufrufe freizugeben.

Sind die Suchergebnisse unpassend, beschreibe ein konkretes Browserverhalten, etwa „confirmation modal dialog“. Rufe keinen unpassenden Guide ab, nur damit der Ablauf erfolgreich aussieht.

legacy-scan für eine Prüfung statt für automatische Änderungen nutzen

Nutze legacy-scan, um Modernisierungskandidaten in einem Repository oder Verzeichnis zu finden. Für eine Änderung an einer bestimmten Komponente verwendest du stattdessen Suche und Guide-Abruf. Diese Unterscheidung beschreibt die Dokumentation zum Modernisierungsablauf.

Starte im Projektstamm einen Scan mit gut lesbarer Ausgabe:

npx modern-web-guidance@latest legacy-scan .

Für eine strukturierte Ausgabe, die der Agent prüfen kann, verwende:

npx modern-web-guidance@latest legacy-scan . --json

Du erhältst mögliche Änderungsstellen mit Verweisen auf passende Guides, keine umgeschriebenen Quelldateien. Der statische Scanner ruft kein Sprachmodell auf. Die anschließende Prüfung und Bearbeitung durch den Agenten nutzt weiterhin dessen normalen Modellzugang.

Lass den Agenten die vier dokumentierten Schritte ausführen:

1. Das gewählte Verzeichnis scannen und mögliche Änderungsstellen sammeln.
2. Jeden Treffer anhand des umgebenden Codes und seiner keepWhen/dropWhen-Regeln prüfen. Fehlalarme verwerfen, statt jeden Treffer als notwendige Änderung zu behandeln.
3. Die geprüften Treffer und vorgeschlagenen Änderungen berichten. Vor der Modernisierung deine Zustimmung einholen.
4. Für genehmigte Änderungen die zugehörigen Guides abrufen und anwenden. Vorhandene Tests ausführen und den geänderten Bereich erneut scannen.

Prüfe absichtliche Fallbacks und Kompatibilitätscode mit vorgeschalteten Prüfungen der Browserunterstützung besonders genau. Eine alt wirkende Implementierung kann für die unterstützten Browser weiterhin notwendig sein.

Der Scanner von Version 1.0 deckt ungefähr 20% der Guides ab: diejenigen mit deterministischen Regeln zur Erkennung alter Muster. Die Zahl beschreibt einen Anteil des Guide-Katalogs, nicht deines Codes. Ein Scan ohne Treffer beweist deshalb weder vollständige Modernisierung noch Barrierefreiheit oder korrekte Funktion.

Browserrichtlinie und .mwgrc vor der Modernisierung festlegen

Formuliere die Kompatibilitätsanforderungen ausdrücklich und lasse experimentelle Guides deaktiviert, solange das Projekt sie nicht benötigt. Standardmäßig behandelt der Skill Funktionen mit dem Status Baseline Widely available als ohne Fallback nutzbar.

Die Baseline-Konfigurationsanleitung zeigt, wie du das Projektziel in AGENTS.md oder CLAUDE.md festhältst. Verwende deine tatsächliche Browserrichtlinie. Ändere sie nicht nur, um einen vorgeschlagenen Ersatz übernehmen zu können.

Die optionale JSON-Datei .mwgrc im Projektstamm steuert den Zugriff auf experimentelle Guides. Ergänze oder aktualisiere für eine vorsichtige Einstellung diese Felder in der bestehenden Konfiguration:

{
  "allowOriginTrials": false,
  "allowVolatileFeatures": false
}

Guides für volatile Funktionen behandeln Funktionen, die nur eine Browser-Engine unterstützt. Gemeint sind Funktionen, die in den letzten 3 Monaten erschienen sind oder noch stabilisiert werden. Diese Guides bleiben durchsuchbar, ihr Abruf erfordert jedoch eine ausdrückliche Erlaubnis. Für Origin-Trial-Guides gibt es eine separate Freigabe.

Um Guides für volatile Funktionen zu erlauben, führe diesen Befehl selbst in einem interaktiven Bash-Terminal aus:

npx modern-web-guidance@latest set-allow-volatile-features

Nutze für Origin-Trial-Guides nur bei Bedarf den separaten Befehl:

npx modern-web-guidance@latest set-allow-origin-trials

Die Befehle verlangen eine Bestätigung und setzen den jeweiligen booleschen Wert auf true. Prüfe den angezeigten Konfigurationspfad und den geänderten Schlüssel. Versuche danach erneut, den Guide abzurufen.

Eine Ablehnung innerhalb eines Agenten oder einer nicht interaktiven Shell ist beabsichtigt. Die Implementierung der Freigabe verlangt ein interaktives Terminal unter menschlicher Kontrolle. Bitte den Agenten nicht, diese Prüfung zu umgehen.

Diese Einstellungen geben nur die Guides frei. Sie aktivieren keine Browserfunktion, melden deine Website nicht für einen Origin Trial an und erweitern nicht deine Browserrichtlinie.

Telemetrie und Kontextkosten kontrollieren

Schalte Telemetrie in der Umgebung ab, die Modern Web Guidance tatsächlich startet, nicht nur in einem anderen Terminal. Laut dem Datenschutzabschnitt des Projekts werden unter anderem Installationszahlen und die Namen aufrufender Agenten erfasst. Dazu kommen IDs abgerufener Guides und Suchanfragen, die der Agent erstellt. Ursprüngliche Nutzerprompts werden laut dieser Beschreibung nicht erfasst.

Suchanfragen können dennoch Details der Aufgabe offenlegen. Ergänze export DISABLE_TELEMETRY=1 in deiner Bash-Startkonfiguration, etwa .bashrc. Stelle sicher, dass die Befehlsumgebung des Agenten die Variable übernimmt. Starte einen bereits laufenden Agenten oder eine IDE bei Bedarf mit der aktualisierten Umgebung neu.

In der Bash-Umgebung für Tool-Aufrufe prüft dieser Befehl den Wert, ohne ihn auszugeben:

test "${DISABLE_TELEMETRY:-}" = 1

Der Exit-Status 0 bestätigt, dass die Variable dort auf 1 gesetzt ist. Das ist keine Prüfung des Netzwerkverkehrs. Der Test ermittelt auch nicht die Telemetrieeinstellungen deines Agentenanbieters oder anderer Tools.

Eine Offline-Suche bedeutet zudem nicht, dass der gesamte Ablauf offline ist. Paketdownloads benötigen Netzwerkzugriff. Die Telemetrie von Modern Web Guidance bleibt aktiv, solange sie nicht abgeschaltet wird.

Für modern-web-guidance nennt das README ungefähr 205 tokens, für chrome-extensions ungefähr 175 tokens. Diese Angaben sind keine Obergrenze für eine vollständige Agentenaufgabe. Abgerufene Guides belegen zusätzlichen Kontext. Auch Prüfung und Bearbeitung erfordern weitere Arbeit des Agenten.

Miss den tatsächlichen Verbrauch bei repräsentativen Aufgaben. Berechne Einsparungen nicht allein anhand der angegebenen Skill-Größe.

Die Evaluation als Anlass für einen eigenen Versuch nutzen

Googles Ergebnisse sprechen dafür, den Skill auszuprobieren. Sie belegen aber weder eine allgemeine Erfolgsquote noch garantierte Token-Einsparungen. Der Ergebnisstand im offiziellen README vom 2026-11-08 nennt:

Agent und Modellbezeichnung	Aufgaben / Prüfungen	Ohne Guides	Mit Guides	Zuwachs
claude_code / opus-5-5	215 / 1801	57%	88%	31 Prozentpunkte
codex_cli / gpt-6.1-sol	215 / 1795	54%	82%	28 Prozentpunkte
antigravity_cli / gemini-4-argon	214 / 1673	58%	94%	36 Prozentpunkte

Die Prozentwerte beschreiben bestandene Einzelprüfungen, nicht erfolgreich abgeschlossene Produktionsprojekte. Auch die Anzahl der Aufgaben und Prüfungen unterscheidet sich zwischen den Zeilen. Behandle die Tabelle daher nicht als kontrollierte Rangliste der Modelle für eine identische Arbeitslast.

Die Methodik des Evaluations-Dashboards definiert die Erfolgsquote als bestandene Prüfungen geteilt durch ausgeführte Prüfungen. Läufe, die vor der Bewertung abstürzen oder das Zeitlimit überschreiten, werden zusammen mit ihrem jeweiligen Vergleichslauf ausgeschlossen.

Google hat die Evaluation anhand seiner Guides entwickelt. Die Erläuterung häufiger Agentenfehler beschreibt den Abgleich der Ausgaben mit den Erwartungen aus den Guides. Das sind Ergebnisse des Tool-Anbieters, keine unabhängige Bestätigung der Qualität deiner Anwendung.

Vergleiche vor einer breiten Einführung eine repräsentative Komponentenaufgabe mit und ohne Guides. Halte Modell, Prompt und Browserrichtlinie konstant. Prüfe das relevante Browserverhalten, Regressionstests, den Zeitaufwand und den tatsächlichen Verbrauch.

Für die Kostenentscheidung nutze die Kosten pro abgeschlossener Programmieraufgabe statt nur den Tokenpreis. Behalte Modern Web Guidance, wenn es wichtige Prüfungen in deinem Repository verbessert, ohne unvertretbare Kosten für Review oder Nutzung zu verursachen.