Sehen Sie sich die folgenden Disziplinen an, um die Bereiche der Anleitung zu erkunden.
Kernbereiche
Best Practices für die Entwicklung sicherer und hochwertiger Webanwendungen.
accessibility
Bewerten, beheben und implementieren Sie effektive Muster für die Barrierefreiheit in Ihrer gesamten Anwendung.
accessibility-Anleitung auf GitHub ansehen
performance
Optimieren Sie die Core Web Vitals, verkürzen Sie die Seitenladezeiten und verbessern Sie die Reaktionsschnelligkeit auf Nutzereingaben.
performance-Anleitung auf GitHub ansehen
privacy
Implementieren Sie Datenschutz durch Design, Datenminimierung, Audits durch Dritte und einen sicheren Umgang mit Daten.
privacy-Anleitung auf GitHub ansehen
security
Implementieren Sie präventive Sicherheitsrichtlinien, um sich vor gängigen Websicherheitslücken (XSS, CSP, Cookies, Cross-Origin Isolation) zu schützen.
security-Anleitung auf GitHub ansehen
Webtechnologien
Best Practices für die Verwendung von Web-Kernsprachen, ‑Technologien und ‑Laufzeitumgebungen.
html
Implementieren Sie eine moderne HTML-Architektur, Semantik, native interaktive APIs (Dialog, Popover, Details), Fokusverwaltung und Ressourcenpriorisierung.
html-Anleitung auf GitHub ansehen
css
Moderne CSS-Architektur, Layouts und Best Practices für die Leistung anwenden
css-Anleitung auf GitHub ansehen
css-layout
Erstellen Sie responsive Layouts mit modernen CSS-Funktionen wie Flexbox, Grid, Subgrid, Container-Abfragen, Ankerpositionierung und intrinsischer Größenanpassung.
css-layout-Anleitung auf GitHub ansehen
forms
Barrierefreie, sichere und nutzerfreundliche Webformulare erstellen
forms-Anleitung auf GitHub ansehen
passkeys
WebAuthn und Passkeys in Webanwendungen gemäß modernen, übergreifenden Prinzipien implementieren
passkeys-Anleitung auf GitHub ansehen
webmcp
WebMCP implementieren, um clientseitige Browserfunktionen als interaktive Tools für KI-Agenten verfügbar zu machen
webmcp-Anleitung auf GitHub ansehen
Browserfunktionen (Opt-in)
Best Practices für die Arbeit mit speziellen Browser-APIs und ‑Plattformen. Diese Skills sind von modern-web-guidance getrennt und müssen einzeln installiert werden.
chrome-extensions
Erstellen Sie sichere und richtlinienkonforme Chrome-Erweiterungen unter Manifest V3, die häufige Fallstricke im Zusammenhang mit dem Service Worker-Lebenszyklus und der Sandbox vermeiden. Außerdem können Sie die Veröffentlichung im Chrome Web Store optimieren, indem Sie Metadaten, Datenschutzerklärungen und Berechtigungsbegründungen vorbereiten. Wählen Sie bei der Installation von Modern Web Guidance den Skill chrome-extensions aus, um zuzustimmen:
npx modern-web-guidance@latest install --choose
chrome-extensions-Skill auf GitHub ansehen
Nächste Schritte
Nachdem Sie nun Modern Web Guidance kennengelernt haben, können Sie es selbst ausprobieren. Unterstützte Funktionen und Anwendungsfälle in Modern Web Guidance sowie Beispiel-Prompts für den Einstieg