00:00:00Voici Superpowers, le framework de compétences agentiques avec plus de 50 000 étoiles sur GitHub
00:00:05qui empêche votre agent de codage de se précipiter et de faire des erreurs en le forçant à suivre
00:00:10un flux de travail structuré incluant brainstorming, implémentation, TDD (Test-Driven Development),
00:00:15et même l'utilisation de sous-agents pour exécuter les tâches et réviser le code en parallèle.
00:00:19Mais en quoi est-ce différent du simple mode plan ou du développement piloté par les spécifications ?
00:00:24Abonnez-vous et découvrons cela ensemble.
00:00:27Voici un projet appelé XDL, un outil en ligne de commande pour télécharger des vidéos de Twitter.
00:00:32Je veux créer une interface web pour cet outil qui non seulement télécharge des vidéos
00:00:38depuis une URL, mais qui l'utilise aussi pour créer un article. J'ai utilisé Opus 4.6 avec le mode plan
00:00:46dans Claude Code pour essayer de créer cette interface. Et voici le résultat.
00:00:50Malheureusement, quand j'ai lancé le code la première fois, il y avait quelques problèmes.
00:00:53J'ai donc revu le code pour essayer de les corriger, et j'espère que c'est résolu.
00:00:58Maintenant, tout semble fonctionner normalement.
00:01:00Je vais aller sur Twitter et copier le lien de ce tweet.
00:01:03Désolé Kevin, je le colle ici pour voir s'il télécharge la vidéo.
00:01:06L'extraction est en cours et le téléchargement a réussi.
00:01:09Si je clique ici, ça l'ouvre dans un nouvel onglet, ce qui n'est pas ce que j'attendais, mais ça marche.
00:01:15Maintenant, essayons de créer un article à partir de ce tweet. Je colle le lien, je lance la génération,
00:01:20et on peut voir les différentes étapes. D'abord l'extraction de la vidéo, puis
00:01:24le traitement audio. Une fois terminé, on obtient l'article en Markdown parfaitement formaté,
00:01:29ce qui est vraiment impressionnant. Maintenant, regardons la même tâche effectuée par Opus 4.6,
00:01:35mais avec Superpowers. On voit déjà que le design est bien meilleur, avec l'option pour
00:01:39télécharger et générer un article. Je colle la même URL Twitter, je clique sur télécharger, et
00:01:45il extrait la vidéo, mais cette fois il la télécharge directement dans le navigateur pour que je puisse la voir.
00:01:51Si on utilise le même tweet pour générer l'article ici, on peut suivre les étapes
00:01:56en cours. Une fois toutes les étapes franchies, l'article s'affiche en streaming dans mon navigateur.
00:02:01J'ai la possibilité de le copier et de le coller où je veux. On voit déjà que
00:02:06la version Superpowers est supérieure à la version standard. Nous examinerons le code
00:02:10plus tard, mais voyons d'abord comment j'ai fait ça. Une fois
00:02:15le plugin Superpowers installé, nous avons de nouvelles commandes slash comme brainstorm,
00:02:20execute plan, et write the plan, qui rédige le plan à partir du brainstorming.
00:02:25En fait, seule cette commande est nécessaire car Superpowers nous guide vers l'étape suivante.
00:02:31Lançons-la et collons un prompt. On valide, et maintenant
00:02:35la compétence de brainstorming se charge et commence à analyser le projet actuel. Elle va me poser
00:02:39quelques questions pour affiner le plan. Je réponds "React plus Vite", puis je demande
00:02:44du "étape par étape" pour la génération d'articles. Elle me demande de confirmer l'architecture,
00:02:49ce qui me semble correct. Elle m'interroge aussi sur la mise en page, l'endpoint et la logique serveur.
00:02:54Après avoir répondu à tout, elle procède à la création du plan, qu'elle
00:02:58a placé dans ce répertoire. Si on regarde le plan, c'est très détaillé :
00:03:03vue d'ensemble, stack technique, structure, design, layout, endpoints API et bien plus.
00:03:09En réalité, c'est très similaire à ce que Claude Code produirait s'il rédigeait son propre plan.
00:03:15Mais c'est l'étape suivante qui devient intéressante. Après avoir confirmé le plan pour
00:03:19passer à l'implémentation, l'outil rédige un autre plan d'exécution. Il commence par
00:03:25analyser le plan de conception original que nous avons créé, puis
00:03:31le décompose en tâches plus petites et gérables qui peuvent être traitées par des sous-agents en parallèle.
00:03:36Un nouveau plan est alors généré et sauvegardé dans le répertoire des plans.
00:03:41En l'ouvrant, on voit qu'au lieu d'une vue d'ensemble de l'architecture, il
00:03:46divise tout en tâches. Voici une tâche pour l'échafaudage du projet avec ses sous-étapes.
00:03:52Une autre tâche pour créer le squelette client Vite et React, avec également ses étapes,
00:03:57et ainsi de suite pour chaque tâche nécessaire au projet. À ce stade, Superpowers
00:04:03me demande de choisir une approche : pilotée par sous-agents ou par sessions parallèles ?
00:04:08La première utilise un sous-agent distinct par tâche sans confirmation humaine.
00:04:14La seconde crée une session dérivée, complète les tâches par lots,
00:04:18puis me demande si je suis satisfait du lot terminé avant de continuer.
00:04:24Par souci de rapidité, je vais choisir l'approche par sous-agents. L'outil a donc
00:04:28généré les tâches à accomplir. Malheureusement,
00:04:32ces tâches diffèrent des précédentes car j'ai oublié d'enregistrer mon écran la première fois.
00:04:36J'ai donc recommencé avec le même prompt. Ce qui se passe, c'est que
00:04:41chaque sous-agent commence par créer un test. Il écrit un test qui va échouer.
00:04:47Puis il écrit le code minimal pour réussir ce test. Une fois la fonctionnalité terminée,
00:04:52il vérifie qu'elle répond aux exigences du plan, puis il
00:04:57contrôle la qualité du code pour s'assurer qu'il est propre et maintenable. Maintenant,
00:05:02la plupart des tâches sont finies. Il va tester l'ensemble. Et voilà,
00:05:06toutes les tâches sont terminées et il a même corrigé un bug trouvé en cours de route. Si on
00:05:11regarde le code, il est divisé entre le serveur et les sources (le front-end).
00:05:16On y trouve des composants : onglet article, onglet téléchargement, etc. Dans le
00:05:21suivi du pipeline, on a les étapes dans un objet, une interface TypeScript. On dirait qu'il utilise
00:05:27une sorte de CSS-in-JS pour le style. Avec le recul, j'aurais dû spécifier Tailwind,
00:05:32mais c'est correct. Et regardez ça : c'est quelque chose qu'Opus ne ferait pas par défaut.
00:05:37À chaque étape, Superpowers a effectué un commit git, de l'échafaudage
00:05:43du projet à l'ajout du wrapper CLI en passant par Hano et tout le reste.
00:05:48Si je vérifie le statut git, je n'ai rien à committer, la branche est propre, ce qui m'allège le travail.
00:05:53Vous vous demandez peut-être où sont les fichiers de test ? J'en reparlerai plus tard.
00:05:57Honnêtement, je trouve que Superpowers est un projet impressionnant. J'aime son
00:06:02approche par compétences. Il en possède 14, couvrant tout : du brainstorming
00:06:08à la planification, l'implémentation et la révision de code. J'apprécie l'accent mis sur le TDD,
00:06:12surtout le "Red-Green TDD", où l'on écrit d'abord des tests qui échouent (rouge)
00:06:18avant d'écrire le code pour les valider. Mais parfois, ça ne marche pas car l'agent décide
00:06:24de ne pas le faire. Regardez ceci : ici, la compétence de planification spécifiait explicitement le TDD.
00:06:31Et pour une raison obscure, Claude a choisi de l'ignorer. Je lui ai demandé de confirmer, et il a admis son erreur.
00:06:36Bien que le TDD soit requis, il ne l'a pas fait. Quand j'ai demandé pourquoi, il a répondu
00:06:42qu'il avait privilégié la rapidité d'exécution sur le respect du processus. C'est surprenant
00:06:47pour un modèle de pointe, mais cela prouve qu'il ne faut pas tout accepter aveuglément.
00:06:53Il est crucial de relire le plan pour s'assurer qu'il correspond à vos attentes.
00:06:57C'est l'une des raisons pour lesquelles je n'utiliserai pas Superpowers pour tous mes
00:07:03projets, surtout s'ils sont modestes. Pour une petite fonctionnalité,
00:07:08je préfère discuter avec Claude, établir un document de plan, puis
00:07:13réinitialiser le contexte pour exécuter ce plan. Mais si je dois
00:07:19implémenter plusieurs fonctionnalités simultanément, ce qui arrive parfois, alors
00:07:24Superpowers devient un excellent outil car il excelle à décomposer des besoins complexes en morceaux
00:07:31traitables par des sous-agents. Certes, la fonction de tâches de Claude Code sait le faire,
00:07:37mais j'adore le fait que Superpowers crée un plan dédié avant de coder.
00:07:43Comment Superpowers se compare-t-il à Beads, SpecKit ou au développement piloté par les spécifications ?
00:07:48Pour moi, c'est une version plus simple de la planification avant exécution. Moins
00:07:53simple que Ralph, mais peut-être à mi-chemin entre Ralph et Beads.
00:07:58Il me semble qu'il y a de plus en plus d'outils de ce genre
00:08:02pour aider à mieux coder avec un agent IA. C'est une bonne chose,
00:08:06mais chaque utilisateur est différent. Je pense qu'il est bon de piocher des idées ici et là
00:08:10pour se créer son propre flux de travail idéal. C'est peut-être ce que je ferai
00:08:16à l'avenir. Et si vous avez de la chance, j'en ferai une vidéo pour vous montrer comment.