Wählen Sie aus den aufgeführten Modern Web Guidance-Skills aus, die zu Ihrer aktuellen Phase im Webentwicklungszyklus passen – von der ersten Gestaltung bis zur endgültigen Sicherheitsimplementierung.
Wichtige Webdisziplinen
Orchestratoren, die Ihnen helfen, Ihre Arbeit nach Webdisziplin zu optimieren und zu fokussieren.
accessibility
/modern-web-guidance accessibility
Dient als zentraler Leitfaden für die Überprüfung, Korrektur und Implementierung effektiver Muster für die Barrierefreiheit in Ihrer gesamten Anwendung.
accessibility-Skill auf GitHub ansehen
performance
/modern-web-guidance performance
Sie können damit Core Web Vitals optimieren, die Seitenladezeit-Latenz verringern und die Reaktionsschnelligkeit auf Nutzereingaben verbessern.
performance-Skill auf GitHub ansehen
user-experience
/modern-web-guidance user-experience
Es dient als Toolkit für die Benutzeroberfläche, mit dem Sie schnell responsive benutzerdefinierte Elemente, flüssige Übergänge und moderne Formatierungsmuster implementieren können.
user-experience-Skill auf GitHub ansehen
Webtechnologien
Diese Kernkompetenzen bilden die Grundlage für jede moderne Anwendung und sorgen dafür, dass Ihr Projekt von Anfang an auf modernen Best Practices basiert, die semantisches HTML, Geschwindigkeit und Interoperabilität berücksichtigen.
html
/modern-web-guidance html
Aktionsorientierte Richtlinien für moderne HTML-Architektur, Semantik, native interaktive APIs (Dialog, Popover, Details), Fokusverwaltung und Ressourcenpriorisierung. Verwenden Sie diesen Leitfaden, wenn Sie Webdokumente strukturieren, native Overlays implementieren oder die Reihenfolge des Ressourcenladens optimieren möchten.
css
/modern-web-guidance css
Aktionsorientierte Richtlinien für moderne CSS-Architektur, Layouts und Leistung. Dieser Leitfaden kann Ihnen beim Erstellen von Styles, Verwalten von Designsystemen oder Optimieren des Webrenderings helfen.
css-layout
/modern-web-guidance css-layout
Moderne CSS-Layouts wie Flexbox, Grid, Subgrid, Container-Abfragen, Ankerpositionierung und intrinsische Größenanpassung. Verwenden Sie diese Fähigkeit, wenn Sie responsive UI-Komponenten oder Seitenlayouts entwerfen.
css-layout-Skill auf GitHub ansehen
forms
/modern-web-guidance forms
Best Practices für die Entwicklung barrierefreier, sicherer und nutzerfreundlicher Webformulare. Diese Anleitung kann Ihnen beim Erstellen oder Ändern von Formularen, Eingaben und Übermittlungsabläufen helfen.
forms-Skill auf GitHub ansehen
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
C- und C++-Code für das moderne Web mit WebAssembly kompilieren. Verwenden Sie diesen Skill, wenn Sie C++-Code portieren, C++-Bibliotheken mit Emscripten erstellen oder leistungsstarke C++-Komponenten im Browser einrichten müssen.
cpp-on-the-web-Skill auf GitHub ansehen
Browserfunktionen (aktivieren)
Mit diesen Fähigkeiten können Sie Chrome-Erweiterungen entwickeln, die modernen Standards wie Manifest V3 entsprechen. Außerdem wird die Veröffentlichung im Chrome Web Store vereinfacht, da Sie Unterstützung bei der Vorbereitung Ihrer Metadaten, Datenschutzerklärungen und Berechtigungsbegründungen erhalten. Diese Skills müssen aktiviert werden und sind nicht standardmäßig aktiviert.
chrome-extensions
/modern-web-guidance chrome-extensions
Entwickeln Sie sichere und richtlinienkonforme Chrome-Erweiterungen mit Manifest V3, die häufige Fehler im Zusammenhang mit dem Lebenszyklus von Service Workern und Sandboxing vermeiden. Wenn Sie zustimmen möchten, müssen Sie den Skill chrome-extensions angeben:
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
chrome-extensions-Skill auf GitHub ansehen
Sicherheit, Vertrauen und Identität
Diese Skills konzentrieren sich auf das Vertrauen der Nutzer, indem Anwendungen durch defensive HTTP-Header und Ursprungsisolation vor clientseitigen Exploits wie XSS geschützt werden. Entwickler können auch Authentifizierungsabläufe mit Passkeys entwickeln, das Drittanbieter-Tracking minimieren und Skills verwenden, um C/C++-Bibliotheken in WebAssembly-Module zu portieren.
security
/modern-web-guidance security
Präventive Sicherheitsrichtlinien für Webentwickler (XSS, CSP, Cookies, Cross-Origin Isolation). Mit dieser Fähigkeit können Sie den Prozess der Prüfung, des Tests und der sicheren Bereitstellung von Sicherheitsrichtlinien steuern.
security-Skill auf GitHub ansehen
passkeys
/modern-web-guidance passkeys
Umfassende Orientierung und übergreifende Grundsätze für die Implementierung von WebAuthn und Passkeys in Webanwendungen. Verwenden Sie diesen Leitfaden, wenn Sie sich mit der Registrierung, Authentifizierung, Verwaltung oder erneuten Authentifizierung von Passkeys befassen.
passkeys-Skill auf GitHub ansehen
privacy
/modern-web-guidance privacy
Aktionsorientierte Richtlinien für Webentwickler zur Implementierung von Privacy by Design, Datenminimierung, Drittanbieter-Audits und sicherem Umgang mit Daten. Verwenden Sie diese Funktion, wenn Sie Anwendungen entwickeln, Drittanbieterdienste einbinden, Nutzerdaten verarbeiten oder Sicherheitsheader konfigurieren.
privacy-Skill auf GitHub ansehen
Agentische Systeme
Diese Kompetenzen helfen, die Lücke zwischen Ihrer Webanwendung und KI-Workflows mit WebMCP zu schließen. Wenn Sie clientseitige Browserfunktionen als interaktive Tools zur Verfügung stellen, können Sie KI-Agents anweisen, direkt mit Anwendungsfunktionen zu interagieren.
webmcp
/modern-web-guidance webmcp
WebMCP implementieren, um clientseitige Browserfunktionen als interaktive Tools für KI-Agenten verfügbar zu machen
webmcp-Skill auf GitHub ansehen
Nächste Schritte
Nachdem Sie nun die Modern Web Guidance kennengelernt haben, können Sie sie selbst ausprobieren. Unterstützte Funktionen und Anwendungsfälle in Modern Web Guidance sowie Beispiel-Prompts für den Einstieg