Les bugs frontend sont difficiles à diagnostiquer sans les bons outils. Cette compétence fournit des workflows guidés pour identifier et corriger les problèmes d'interface utilisateur, les problèmes de performance, les erreurs réseau et les échecs de console utilisant Chrome DevTools MCP.

Tester des applications web manuellement prend du temps et introduit des erreurs. Cette compétence fournit des scripts d'automatisation Playwright et des outils de gestion de serveur pour vérifier la fonctionnalité frontend, capturer des captures d'écran, déboguer le comportement UI et consulter les logs de la console du navigateur.

Les développeurs perdent du temps à écrire des tests qui vérifient des mocks au lieu du comportement réel. Cette compétence empêche cinq anti‑patterns de test courants en appliquant les principes du TDD et en fournissant des fonctions de contrôle avant chaque décision de test.

Écrire des tests après le code ne prove rien. Cette compétence impose la discipline TDD en vous faisant écrire d'abord des tests en échec, garantissant que vos tests vérifient réellement le comportement et détectent les bogues avant qu'ils n'atteignent la production.

Les correctifs aléatoires gaspillent du temps et créent de nouveaux bugs. Cette compétence impose un processus de débogage rigoureux en quatre phases qui garantit que vous comprenez la cause profonde avant de tenter toute solution, empêchant les corrections de symptômes qui masquent les problèmes sous-jacents.

Détecter les problèmes de code tôt évite des corrections coûteuses plus tard. Cette compétence déploie un sous-agent revue-de-code pour vérifier l'implémentation par rapport aux exigences avant de poursuivre le développement.

De nombreux développeurs implémentent aveuglément les retours de revue de code sans vérification. Cette compétence vous permet d'évaluer les retours techniquement avant implémentation. Elle favorise la qualité du code et évite les changements inutiles.

La création d'extensions Chrome nécessite de comprendre les service workers, les patterns de sécurité et la conformité au Chrome Web Store. Cette compétence fournit des conseils architecturaux, des modèles de code et les meilleures pratiques de sécurité pour créer des extensions professionnelles avec une intégration IA optionnelle.

La création de serveurs MCP nécessite une connaissance approfondie des spécifications du protocole, de la conception centrée sur les agents et des méthodologies d'évaluation. Cette compétence fournit un accompagnement complet, des implémentations de référence et des outils d'évaluation pour créer des serveurs MCP de haute qualité permettant une intégration efficace LLM-outils.

Les développeurs perdent du temps à décider comment terminer leurs branches. Cette compétence présente des options claires et gère le flux de travail choisi en toute sécurité. Elle vérifie que les tests réussissent et demande confirmation pour les actions destructives.

Plusieurs échecs de tests font perdre du temps lorsqu'ils sont étudiés un par un. Cette compétence fournit un modèle pour déployer plusieurs agents Claude afin d'enquêter et de corriger des problèmes indépendants simultanément, réduisant ainsi le temps de débogage.

Créer des artefacts complexes avec du HTML brut est lent et limité. Cette skill fournit un environnement de développement complet avec React, Tailwind CSS et plus de 40 composants shadcn/ui préconstruits. Initialisez un projet, développez avec des outils modernes et regroupez le tout dans un seul fichier HTML portable.

Transformez des exigences vagues en conceptions système claires. Utilisez la méthodologie EventStorming pour créer des catalogues de conception navigables avec des diagrammes Mermaid.

Comprendre de grandes bases de code nécessite du temps et des efforts. CodeConscious fournit un assistant cognitif autonome qui construit une mémoire persistante entre les sessions, permettant une exploration approfondie du code, la reconnaissance de motifs et l'apprentissage continu à partir de l'historique du projet.

La recherche textuelle traditionnelle ignore la structure du code. AST-Grep trouve et transforme le code en utilisant des motifs sensibles à la syntaxe qui comprennent la signification de votre code. Il recherche par structure AST plutôt que par texte brut, permettant une analyse de code précise et une refactorisation à grande échelle.

Les développeurs perdent du temps à basculer entre des outils de développement déconnectés. Cette boîte à outils intègre de manière transparente 8 outils IA personnalisés avec plus de 10 utilitaires CLI populaires comme ripgrep et jq grâce à un système de découverte unifié.

La gestion de plusieurs branches git peut encombrer votre répertoire de travail principal et rendre le changement de contexte difficile. Cette compétence fournit une approche structurée pour créer des worktrees git isolés qui vous permettent de travailler sur plusieurs fonctionnalités simultanément sans interférence.

Le mode strict de TypeScript détecte les bugs à la compilation qui causeraient des erreurs d'exécution. Cette compétence vous aide à configurer et appliquer une vérification de type stricte pour un code plus sûr et fiable.

Écrire des tests après le code crée des lacunes et fait manquer des cas limites. Cette compétence fournit un workflow TDD structuré avec des cycles ROUGE-VERT-REFACTORISER, des tests d’implémentation réelle sans mock, et une validation E2E avec Playwright.

Les corrections de bugs échouent souvent lorsqu'elles ne font que traiter les symptômes. Ce framework de débogage en quatre phases vous assure de comprendre la cause profonde avant de tenter des solutions. Réduit le temps de débogage et évite les problèmes récurrents.