Les conseils pour le Web moderne sont un ensemble de compétences durables et validées par des experts qui guident vos agents de codage d'IA dans de nombreux cas d'utilisation courants afin de créer des expériences Web modernes, accessibles, performantes et sécurisées.

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

Vous pouvez utiliser les conseils pour le Web moderne avec vos agents de codage IA préférés. Vous avez ainsi accès à des conseils sur les bonnes pratiques pour le Web moderne dans votre workflow préféré.
Afficher toutes les options d'installation

Installez Modern Web Guidance dans votre projet à l'aide des compétences d'agent de Vercel :

npx skills add GoogleChrome/modern-web-guidance

Installez les compétences de conseils pour le Web moderne pour 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

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

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

Installez les compétences Modern Web Guidance dans Gemini CLI :

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

Des invites pour une meilleure expérience utilisateur

Essayez quelques-unes des requêtes exemples suivantes pour invoquer des conseils sur le Web moderne dans votre workflow de codage assisté par l'IA afin de créer de nouvelles fonctionnalités, de moderniser le code existant et d'accélérer votre application. 
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.
Associez les Outils pour les développeurs Chrome pour les agents aux compétences de conseils pour le Web moderne afin d'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.
En savoir plus

Découvrir comment contribuer

Vous avez des idées pour améliorer les conseils sur le Web moderne ? Découvrez comment contribuer !
En savoir plus