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. Cela permet d'éviter que vos agents de codage n'utilisent des modèles anciens et de les orienter vers des solutions qui exploitent la puissance et les capacités de la plate-forme Web moderne.
Installation
Modern Web Guidance peut être installé et utilisé avec n'importe quel agent de codage compatible avec les compétences.
CLI modern-web-guidance (recommandé)
La méthode d'installation recommandée consiste à utiliser la CLI modern-web-guidance créée par l'équipe Chrome. L'installation de Modern Web Guidance via la CLI modern-web-guidance activera les mises à jour automatiques. Vous pouvez l'installer à partir de la CLI modern-web-guidance comme suit :
npx modern-web-guidance@latest install
Si vous développez des extensions Chrome, nous vous recommandons d'utiliser la commande suivante :
npx modern-web-guidance@latest install --choose
Un assistant interactif s'exécute pour installer les compétences selon vos préférences.
Si vous préférez installer Modern Web Guidance sans utiliser la CLI modern-web-guidance, consultez les instructions spécifiques à l'agent ci-dessous. Notez toutefois que la plupart de ces options ne sont pas compatibles avec les mises à jour automatiques.
Antigravity
Téléchargez Antigravity et activez "modern-web-guidance" lors du processus d'installation, ou depuis la page Paramètres sous Personnalisations, puis Plug-ins Build with Google.
CLI Antigravity
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Vous trouverez Modern Web Guidance dans le Gestionnaire de compétences, disponible sous Paramètres > Assistant IA > Compétences. Sélectionnez une compétence pour ouvrir sa page d'informations. Pour installer la compétence, cliquez sur le bouton Installer afin de l'appliquer à l'instance d'IDE actuelle.
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
claude plugin install modern-web-guidance@claude-plugins-official
CLI Claude Code
L'installation de Modern Web Guidance pour une utilisation avec la CLI Claude Code se fait en trois étapes :
1. Ajoutez la place de marché :
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Installez le plug-in depuis Marketplace :
/plugin install modern-web-guidance@googlechrome
3. Actualisez les plug-ins :
/reload-plugins
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
CLI Copilot
L'installation de Modern Web Guidance pour une utilisation avec Copilot se fait en deux étapes :
1. Ajoutez la place de marché :
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Installez le plug-in depuis Marketplace :
/plugin install modern-web-guidance@googlechrome
Oie
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Grok
grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust
Code Kimi
/plugins install https://github.com/GoogleChrome/modern-web-guidance
Explorer avant l'installation
Évaluez la bibliothèque de guides Modern Web Guidance avant l'installation en effectuant une recherche ou en récupérant nos guides par ID. Pour ce faire, utilisez la commande search de la CLI pour trouver l'ID du cas d'utilisation à l'aide d'un prompt :
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Un objet JSON s'affiche alors dans votre terminal :
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"ui-behaviors","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"ui-behaviors","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"ui-behaviors","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
En lisant les valeurs description, vous pouvez ensuite choisir la valeur id qui reflète le mieux votre objectif et utiliser la commande retrieve :
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
Dans ce cas, le guide Markdown pour le cas d'utilisation animate-to-from-top-layer s'affiche dans le terminal. Pour les autres guides, remplacez animate-to-from-top-layer par un ID de guide valide.
Pourquoi utiliser Modern Web Guidance ?
Modern Web Guidance offre un avantage aux développeurs Web par rapport aux modèles d'IA non assistés pour trois raisons distinctes :
- Les agents de codage IA ont tendance à utiliser par défaut des solutions plus anciennes et obsolètes pour résoudre les problèmes de développement Web modernes. Ces solutions contiennent souvent du code JavaScript pour fournir des fonctionnalités à des problèmes qui sont mieux résolus par les API CSS et HTML modernes.
- Historiquement, les modèles d'IA n'ont pas connaissance des dernières fonctionnalités de la plate-forme Web ou disposent d'informations incorrectes à leur sujet.
- Enfin, les modèles d'IA ont tendance à faire des recommandations obsolètes qui ne tiennent pas compte des exigences du projet ni des critères de compatibilité des navigateurs, plutôt que d'adapter les conseils aux exigences Baseline d'un projet donné.
Modern Web Guidance corrige ces lacunes et s'assure que votre workflow de codage assisté par IA dispose des outils nécessaires pour adopter en priorité les nouvelles fonctionnalités de la plate-forme Web, tout en tenant compte des solutions de remplacement.
Que contient Modern Web Guidance ?
Modern Web Guidance inclut des bonnes pratiques pour plus de 100 cas d'utilisation de développement Web dans plusieurs disciplines de base. En arrière-plan, il s'agit d'une compétence d'agent qui indique à votre agent de codage comment appeler la CLI modern-web-guidance pour trouver et récupérer les meilleurs conseils pour votre cas d'utilisation.
- Expérience utilisateur : transitions d'affichage, style CSS
scrollbar-color, et animations d'entrée et de sortie. - CSS : requêtes de conteneur, espaces colorimétriques modernes tels que
oklch, mise en page de sous-grille CSS,text-wrapet ajustement de la hauteur de ligne typographique. - Performances : diagnostics Interaction to Next Paint (INP),
scheduler.yieldpour diviser les tâches longues, planification des tâches en arrière-plan et priorisation du chargement des images. - Formulaires : champs de saisie à redimensionnement automatique (
field-sizing: content) et styles de validation précis avec:user-invalid. - Composants d'interface utilisateur intégrés : contrôle direct des boîtes de dialogue, positionnement des ancres CSS pour les info-bulles et
popover. - Accessibilité : annonces d'erreur accessibles et gestion du focus clavier.
- IA intégrée : utilisez des modèles client locaux sur l'appareil (API natives de détection de la langue, de résumé et de traduction).
- Clés d'accès : enregistrement, authentification et gestion des clés d'accès.
Voici quelques-uns des guides de chaque catégorie. Pour voir tous les guides, vous pouvez consulter la liste complète des guides.
Référence
Baseline permet aux développeurs de savoir clairement quelles fonctionnalités Web sont interopérables dans les principaux moteurs de navigateur. Si une fonctionnalité Web est Baseline, vous pouvez faire confiance au niveau de compatibilité du navigateur. Les fonctionnalités Web appartiennent à l'une des trois catégories définies par Baseline :
- Disponibilité limitée signifie que la fonctionnalité n'est pas interopérable.
- Nouvellement disponible signifie que la fonctionnalité est devenue interopérable au cours des 30 derniers mois.
- Largement disponible signifie que la fonctionnalité est interopérable depuis au moins 30 mois.
Bien que Baseline soit une définition de l'interopérabilité des fonctionnalités Web, il s'agit également d'un aspect configurable de votre projet. Vous pouvez choisir une cible Baseline, puis configurer votre projet pour l'utiliser en l'ajoutant à votre fichier AGENTS.md ou CLAUDE.md, par exemple :
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance et solutions de remplacement des fonctionnalités
Modern Web Guidance utilise un large éventail de fonctionnalités Web modernes. Certaines d'entre elles peuvent être récemment ou largement disponibles dans Baseline, mais d'autres peuvent être en disponibilité limitée. Lorsqu'une fonctionnalité n'est pas largement disponible, les guides de cas d'utilisation fournissent aux agents des instructions spécifiques pour assurer une compatibilité plus large dans les navigateurs qui ne la prennent pas en charge. Dans de nombreux cas, les créations de remplacement sont implémentées en tant qu'améliorations progressives, où la fonctionnalité moderne peut être utilisée partout où elle est compatible. Si des polyfills sont nécessaires pour les navigateurs non compatibles, les agents sont toujours invités à les charger de manière conditionnelle afin qu'ils n'entraînent un coût que si nécessaire.
Comment la précision est-elle assurée ?
Chaque cas d'utilisation de Modern Web Guidance contient un ensemble d'évaluations qui sont calibrées en continu pour garantir des résultats de qualité.
Les évaluations de cas d'utilisation exécutent un harnais d'assurance qualité automatisé pour tester le comportement correct de l'agent, Playwright jouant un rôle central :
- Pour chaque guide, un script Playwright est développé pour tester si les détails d'implémentation du guide ont été suivis (par exemple, si
@media (prefers-reduced-motion: reduce)a été respecté lorsqu'il s'agit d'une exigence). - Ces scripts Playwright sont continuellement calibrés par rapport à une implémentation de démonstration de référence "correcte" qui attend un taux de réussite de 100 %. À l'autre extrémité, les scripts vérifient une implémentation délibérément défectueuse qui attend un taux de réussite de 0 %.
- Si l'une des implémentations "correctes" et délibérément défectueuses, ou les deux, ne parviennent pas à produire des taux de réussite de 100 % et 0 %, respectivement, un générateur effectue automatiquement une nouvelle tentative en utilisant le contexte jusqu'à ce qu'un étalonnage de 100 % soit atteint.
- Enfin, des évaluations de bout en bout sont appliquées à une application de base. L'une de ces évaluations n'est pas guidée (il s'agit d'un contrôle) et utilise les données d'entraînement par défaut sans appeler Modern Web Guidance pour effectuer une tâche. Une autre évaluation (le test) traite la même tâche à l'aide de Modern Web Guidance.
Nos évaluations sont exécutées plusieurs fois par semaine avec des modèles et des agents de codage de pointe, ce qui nous donne une idée précise des performances des agents avec et sans nos conseils. En moyenne, les premiers résultats montrent une amélioration de 37 points de pourcentage de l'adhésion aux bonnes pratiques modernes lorsque les agents sont équipés de Modern Web Guidance. Toutefois, vos résultats peuvent varier en fonction des exigences de votre projet, du modèle, des prompts que vous écrivez et de vos outils de codage agentifs préférés.
Étapes suivantes
Vous disposez désormais d'un aperçu général de Modern Web Guidance et de son potentiel pour faciliter l'adoption des bonnes pratiques du Web moderne dans votre workflow de codage IA. Vous pouvez maintenant explorer les guides fournis par Modern Web Guidance.