
de front-end-checklist72,891
Vérifie les ressources images, le balisage et les transformations build/CDN pour s'assurer que les images sont servies aux tailles d'affichage appropriées via srcset et sizes afin de réduire la bande passante gaspillée
Cette compétence codifie les meilleures pratiques pour servir des images à la taille d'affichage correcte. Elle guide un agent ou un réviseur dans l'audit des fichiers images, du balisage et des pipelines de build/CDN pour identifier les images surdimensionnées qui gaspillent de la bande passante, démontre comment générer des variantes responsives et fournit des exemples concrets de HTML avant/après. L'accent est mis sur des gains de performance mesurables (économies 'Properly size images' de Lighthouse) et des corrections reproductibles à travers les composants et les templates.
Utilisez cette compétence lors de revues de performance, de revues de code PR ou d'audits de site lorsque les images apparaissent dans Lighthouse ou les métriques de terrain comme contributeur principal à la taille de chargement. Elle est particulièrement utile pour les sites avec de grandes images héro (hero images), des mises en page responsives ou du contenu riche en images où une utilisation incorrecte de srcset/sizes entraîne un sur-téléchargement sur mobile.
references/rule.md détaillé avec des conseils d'implémentation et des exemples de frameworksProbablement compatible avec les agents polyvalents capables d'exécuter des commandes shell et d'inspecter les fichiers d'un dépôt (Copilot/Codex/Claude Code/agents supportant la revue de code au niveau du fichier).
Responsive Image Sizing est une compétence pédagogique pour auditer et corriger les images surdimensionnées dans les projets web. Elle fournit des sections structurées Check/Fix/Explain/Code Review axées sur srcset, les attributs sizes et la diffusion d'images responsives. Aucun script intégré — contenu purement consultatif. SKILL.md bien organisé avec un frontmatter propre et une divulgation progressive vers une référence de règles externe.
Compétence pédagogique propre sans préoccupations de sécurité. Structure solide mais manque de profondeur car les conseils spécifiques aux frameworks sont délégués à un fichier de référence non intégré. Bénéficierait de l'inclusion d'exemples clés en ligne.
Minification JavaScript
Vérifie que le JavaScript de production est minifié et optimisé via le tree-shaking pour réduire la taille du bundle et améliorer les performances de chargement des pages.
H1 Descriptif Unique
Vérifie et impose la présence d'un seul <h1> descriptif par page pour améliorer la clarté topique et le SEO on-page.
Page 404 Personnalisée
Vérifie et guide la création d'une page 404 personnalisée et conviviale qui renvoie un statut 404 réel et propose des chemins de récupération (recherche, navigation, liens populaires).