Choisissez parmi les compétences de la section "Conseils pour le Web moderne" en fonction de l'étape à laquelle vous vous trouvez dans le cycle de vie du développement Web, depuis le style initial jusqu'à l'implémentation finale de la sécurité.
Disciplines Web de base
Orchestrateurs pour vous aider à affiner et à concentrer votre travail par discipline Web.
accessibility
/modern-web-guidance accessibility
Sert de guide d'audit central pour évaluer, corriger et implémenter des modèles d'accessibilité efficaces dans l'ensemble de votre application.
Afficher la compétence accessibility sur GitHub
performance
/modern-web-guidance performance
Vous aide à optimiser les métriques Core Web Vitals, à réduire les latences de temps de chargement de la page et à améliorer la réactivité aux entrées utilisateur.
Afficher la compétence performance sur GitHub
user-experience
/modern-web-guidance user-experience
Sert de boîte à outils d'interface utilisateur pour implémenter rapidement des éléments personnalisés responsifs, des transitions fluides et des modèles de style modernes.
Afficher la compétence user-experience sur GitHub
Technologies Web
Ces compétences de base fournissent des blocs de construction essentiels pour toute application moderne, en veillant à ce que votre projet commence par les bonnes pratiques modernes en tenant compte du HTML sémantique, de la vitesse et de l'interopérabilité.
html
/modern-web-guidance html
Consignes axées sur l'action pour l'architecture HTML moderne, la sémantique, les API interactives natives (boîte de dialogue, pop-up, détails), la gestion du focus et la hiérarchisation des ressources. Utilisez ce guide lorsque vous structurez des documents Web, implémentez des superpositions natives ou optimisez l'ordre de chargement des ressources.
Afficher la compétence html sur GitHub
css
/modern-web-guidance css
Consignes axées sur l'action pour l'architecture, les mises en page et les performances CSS modernes. Utilisez ce guide lorsque vous créez des styles, gérez des systèmes de conception ou optimisez le rendu Web.
Afficher la compétence css sur GitHub
css-layout
/modern-web-guidance css-layout
Mises en page CSS modernes telles que flexbox, grille, sous-grille, requêtes de conteneur, positionnement d'ancrage et dimensionnement intrinsèque. Utilisez cette compétence lorsque vous concevez des composants d'interface utilisateur ou des mises en page responsives.
Afficher la compétence css-layout sur GitHub
forms
/modern-web-guidance forms
Bonnes pratiques pour créer des formulaires Web plus accessibles, sécurisés et conviviaux. Utilisez ce guide lorsque vous créez ou modifiez des formulaires, des entrées et des flux d'envoi.
Afficher la compétence forms sur GitHub
cpp-on-the-web
/modern-web-guidance cpp-on-the-web
Compilation de C et C++ pour le Web moderne à l'aide de WebAssembly. Utilisez cette compétence lorsque vous devez transférer du code C++, créer des bibliothèques C++ avec Emscripten ou configurer des composants C++ hautes performances dans le navigateur.
Afficher la compétence cpp-on-the-web sur GitHub
Fonctionnalités du navigateur (activation facultative)
Ces compétences vous aident à développer des extensions Chrome conformes aux normes modernes telles que Manifest V3 et à simplifier la publication sur le Chrome Web Store en vous aidant à préparer vos métadonnées, vos règles de confidentialité et vos justifications d'autorisation. Ces compétences sont facultatives et ne sont pas activées par défaut.
chrome-extensions
/modern-web-guidance chrome-extensions
Créez des extensions Chrome sécurisées et conformes à Manifest V3 qui évitent les pièges courants liés au cycle de vie des service workers et au bac à sable. Pour activer cette compétence, vous devez la spécifier :chrome-extensions
npx skills add GoogleChrome/modern-web-guidance --skill chrome-extensions
Afficher la compétence chrome-extensions sur GitHub
Sécurité, confiance et identité
Ces compétences se concentrent sur la confiance des utilisateurs en sécurisant les applications contre les exploitations côté client telles que les XSS via des en-têtes HTTP défensifs et l'isolation d'origine. Les développeurs peuvent également développer des flux d'authentification avec des clés d'accès, réduire le suivi par un tiers et utiliser des compétences pour transférer des bibliothèques C/C++ vers des modules WebAssembly.
security
/modern-web-guidance security
Consignes de sécurité préventives pour les développeurs Web (XSS, CSP, cookies, isolation inter-origine). Utilisez cette compétence pour guider le processus d'audit, de test et de déploiement sécurisé des règles de sécurité.
Afficher la compétence security sur GitHub
passkeys
/modern-web-guidance passkeys
Orientation complète et principes transversaux pour implémenter WebAuthn et les clés d'accès dans les applications Web. Utilisez ce guide lorsque vous gérez l'enregistrement, l'authentification, la gestion ou la réauthentification des clés d'accès.
Afficher la compétence passkeys sur GitHub
privacy
/modern-web-guidance privacy
Consignes axées sur l'action pour les développeurs Web afin d'implémenter la confidentialité dès la conception, la minimisation des données, les audits tiers et la gestion sécurisée des données. Utilisez cette compétence lorsque vous concevez des applications, intégrez des services tiers, gérez des données utilisateur ou configurez des en-têtes de sécurité.
Afficher la compétence privacy sur GitHub
Systèmes agentiques
Ces compétences vous aident à combler le fossé entre votre application Web et les workflows d'IA avec WebMCP. En exposant les fonctionnalités du navigateur côté client sous forme d'outils interactifs, vous pouvez demander aux agents d'IA d'interagir directement avec les fonctionnalités de l'application.
webmcp
/modern-web-guidance webmcp
Implémentez WebMCP pour exposer les fonctionnalités du navigateur côté client sous forme d'outils interactifs pour les agents d'IA.
Afficher la compétence webmcp sur GitHub
Étapes suivantes
Maintenant que vous comprenez les conseils pour le Web moderne, essayez-les vous-même. Découvrez les fonctionnalités et les cas d’utilisation compatibles avec les conseils pour le Web moderne, et essayez quelques exemples d’invites pour commencer.