Skills Addyosmani

Auditer et améliorer l'accessibilité web selon les directives WCAG 2.2. Utiliser lorsqu'on demande "améliorer l'accessibilité", "audit a11y", "conformité WCAG", "support lecteur d'écran", "navigation clavier" ou "rendre accessible".

Guide la conception stable d'API et d'interfaces. À utiliser lors de la conception d'API, de limites de modules ou de toute interface publique. À utiliser lors de la création de points de terminaison REST ou GraphQL, de la définition de contrats de types entre modules, ou de l'établissement de limites entre le frontend et le backend.

Appliquer les bonnes pratiques modernes de développement web pour la sécurité, la compatibilité et la qualité du code. Utiliser lorsqu'on demande "appliquer les bonnes pratiques", "audit de sécurité", "moderniser le code", "revue de qualité du code" ou "vérifier les vulnérabilités".

Teste dans des navigateurs réels via Chrome DevTools MCP. À utiliser lors de la construction ou du débogage de tout ce qui s'exécute dans un navigateur. À utiliser lorsque vous devez inspecter le DOM, capturer des erreurs de console, analyser les requêtes réseau, profiler les performances ou vérifier la sortie visuelle avec des données d'exécution réelles. Nécessite que le serveur MCP chrome-devtools soit configuré.

Automatise la configuration des pipelines CI/CD. À utiliser lors de la mise en place ou de la modification de pipelines de build et de déploiement. À utiliser lorsque vous devez automatiser les quality gates, configurer des exécuteurs de tests dans l’intégration continue, ou établir des stratégies de déploiement.

Effectue une revue de code multi-axe. À utiliser avant de fusionner toute modification. À utiliser lors de la révision de code écrit par vous-même, un autre agent ou un humain. À utiliser lorsque vous devez évaluer la qualité du code sur plusieurs dimensions avant qu'il n'entre dans la branche principale.

Simplifie le code pour plus de clarté. À utiliser lors du refactoring de code pour plus de clarté sans changer le comportement. À utiliser lorsque le code fonctionne mais est plus difficile à lire, maintenir ou étendre qu'il ne devrait l'être. À utiliser lors de la révision de code qui a accumulé une complexité inutile.

Optimise la configuration du contexte de l'agent. À utiliser lors du démarrage d'une nouvelle session, lorsque la qualité des réponses de l'agent se dégrade, lors du changement de tâches, ou lorsque vous devez configurer des fichiers de règles et le contexte pour un projet.

Optimiser les Core Web Vitals (LCP, INP, CLS) pour une meilleure expérience de page et un classement dans les résultats de recherche. Utiliser lorsqu'on demande "améliorer les Core Web Vitals", "corriger le LCP", "réduire le CLS", "optimiser l'INP", "optimisation de l'expérience de page" ou "corriger les décalages de mise en page".

Guide le débogage systématique des causes profondes. À utiliser lorsque des tests échouent, des builds se cassent, le comportement ne correspond pas aux attentes, ou que vous rencontrez une erreur inattendue. À utiliser lorsque vous avez besoin d'une approche systématique pour trouver et corriger la cause profonde plutôt que de deviner.

Gère la dépréciation et la migration. À utiliser lors de la suppression d'anciens systèmes, API ou fonctionnalités. À utiliser lors de la migration d'utilisateurs d'une implémentation à une autre. À utiliser pour décider s'il faut maintenir ou abandonner du code existant.

Enregistre les décisions et la documentation. À utiliser lors de la prise de décisions architecturales, de modifications d'API publiques, de livraison de fonctionnalités, ou lorsque vous devez consigner le contexte dont les futurs ingénieurs et agents auront besoin pour comprendre la base de code.

Soumet chaque décision non triviale à un examen contradictoire en contexte neuf avant qu’elle ne soit validée. À utiliser lorsque l’exactitude prime sur la rapidité, lorsqu’on travaille sur un code peu familier, lorsque les enjeux sont élevés (production, logique sensible à la sécurité, opérations irréversibles), ou chaque fois qu’une sortie confiante serait moins coûteuse à vérifier maintenant qu’à déboguer plus tard.

Construit des interfaces utilisateur de qualité production, accessibles et responsives. À utiliser lors de la création ou de la modification d'interfaces et de pages, de la création de composants, de la mise en œuvre de mises en page, du respect des exigences d'accessibilité WCAG, de la gestion d'état, ou lorsque le résultat doit avoir l'apparence et la convivialité d'une production de qualité plutôt que d'une génération par IA.

Structure les pratiques de workflow git. À utiliser lors de toute modification de code. À utiliser lors des commits, du branching, de la résolution de conflits, ou lorsque vous devez organiser le travail sur plusieurs flux parallèles. À utiliser lors de la préparation d'une release, du choix d'un incrément de version sémantique, du tagging, ou de la rédaction d'un changelog.

Affine les idées brutes en concepts précis et exploitables grâce à une réflexion structurée divergente et convergente. À utiliser lorsqu'une idée est encore vague, lorsque vous devez tester la robustesse des hypothèses avant de vous engager dans un plan, ou lorsque vous souhaitez élargir les options avant de vous concentrer sur une seule. Se déclenche sur "idéer", "affiner cette idée" ou "tester la robustesse de mon plan".

Livrer les modifications de manière incrémentale. À utiliser lors de l'implémentation d'une fonctionnalité ou d'un changement qui touche plus d'un fichier. À utiliser lorsque vous êtes sur le point d'écrire une grande quantité de code d'un coup, ou lorsqu'une tâche semble trop volumineuse pour être réalisée en une seule étape.

Extrait ce que l'utilisateur veut réellement plutôt que ce qu'il pense devoir vouloir. Y parvient grâce à une question à la fois jusqu'à environ 95 % de confiance sur l'intention sous-jacente. À utiliser lorsqu'une demande est sous-spécifiée (« construis-moi X » sans « pour qui » ni « pourquoi maintenant »), lorsque l'utilisateur l'invoque explicitement (« interroge-moi », « passe-moi au grill », « on est sûrs ? », « mets ma réflexion à l'épreuve »), ou lorsque vous vous surprenez à combler silencieusement des exigences ambiguës avant qu'un plan, un cahier des charges ou du code n'existe.

Instrumente le code pour que le comportement en production soit visible et diagnosticable. À utiliser lors de l'ajout de logging, métriques, tracing ou alerting. À utiliser lors du déploiement de toute fonctionnalité exécutée en production et nécessitant une preuve de son bon fonctionnement. À utiliser lorsque des problèmes de production sont signalés mais que les données disponibles ne permettent pas de comprendre ce qui s'est passé.

Optimiser les performances web pour un chargement plus rapide et une meilleure expérience utilisateur. Utiliser lorsqu'on demande "accélérer mon site", "optimiser les performances", "réduire le temps de chargement", "corriger le chargement lent", "améliorer la vitesse de la page" ou "audit de performance".

Optimise les performances des applications sur le frontend, le backend, les requêtes et les bases de données. À utiliser lorsque des exigences de performance existent, lorsque vous suspectez des régressions de performance, lorsque les Core Web Vitals ou les temps de chargement nécessitent une amélioration, lorsque des motifs de requêtes N+1 doivent être corrigés, ou lorsque le profilage révèle des goulots d'étranglement.

Décompose le travail en tâches ordonnées. À utiliser lorsque vous avez un cahier des charges ou des exigences claires et que vous devez diviser le travail en tâches réalisables. À utiliser lorsqu'une tâche semble trop vaste pour être commencée, lorsque vous devez estimer la portée, ou lorsqu'un travail parallèle est possible.

Durcit le code contre les vulnérabilités. À utiliser lors du traitement des entrées utilisateur, de l'authentification, du stockage de données ou des intégrations externes. À utiliser lors de la création de toute fonctionnalité qui accepte des données non fiables, gère des sessions utilisateur ou interagit avec des services tiers.

Optimiser la visibilité et le classement dans les moteurs de recherche. Utiliser lorsqu'on demande "améliorer le SEO", "optimiser pour la recherche", "corriger les balises meta", "ajouter des données structurées", "optimisation du sitemap" ou "optimisation pour les moteurs de recherche".

Prépare les lancements en production. À utiliser lors de la préparation d’un déploiement en production, pour une checklist pré-lancement, pour la mise en place de la surveillance, pour planifier un déploiement progressif, ou pour élaborer une stratégie de retour arrière.

Fonde chaque décision d'implémentation sur la documentation officielle. Utilisez-le lorsque vous souhaitez un code faisant autorité, citant ses sources et exempt de motifs obsolètes. Utilisez-le lors de la création avec tout framework ou bibliothèque où l'exactitude est importante.

Crée des spécifications avant de coder. À utiliser lors du démarrage d'un nouveau projet, d'une fonctionnalité ou d'un changement significatif et qu'aucune spécification n'existe encore. À utiliser lorsque les exigences sont floues, ambiguës ou n'existent que comme une idée vague.

Pilote le développement avec des tests. À utiliser lors de l'implémentation d'une logique, de la correction d'un bug ou de la modification d'un comportement. À utiliser lorsque vous devez prouver que le code fonctionne, lorsqu'un rapport de bug arrive ou lorsque vous êtes sur le point de modifier une fonctionnalité existante.

Découvre et invoque les compétences d'agent. À utiliser lors du démarrage d'une session ou lorsque vous devez découvrir quelle compétence s'applique à la tâche en cours. Il s'agit de la méta-compétence qui régit la manière dont toutes les autres compétences sont découvertes et invoquées.

Audit complet de la qualité web couvrant les performances, l'accessibilité, le référencement et les bonnes pratiques. À utiliser lorsqu'on vous demande "auditer mon site", "examiner la qualité web", "exécuter un audit Lighthouse", "vérifier la qualité d'une page" ou "optimiser mon site web".