What is Modern Web Guidance?

Modern Web Guidance is a set of skills that embed web platform expertise, best practices, and browser compatibility data directly into your coding agents. Install it with npx modern-web-guidance@latest install, or as a plugin for Claude Code, Copilot CLI, or Antigravity CLI.

Is Modern Web Guidance only for Chrome?

No. Modern Web Guidance is published by Chrome for Developers, but its skills are built on web platform standards and browser compatibility data, so the guidance applies to code that runs in any modern browser.

How do I stop my AI coding agent from generating outdated HTML, CSS and JavaScript?

Install Modern Web Guidance in your agent. Its skills give the agent current web platform best practices and browser compatibility data, so prompts like "Update legacy modal window implementations to use the element" or "Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning" produce modern, well-supported code.

Which AI coding agents does Modern Web Guidance work with?

Modern Web Guidance can be used with your favorite AI coding agents. Documented install paths include the modern-web-guidance CLI (npx modern-web-guidance@latest install), npx skills, Claude Code, Copilot CLI, and Antigravity CLI.

What can I build with Modern Web Guidance?

Build new user experiences (accordion components with smooth animation, tab bars using CSS Anchor Positioning, dashboard cards with container queries), modernize legacy code ( , Popover API), improve security (passkey login with WebAuthn, a starter Content Security Policy, security audits), and improve performance (preload on hover, fix long tasks affecting INP, improve LCP).

Il s'agit d'un aperçu anticipé des conseils pour le Web moderne. Nous ajoutons régulièrement du contenu. N'hésitez pas à contribuer ou à nous faire part de vos commentaires sur GitHub.

Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Modern Web Guidance

Modern Web Guidance est un ensemble de compétences qui intègre l'expertise de la plate-forme Web, les bonnes pratiques et les données de compatibilité des navigateurs directement dans vos agents de codage.

Installer avec la CLI modern-web-guidance (recommandé) :

npx modern-web-guidance@latest install

Premiers pas Afficher sur GitHub

Compatible avec l'agent de codage IA de votre choix

Modern Web Guidance peut être utilisé avec vos agents de codage IA préférés, ce qui vous permet d'accéder à des conseils sur les bonnes pratiques du Web moderne dans votre workflow préféré.

Afficher toutes les options d'installation

`npx skills`

Installez Modern Web Guidance dans votre projet à l'aide d'Agent Skills de Vercel :

npx skills add GoogleChrome/modern-web-guidance

Claude Code

Installez Modern Web Guidance à partir des plug-ins Claude Code :

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

CLI Copilot

Installez les compétences Modern Web Guidance pour la CLI Copilot :

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

Antigravity CLI

Installez les compétences Modern Web Guidance pour la CLI Antigravity :

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

Modern Web Guidance à Google I/O

Regardez la session Modern Web Guidance de Google I/O pour en savoir plus sur les compétences et sur la façon dont elles améliorent votre workflow de développement Web assisté par l'IA.

Regarder

Des invites pour une meilleure expérience utilisateur

Essayez quelques-uns des exemples de prompts suivants pour appeler Modern Web Guidance dans votre workflow de codage assisté par l'IA afin de créer des fonctionnalités, de moderniser l'ancien code et d'accélérer votre application.

Créer de nouvelles expériences utilisateur

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.

Moderniser l'ancien code

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.

Améliorer la sécurité

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.

Améliorer les performances

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.

Atelier de programmation "Présentation de Modern Web Guidance"

Découvrez comment guider vos assistants de codage IA pour produire du code Web de pointe et interopérable. Dans cet atelier de programmation d'introduction, vous allez auditer une ancienne application Web et utiliser l'outil Modern Web Guidance pour inciter les agents à adopter les bonnes pratiques modernes. Apprenez à définir des cibles de navigateur Baseline, à optimiser les Core Web Vitals et à transformer des résultats d'IA génériques en solutions Web hautes performances.

Premiers pas

Utiliser les compétences Modern Web Guidance avec les Outils de développement Chrome pour les agents

Combinez les Outils de développement Chrome pour les agents avec les compétences Modern Web Guidance pour améliorer votre workflow de développement Web. Exécutez des audits de performances en temps réel, inspectez les arbres d'accessibilité et capturez les journaux de la console, puis appliquez automatiquement des corrections précises au code Web moderne.

Découvrir comment contribuer

Vous avez des idées pour améliorer Modern Web Guidance ? Découvrez comment contribuer.