Modern Web Guidance



Modern Web Guidance ist eine Reihe von Skills, mit denen Sie Fachwissen zur Webplattform, Best Practices und Daten zur Browserkompatibilität direkt in Ihre Coding-Agents einbinden können.

Mit der modern-web-guidance-Befehlszeile installieren (empfohlen):

npx modern-web-guidance@latest install
Los gehts Auf GitHub ansehen

Kompatibel mit Ihrem bevorzugten KI-Coding-Agenten

Modern Web Guidance kann mit Ihren bevorzugten KI-Coding-Agenten verwendet werden, sodass Sie in Ihrem bevorzugten Workflow Zugriff auf Best Practices für das moderne Web haben.
Alle Installationsoptionen ansehen

Installieren Sie Modern Web Guidance in Ihrem Projekt mit den Agent Skills von Vercel:

npx skills add GoogleChrome/modern-web-guidance

Installieren Sie Modern Web Guidance aus den Claude Code-Plug-ins:

claude plugin install modern-web-guidance@claude-plugins-official

Installieren Sie Modern Web Guidance-Skills für die Copilot-Befehlszeile:

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Installieren Sie Modern Web Guidance-Skills für die Antigravity CLI:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Sehen Sie sich die Session Modern Web Guidance auf der Google I/O an, um mehr über die Skills zu erfahren und wie sie Ihren KI-gestützten Webentwicklungs-Workflow verbessern.
Jetzt ansehen

Aufforderungen für eine bessere Nutzererfahrung

Probieren Sie einige der folgenden Beispiel-Prompts aus, um Modern Web Guidance in Ihrem KI-gestützten Coding-Workflow aufzurufen, um neue Funktionen zu erstellen, Legacy-Code zu modernisieren und Ihre Anwendung zu beschleunigen. 
Create an accordion-style stats component that smoothly animates on open and close.
 
Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.
 
Design a dashboard card that uses container queries to adapt its layout to its own width.
 
Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.
 
Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.
 
Implement a passkey-based login flow using the latest WebAuthn features.
 
Implement a starter Content Security Policy (CSP) without breaking my app.
 
Perform a security audit of my site and suggest improvements.
 
Set up my app to begin preloading pages when users hover over important links.
 
My app has lots of long tasks, and its INP is affected. Help me fix it.
 
Help me improve my app's LCP.
Erfahren Sie, wie Sie Ihre KI-Programmierassistenten dazu bringen, innovativen, interoperablen Webcode zu erstellen. In diesem einführenden Codelab prüfen Sie eine Legacy-Webanwendung und verwenden das Modern Web Guidance-Tool, um KI-Agenten zu modernen Best Practices anzuleiten. Hier erfahren Sie, wie Sie Baseline-Browserziele festlegen, Core Web Vitals optimieren und generische KI-Ausgaben in leistungsstarke Weblösungen umwandeln.
Los gehts
Kombinieren Sie die Chrome-Entwicklertools für KI-Agenten mit Modern Web Guidance-Skills, um Ihren Webentwicklungs-Workflow zu optimieren. Führen Sie Leistungsprüfungen in Echtzeit durch, prüfen Sie die Barrierefreiheitsstruktur und erfassen Sie Konsolenprotokolle. Anschließend können Sie automatisch präzise Korrekturen am modernen Webcode vornehmen.
Weitere Informationen

So fügst du Beiträge hinzu

Haben Sie Ideen, wie wir Modern Web Guidance verbessern können? Hier erfahren Sie, wie Sie mitmachen können.
Weitere Informationen