„Modern Web Guidance“ umfasst eine Reihe von bewährten und von Experten geprüften Fähigkeiten, die Ihre KI-Coding-Agents bei vielen gängigen Anwendungsfällen unterstützen, um moderne Webanwendungen zu entwickeln, die barrierefrei, leistungsstark und sicher sind.

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-Agents verwendet werden, sodass Sie in Ihrem bevorzugten Workflow auf Anleitungen zu Best Practices für das moderne Web zugreifen können.
Alle Installationsoptionen ansehen

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

npx skills add GoogleChrome/modern-web-guidance

Installieren Sie die Modern Web Guidance-Skills für Claude Code:

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

Installieren Sie die Fähigkeiten für moderne Webanleitungen für die Copilot-CLI:

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

Installieren Sie die Modern Web Guidance-Skills in der Antigravity- Befehlszeile:

agy plugin install https://github.com/GoogleChrome/modern-web-guidance

Aufforderungen für eine bessere Nutzererfahrung

Probieren Sie einige der folgenden Beispielprompts aus, um in Ihrem KI-gestützten Coding-Workflow moderne Webanleitungen aufzurufen, mit denen Sie neue Funktionen entwickeln, Legacy-Code modernisieren und Ihre App beschleunigen können. 
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.
Kombinieren Sie Chrome-Entwicklertools für Agenten mit Modern Web Guidance-Skills, um Ihren Webentwicklungs-Workflow zu optimieren. Führen Sie Leistungsprüfungen in Echtzeit durch, prüfen Sie Barrierefreiheitsbäume und erfassen Sie Konsolenprotokolle. Wenden Sie dann automatisch präzise Korrekturen für modernen Webcode an.
Weitere Informationen

So fügst du Beiträge hinzu

Haben Sie Ideen zur Verbesserung der Modern Web Guidance? So können Sie mitmachen
Weitere Informationen