Modern Web Guidance 1.0 : installer sur Claude Code, Codex et Cursor

Installez Modern Web Guidance 1.0 comme skill du projet, puis vérifiez son utilisation sur une tâche frontend avant de l’étendre au dépôt. Utilisez legacy-scan pour préparer des propositions de modernisation à examiner, pas pour réécrire du code sans supervision. Définissez DISABLE_TELEMETRY=1 avant le premier appel si vous ne souhaitez pas envoyer de télémétrie d’utilisation de Modern Web Guidance.

Ce que change Modern Web Guidance 1.0

Modern Web Guidance fournit à votre agent de programmation des consignes ciblées sur les fonctions du navigateur avant qu’il écrive du code. La version 1.0, publiée le 10 novembre 2026, comprend 203 guides centrés sur des cas d’usage. Ils couvrent 250 fonctionnalités de la plateforme web. Les équipes Chrome, Edge, Firefox et MDN pilotent le projet avec les contributeurs de la communauté.

La skill, un ensemble d’instructions pour l’agent, lui demande de rechercher les guides pertinents et d’en récupérer le contenu. L’agent doit ensuite appliquer leurs règles d’implémentation et leurs solutions de repli pour la compatibilité.

La recherche associe un modèle local d’embeddings à BM25, une méthode de classement par mots-clés. Selon le README officiel du projet, cette recherche ne nécessite ni API de modèle externe ni clé d’API.

L’outil est utile lorsqu’un agent connaît une API du navigateur, mais oublie des détails sur les transitions ou les solutions de repli. Vous devez toujours définir les navigateurs pris en charge, examiner les modifications et exécuter les tests de l’application.

Installer la skill dans Claude Code, Codex ou Cursor

Utilisez la même installation en ligne de commande, ou CLI, à l’échelle du projet pour les trois agents. Le code de la commande d’installation appelle Vercel Skills. Au 2026-11-13, utilisez Node.js 22.20 ou une version ultérieure pour respecter le prérequis actuel de l’installateur Skills. Il vous faut aussi npm/npx et l’autorisation de télécharger les paquets nécessaires.

Ouvrez Bash à la racine du projet. Désactivez la télémétrie de Modern Web Guidance avant de lancer la commande officielle d’installation :

export DISABLE_TELEMETRY=1
npx modern-web-guidance@latest install

L’installateur interactif permet de choisir les agents cibles. Sélectionnez Claude Code, Codex, Cursor ou seulement ceux que vous utilisez. Pour un essai dans un dépôt précis, conservez une installation limitée au projet. C’est le périmètre par défaut de l’installateur.

Avec cette méthode d’installation par CLI, vérifiez les fichiers du projet et les modes d’appel suivants :

Agent	Fichier de la skill dans le projet	Appel explicite
Claude Code	.claude/skills/modern-web-guidance/SKILL.md	Saisissez /modern-web-guidance.
Codex	.agents/skills/modern-web-guidance/SKILL.md	Utilisez /skills ou mentionnez $modern-web-guidance.
Cursor	.agents/skills/modern-web-guidance/SKILL.md	Saisissez / dans le chat Agent et sélectionnez la skill.

Ces répertoires correspondent aux emplacements actuellement définis par l’installateur pour chaque agent. Ce ne sont ni des caches de plugins ni des chemins d’installation globale.

Ouvrez une nouvelle session de l’agent dans le même dépôt et appelez explicitement la skill pour la première vérification. Si elle n’apparaît pas, contrôlez l’agent sélectionné, le périmètre d’installation et l’emplacement du fichier avant de la réinstaller.

Pour mettre à jour une skill installée par CLI, exécutez cette commande depuis le répertoire du projet :

npx modern-web-guidance@latest update

Examinez les fichiers de la skill qui ont changé, puis répétez la vérification de récupération des guides décrite ci-dessous. Ces commandes utilisent @latest. Une future mise à jour ne restera donc pas nécessairement sur la version 1.0.

L’installation depuis un catalogue de plugins est une autre méthode. Suivez sa propre procédure de mise à jour, séparément de celle de la CLI. Pour comprendre le format et la gestion des plugins Claude Code, consultez le guide pour installer, vérifier et supprimer des plugins Claude Code.

Vérifier la recherche, la récupération et l’utilisation par l’agent

Vérifiez à la fois la CLI et l’utilisation de ses résultats par l’agent. La réussite d’une commande dans le terminal ne prouve pas que l’agent a chargé la skill.

Exécutez dans Bash l’exemple documenté pour une boîte de dialogue :

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

La recherche renvoie du JSON contenant les identifiants et les descriptions des guides. La récupération renvoie le contenu du guide choisi. Si la sortie est volumineuse, la CLI peut afficher le chemin d’un fichier sauvegardé à la place. Demandez à l’agent de lire ce fichier en entier.

Appelez ensuite la skill installée et donnez à l’agent une tâche limitée. Le prompt suivant conserve le framework et la politique de prise en charge des navigateurs, tout en exigeant les guides avant les modifications :

Use the modern-web-guidance skill to add an animated modal dialog.
Keep the existing framework and browser support policy.
Retrieve the relevant guidance before editing.
Afterward, report the guide IDs, required fallbacks, and tests run.

Consultez les traces d’appels aux outils pour confirmer qu’une recherche et une récupération ont réellement eu lieu. Le rapport final doit identifier le guide et expliquer les décisions d’implémentation qui en découlent. Affirmer que l’agent a « suivi les bonnes pratiques » ne suffit pas.

Le guide d’animation des boîtes de dialogue inclus dans la version publiée fournit un point de contrôle concret. Si le code utilise la propriété raccourcie transition, placez transition-behavior: allow-discrete après elle pour éviter la réinitialisation de sa valeur.

Testez l’ouverture et la fermeture, le comportement avec la réduction des animations et les interactions existantes de la boîte de dialogue.

Si la première commande échoue avant de renvoyer des résultats, vérifiez d’abord Node.js et les autorisations de téléchargement des paquets. Les instructions de la skill publiées avec cette version distinguent le téléchargement du paquet de son fonctionnement hors ligne. Autorisez la commande du paquet nécessaire plutôt que n’importe quelle exécution de npx.

Si les résultats ne conviennent pas, essayez une requête décrivant un comportement précis, comme « confirmation modal dialog ». Ne récupérez pas un guide sans rapport avec la tâche pour donner l’impression que la procédure a réussi.

Utiliser legacy-scan pour préparer une revue, pas une réécriture automatique

Utilisez legacy-scan pour repérer les possibilités de modernisation dans un dépôt ou un répertoire. Pour modifier un composant précis, préférez la recherche et la récupération de guides. La documentation du processus de modernisation explique cette distinction.

Lancez une analyse avec une sortie lisible depuis la racine du projet :

npx modern-web-guidance@latest legacy-scan .

Pour obtenir une sortie structurée que l’agent pourra examiner, utilisez :

npx modern-web-guidance@latest legacy-scan . --json

Vous obtenez des éléments à vérifier, associés aux guides pertinents, et non des fichiers source réécrits. Le scanner statique n’appelle aucun modèle de langage. L’analyse et les modifications ultérieures de l’agent utilisent toujours son accès habituel au modèle.

Demandez à l’agent de suivre les quatre étapes documentées :

1. Analyser le répertoire choisi et rassembler les éléments susceptibles d’être modifiés.
2. Vérifier chaque résultat dans son contexte, à l’aide des règles keepWhen/dropWhen. Écarter les faux positifs au lieu de considérer chaque correspondance comme une modification obligatoire.
3. Présenter les résultats vérifiés et les changements proposés. Obtenir votre accord avant de commencer la modernisation.
4. Appliquer les changements approuvés à partir des guides correspondants, après les avoir récupérés. Exécuter les tests existants et analyser de nouveau le périmètre modifié.

Examinez particulièrement les solutions de repli intentionnelles et le code de compatibilité conditionné par des vérifications de prise en charge. Une implémentation qui semble ancienne peut rester nécessaire pour les navigateurs que votre projet prend en charge.

Le scanner de la version 1.0 couvre environ 20% des guides : ceux qui disposent de règles déterministes pour détecter les anciennes pratiques. Ce chiffre représente une part du catalogue de guides, pas de votre code. L’absence de résultat ne prouve donc pas que le projet est entièrement modernisé, accessible ou correct.

Définir la politique de navigateurs et .mwgrc avant les changements

Explicitez les exigences de compatibilité et laissez les guides expérimentaux désactivés tant que le projet n’en a pas besoin. Par défaut, la skill considère les fonctionnalités Baseline Widely available comme utilisables sans solution de repli.

Les instructions de configuration de Baseline expliquent comment consigner la cible du projet dans AGENTS.md ou CLAUDE.md. Conservez votre véritable politique de prise en charge. Ne la modifiez pas uniquement pour accepter un remplacement proposé.

Le fichier JSON facultatif .mwgrc, placé à la racine du projet, contrôle l’accès aux guides expérimentaux. Pour conserver une politique prudente, intégrez ces champs à la configuration existante :

{
  "allowOriginTrials": false,
  "allowVolatileFeatures": false
}

Les guides sur les fonctionnalités volatiles concernent des fonctions disponibles dans un seul moteur de navigateur. Elles ont été publiées au cours des 3 derniers mois ou sont encore en cours de stabilisation. Ces guides restent visibles dans la recherche, mais leur récupération exige une autorisation explicite. Les guides Origin Trial disposent d’une autorisation distincte.

Pour autoriser les guides sur les fonctionnalités volatiles, exécutez cette commande dans votre propre terminal Bash interactif :

npx modern-web-guidance@latest set-allow-volatile-features

Pour les guides Origin Trial, utilisez la commande distincte uniquement lorsque cela est nécessaire :

npx modern-web-guidance@latest set-allow-origin-trials

Les commandes demandent confirmation et définissent le booléen correspondant sur true. Vérifiez le chemin de configuration affiché et la clé modifiée, puis réessayez de récupérer le guide.

Le refus dans un agent ou un shell non interactif est volontaire. L’implémentation de l’autorisation exige un terminal interactif contrôlé par une personne. Ne demandez pas à l’agent de contourner cette vérification.

Ces paramètres débloquent les guides. Ils n’activent pas de fonctionnalité du navigateur, n’inscrivent pas votre site à un Origin Trial et n’élargissent pas votre politique de navigateurs.

Maîtriser la télémétrie et le coût du contexte

Désactivez la télémétrie dans l’environnement qui lance réellement Modern Web Guidance, pas seulement dans un autre terminal. La section sur la confidentialité du projet indique que les données comprennent notamment le nombre d’installations et le nom de l’agent appelant. Elles incluent aussi les identifiants des guides récupérés et les requêtes de recherche générées par l’agent. Selon cette description, les prompts bruts des utilisateurs ne sont pas collectés.

Les requêtes de recherche peuvent néanmoins révéler des détails de la tâche. Ajoutez export DISABLE_TELEMETRY=1 à votre configuration de démarrage de Bash, par exemple .bashrc. Vérifiez que l’environnement de commandes de l’agent hérite de cette variable. Si nécessaire, redémarrez l’agent ou l’IDE déjà ouvert avec l’environnement mis à jour.

Dans l’environnement Bash utilisé pour les appels aux outils, cette commande vérifie la valeur sans l’afficher :

test "${DISABLE_TELEMETRY:-}" = 1

Le code de sortie 0 confirme que la variable vaut 1 dans cet environnement. Ce n’est pas un audit du trafic réseau. Cette vérification ne détermine pas non plus les paramètres de télémétrie du fournisseur de l’agent ou des autres outils.

Une recherche hors ligne ne signifie pas que toute la procédure fonctionne sans réseau. Le téléchargement des paquets nécessite une connexion. La télémétrie de Modern Web Guidance reste activée tant que vous ne la désactivez pas.

Pour prévoir la consommation de contexte, le README annonce environ 205 tokens pour modern-web-guidance et 175 tokens pour chrome-extensions. Ces chiffres ne plafonnent pas la consommation d’une tâche complète. Les guides récupérés ajoutent du contenu au contexte, tandis que les vérifications et les modifications demandent davantage de travail à l’agent.

Mesurez l’usage réel sur des tâches représentatives. Ne calculez pas les économies uniquement à partir de la taille annoncée de la skill.

Prendre les gains mesurés comme point de départ d’un essai

Les résultats de Google justifient un essai, mais ne garantissent ni taux de réussite universel ni économie de tokens. L’instantané du README officiel, daté du 2026-11-08, présente les résultats suivants :

Agent et libellé du modèle	Tâches / assertions	Sans guides	Avec guides	Gain
claude_code / opus-5-5	215 / 1801	57%	88%	31 points de pourcentage
codex_cli / gpt-6.1-sol	215 / 1795	54%	82%	28 points de pourcentage
antigravity_cli / gemini-4-argon	214 / 1673	58%	94%	36 points de pourcentage

Il s’agit de taux d’assertions réussies, pas de proportions de projets de production achevés avec succès. Le nombre de tâches et d’assertions varie aussi d’une ligne à l’autre. Ne considérez pas ce tableau comme un classement contrôlé des modèles sur une charge de travail identique.

La méthodologie du tableau de bord d’évaluation définit le taux de réussite comme le nombre de contrôles réussis divisé par celui des contrôles exécutés. Les exécutions qui plantent ou dépassent le délai avant la notation sont exclues, ainsi que leur exécution appariée.

Google a conçu cette évaluation autour de ses propres guides. Son analyse des erreurs courantes des agents décrit la comparaison des résultats avec les attentes définies par les guides. Ce sont des résultats produits par le fournisseur de l’outil, pas une validation indépendante de la qualité de votre application.

Avant de généraliser l’usage, comparez une tâche représentative sur un composant avec et sans guides. Conservez le même modèle, le même prompt et la même politique de navigateurs. Examinez le comportement concerné dans le navigateur, les tests de régression, le temps consacré et l’usage réel.

Pour évaluer les dépenses, utilisez le coût par tâche de programmation terminée plutôt que le seul prix des tokens. Conservez Modern Web Guidance s’il améliore les contrôles importants de votre dépôt sans ajouter de coûts de revue ou d’utilisation inacceptables.