00:00:00Claude Code est vraiment génial, mais notre équipe a commencé à l'utiliser pour tout.
00:00:03Anthropic l'a remarqué et a introduit il y a quelque temps le concept de « skills » (compétences).
00:00:07Mais avec la sortie de Nano Banana Pro, les gens ont commencé à prendre une direction totalement différente,
00:00:12en utilisant des produits Google comme anti-gravity pour créer de meilleurs sites.
00:00:15Nous avons testé anti-gravity, mais à notre avis, c'est encore trop instable pour le moment.
00:00:19On sait que les fans d'anti-gravity vont nous tomber dessus.
00:00:21Mais c'est un sujet pour une autre vidéo. Notez toutefois que les images générées sont gratuites.
00:00:25Alors on s'est dit : pourquoi ne pas laisser Claude gérer le code et anti-gravity les images ?
00:00:30Mais voici le problème.
00:00:31Pour ces différents cas d'usage, vous ne devriez pas re-prompter Claude à chaque fois.
00:00:35Vous devriez l'entraîner et créer une compétence dédiée.
00:00:37Claude a justement publié récemment un guide sur la manière de construire ces compétences.
00:00:41Et la partie la plus importante, c'est le test et l'itération.
00:00:44Honnêtement, ce guide a vraiment changé notre vision de ces compétences.
00:00:48Vous avez peut-être déjà entendu parler du Skill Creator.
00:00:50C'est la compétence officielle de Claude Code qui vous guide pour créer des compétences efficaces.
00:00:55Mais l'un de nos membres a découvert qu'elle était déjà obsolète
00:00:58par rapport au nouveau guide que nous avons publié.
00:01:00Nous l'avons donc mise à jour et cela a changé beaucoup de choses
00:01:02selon les nouvelles directives, avec de très belles améliorations.
00:01:05Grâce à cet Skill Creator mis à jour et à beaucoup d'itérations laborieuses,
00:01:09nous avons créé cette nouvelle compétence UI pour Nano Banana.
00:01:12Mais la compétence de départ et celle d'arrivée étaient deux choses totalement différentes.
00:01:16Ces deux compétences seront disponibles dans AI Labs Pro.
00:01:19Pour ceux qui ne connaissent pas, c'est notre communauté lancée récemment
00:01:22où vous trouverez des templates prêts à l'emploi à intégrer directement dans vos projets
00:01:26pour cette vidéo et toutes les précédentes.
00:01:28Si vous appréciez notre travail et souhaitez soutenir la chaîne,
00:01:31c'est le meilleur moyen de le faire. Le lien est dans la description.
00:01:34Nous avions déjà mis au point le processus de coordination entre Claude Code et Anti-Gravity.
00:01:38Nous avons donc ouvert le même répertoire dans Claude Code et dans Anti-Gravity.
00:01:42Claude a initialisé le projet et Anti-Gravity n'avait qu'à s'occuper du dossier public,
00:01:47qui contiendrait toutes les images.
00:01:49Claude allait nous fournir les prompts et les noms de fichiers des images
00:01:53qu'Anti-Gravity devait produire. Ces prompts ont été injectés dans Anti-Gravity.
00:01:56Il a lancé son outil de génération d'images et, grâce au traitement parallèle,
00:02:00il a généré plusieurs images simultanément.
00:02:03Vous pouvez voir qu'il a généré trois images, toutes placées dans ce dossier images.
00:02:08Une fois placées, Claude a su automatiquement qu'elles étaient là et a pu travailler avec.
00:02:12Mais dès que nous avons commencé à générer les images, plusieurs choses ont planté.
00:02:17Vous l'avez sûrement déjà entendu, mais l'ingénierie de description est l'un des
00:02:21aspects les plus importants pour bâtir ces flux de travail répétitifs. Ces descriptions sont le
00:02:26YAML front matter qui est toujours chargé dans le contexte de Claude Code à l'ouverture.
00:02:30C'est ainsi que Claude décide s'il doit charger votre compétence ou non.
00:02:34Pourtant, beaucoup d'utilisateurs signalent que des compétences se chargent alors qu'elles sont inutiles.
00:02:38Et c'est parce que la plupart des descriptions disent seulement ce que fait la compétence.
00:02:41Une bonne description doit en réalité répondre à deux questions :
00:02:44Que fait la compétence ? Et quand Claude doit-il l'utiliser ?
00:02:46C'est là qu'interviennent les phrases de déclenchement. Ce sont elles qui appellent la compétence,
00:02:51comme « build a landing page » ou quand on mentionne « nano banana ». Mais il n'y a pas que ça.
00:02:57Le guide mentionne aussi les déclencheurs négatifs, qui disent à Claude quand ne pas utiliser la compétence.
00:03:01Par exemple, nous définissons qu'il ne doit pas se charger pour de simples corrections de bugs ou du travail sur base de données.
00:03:05La différence entre une bonne et une mauvaise description est donc flagrante.
00:03:08Vous voyez que cette compétence du nouveau Skill Creator a plusieurs déclencheurs positifs et négatifs,
00:03:13alors que celle de l'ancien se contente de décrire ce que fait la compétence.
00:03:17Il y a aussi des instructions purement quantitatives liées à la syntaxe,
00:03:21mais vous n'avez pas besoin de les connaître.
00:03:23Aussi, si vous aimez notre contenu, n'hésitez pas à cliquer sur le bouton Hype,
00:03:27car cela nous aide à créer plus de vidéos et à toucher plus de monde.
00:03:31Normalement, lors de la génération, la plupart des images devaient avoir
00:03:35des dimensions différentes selon leur emplacement ou leur usage.
00:03:39Et c'est ce que le prompt spécifiait avant nos modifications.
00:03:42Mais à chaque fois que nous essayions d'utiliser ces dimensions personnalisées,
00:03:46l'outil de génération d'images d'anti-gravity ne produisait que des images carrées.
00:03:50D'habitude, ce n'est pas un problème avec le modèle simple de l'app Gemini ou de Google AI Studio.
00:03:55Mais ici, nous avons dû changer le processus et modifier la compétence en conséquence.
00:03:58Cela a été référencé tout au long du skill.md aux étapes appropriées,
00:04:02et aussi dans les règles de prompt : dès qu'il doit écrire un prompt,
00:04:06il ne doit spécifier aucune dimension ni ratio, car cela n'importait pas vraiment.
00:04:10Et s'il devait recadrer l'image pour un usage spécifique,
00:04:12il devait le faire plus tard avec son outil de recadrage d'image.
00:04:15C'est pourquoi le dossier des scripts est vraiment crucial.
00:04:18Il héberge ces outils exécutables que Claude peut appeler avec des arguments précis,
00:04:22et vous découvrez ces outils selon vos différents besoins.
00:04:25Un bon script possède ces arguments CLI avec différents modes,
00:04:29pour que Claude puisse l'appeler facilement.
00:04:31Et une chose que l'un de nous a jugé indispensable, ce sont les modes de prévisualisation,
00:04:35qui aident Claude à prévisualiser le résultat avant d'effectuer des opérations destructrices.
00:04:40Faisons une pause pour parler du sponsor d'aujourd'hui.
00:04:42Après cela, nous verrons l'erreur structurelle majeure
00:04:45que la plupart des gens font en créant leurs compétences.
00:04:47CREAM
00:04:47Pour les développeurs et fondateurs de SaaS, le plus gros casse-tête n'est pas de construire.
00:04:50C'est le cauchemar des taxes mondiales et de la conformité à la TVA.
00:04:53CREAM est un « merchant of record » qui gère entièrement ce fardeau, vous laissant vous concentrer sur le développement.
00:04:58Conçu pour la prochaine vague du business numérique,
00:05:00CREAM offre une configuration ultra-rapide pour accepter des paiements dans plus de 100 pays dès le premier jour.
00:05:05Ils ont éliminé la confusion des frais cachés,
00:05:07en proposant un tarif forfaitaire transparent de 3,9 % + 40 cents.
00:05:11C'est tout.
00:05:11Le même tarif que le client soit à Tokyo ou au Texas, par American Express ou Google Pay.
00:05:16Vous bénéficiez de fonctionnalités puissantes comme la répartition automatique des revenus pour un lancement serein.
00:05:20Utilisez toujours leur mode test isolé et le SDK TypeScript dédié.
00:05:23De plus, CREAM propose des compétences d'agent IA officielles pour Claude Code, Cursor et WinSurf.
00:05:28Dites simplement à votre assistant IA d'intégrer CREAM,
00:05:30et il générera instantanément un code sécurisé et prêt pour la production selon leurs dernières bonnes pratiques API.
00:05:36N'oubliez pas : ne commitez jamais vos clés API dans votre contrôle de version.
00:05:39Si vous êtes prêt pour une solution de paiement, cliquez sur le lien dans le commentaire épinglé.
00:05:42Arrêtez de vous soucier des taxes et commencez à croître avec CREAM.io.
00:05:45Vous nous avez peut-être déjà entendu parler de la divulgation progressive dans plusieurs de nos
00:05:50vidéos précédentes car ce n'est pas seulement lié aux compétences, mais c'est aussi crucial pour la fenêtre de contexte.
00:05:55Cela signifie que l'agent ne doit savoir quelque chose que s'il en a besoin à ce moment précis.
00:05:59Vous savez déjà que la description est toujours chargée dans le contexte de Claude Code.
00:06:03Et c'est ainsi que ces compétences utilisent une structure à trois niveaux,
00:06:06où le premier niveau est toujours présent dans le contexte de Claude.
00:06:09Ensuite, le deuxième niveau est le corps du fichier skill.md, qui doit contenir des références au niveau 3,
00:06:14incluant le flux de travail complet et les instructions sur l'utilisation des références.
00:06:18Et dans cette structure, le guide officiel définit ce qu'on appelle la section critique.
00:06:23Vous devriez lister les informations les plus importantes dès le début,
00:06:26et non les cacher sous une pile d'instructions diverses.
00:06:29On voit clairement que cette compétence n'a que le skill.md et n'a pas la structure de niveau 3.
00:06:34C'est parce que tout le workflow, les astuces, les recommandations
00:06:38et les guides de dépannage sont placés dans un seul fichier.
00:06:41Ce n'est pas ainsi qu'il devrait être structuré,
00:06:43car Claude pourrait ne pas avoir besoin de ces directives à l'instant T.
00:06:45Il devrait d'abord charger uniquement le workflow,
00:06:47puis appeler les règles de prompt seulement quand il est temps de les écrire ou de les utiliser.
00:06:51D'un autre côté, cette compétence est clairement structurée avec des références
00:06:54et les différents scripts dont elle a besoin.
00:06:56En plus du workflow, le fichier contient des déclencheurs clairs pour savoir quand lancer chaque script
00:07:01et quand consulter les références pour les différentes directives.
00:07:04Ainsi, dans le skill.md, on ne trouve que le workflow de la compétence Nano Banana.
00:07:08Et après cela, dans la section références, on trouve les différentes directives,
00:07:12où les règles de prompt contiennent les 13 règles de test différentes
00:07:15que nous avons trouvées après nos tests d'itération.
00:07:17Mais même avec toute cette structure, Claude Code trouvait encore le moyen de sauter des étapes.
00:07:22Après avoir généré le premier lot d'images,
00:07:24elles allaient forcément nécessiter des régénérations,
00:07:26car Nano Banana ne produit pas toujours le résultat le plus précis.
00:07:29Le plus surprenant, c'est que Claude ne vérifiait pas cela de lui-même.
00:07:33Nous avons dû lui demander si les images étaient conformes au design qu'il voulait créer.
00:07:37Sinon, il aurait simplement continué et implémenté celles qu'il avait produites.
00:07:41Encore une fois, c'est pour cela que l'itération est l'élément clé dans la création de ces compétences.
00:07:45Nous avions déjà une étape pour valider les assets, utilisant le script validate images,
00:07:49mais cela vérifiait seulement si les images étaient structurellement correctes,
00:07:52pas si elles étaient esthétiquement justes.
00:07:55Cela n'avait rien à voir avec l'esthétique.
00:07:57Pour l'esthétique, Claude devait faire une revue visuelle par lui-même,
00:08:00en examinant ces questions pour décider si l'image passait ou non.
00:08:04Et en cas d'échec, il devait aussi fournir une raison.
00:08:07C'est parce que si l'image échouait à la revue visuelle,
00:08:09il devait supprimer cette image, puis écrire un nouveau prompt corrigé.
00:08:13Et selon le mode choisi, si vous étiez en mode anti-gravity,
00:08:16il vous donnait un nouveau prompt incluant la raison de l'échec précédent,
00:08:20pour qu'anti-gravity puisse générer des images nouvelles et meilleures.
00:08:23C'est pourquoi anti-gravity indique ici qu'il a régénéré l'image du verre,
00:08:27et que cette fois, elle respecte les exigences.
00:08:29C'est pourquoi, si vous construisez un workflow, il est crucial d'avoir ces barrières de validation.
00:08:34Les barrières de validation sont des bloqueurs explicites qui définissent ce qui doit être terminé
00:08:39avant de pouvoir passer à la partie suivante du flux de travail.
00:08:41Et comme vous l'avez vu, si on laisse faire Claude, il construira joyeusement une UI autour d'images manquantes ou corrompues,
00:08:46sans rien vérifier à moins que vous ne lui demandiez.
00:08:48Par exemple, dans cette compétence,
00:08:50vous voyez clairement que le workflow comporte plusieurs étapes à suivre.
00:08:54Et parmi les autres erreurs,
00:08:55aucune barrière de validation n'a été écrite avant de passer à l'étape suivante.
00:08:59Ces barrières de validation restent des prompts.
00:09:01Ce ne sont pas des commandes bash magiques.
00:09:04Mais si elles doivent être réutilisées à chaque fois sans variation,
00:09:08vous devriez en faire un outil et lister cet outil comme barrière de validation.
00:09:11Mais dans ce cas, parmi les multiples étapes, nous avons ces barrières de validation
00:09:15qui non seulement l'empêchent de passer d'une partie à l'autre sans contrôle,
00:09:19mais forment aussi un mini-processus au sein de chaque workflow.
00:09:22En expérimentant et en itérant sans cesse sur votre processus,
00:09:26vous rencontrerez beaucoup d'erreurs, dont certaines que vous avez déjà vues.
00:09:30Par exemple, des images manquantes ou corrompues, des sorties API partielles,
00:09:34ou des scripts qui s'arrêtent suite à un échec partiel.
00:09:36Et à travers cela, tout en itérant sur la compétence,
00:09:39un bon créateur de compétence doit noter la gestion d'erreur pour chacune d'elles et les définir clairement.
00:09:44Car si c'est arrivé une fois, cela peut se reproduire.
00:09:46Et cela devrait être géré sous ce format :
00:09:48Définir l'erreur, puis la cause pour que Claude comprenne,
00:09:51puis les étapes pour corriger réellement le problème.
00:09:54Encore une fois, quand on lui dit de créer une landing page, il charge la compétence et lit vos fichiers.
00:09:58Si vous avez déjà un projet Next.js, il le détecte et vous pose des questions,
00:10:02comme l'objet de la page et si vous voulez des images générées par IA ou non.
00:10:06Si vous refusez, il utilise simplement ses ressources front-end pour construire la page.
00:10:11C'est parce qu'en la construisant, nous avons aussi demandé à Claude de finaliser
00:10:16cette compétence de design front-end, qui contient plein de directives incroyables
00:10:19pour implémenter des sites vraiment esthétiques.
00:10:22Et une fois toute l'expérimentation terminée, voici ce qu'il a réellement généré pour nous.
00:10:27Vous voyez donc que c'est l'image que nous avions générée,
00:10:29et elle possède ce subtil effet d'animation.
00:10:32À part ça, c'est une landing page très propre, et les images ne sont pas surchargées.
00:10:36Elles ne sont appliquées qu'aux endroits où elles étaient vraiment nécessaires.
00:10:39Mais lors de la première génération, il y avait des problèmes avec la police utilisée.
00:10:43Le rendu n'était pas bon.
00:10:44Nous sommes donc allés chercher cette police typographique spécifique qu'ils ont testée,
00:10:48et c'est ce qui a finalement réglé nos problèmes de typographie.
00:10:51Donc là encore, nous recrutons différentes ressources
00:10:54qui ne sont même pas liées à cette compétence de design Nano Banana,
00:10:57et nous les intégrons pour qu'il ait ces capacités là où il en a besoin.
00:11:00Dans la divulgation progressive, nous avons déjà évoqué les fichiers additionnels de références et de scripts.
00:11:06Nous approfondissons maintenant les références, leur intelligence spécifique au domaine.
00:11:09Même si votre compétence est prête pour un domaine précis,
00:11:12elle peut comporter ces petits paquets de connaissances comme des composants séparés.
00:11:16Par exemple, dans ces références, nous avons listé des patterns de design,
00:11:19l'esthétique front-end et les règles de prompt.
00:11:21De cette façon, nous pouvons étendre la base de connaissances de la compétence sans polluer la fenêtre de contexte.
00:11:26Jusqu'à présent, tous les conseils que vous avez vus vous disent comment entraîner Claude à mieux faire les tâches.
00:11:31Mais ils ne vous disent pas comment l'utiliser correctement.
00:11:33Pour cela, nous avons une autre vidéo où nous montrons les 10 façons
00:11:36les plus récentes de prendre l'avantage avec Claude Code.
00:11:39Vous verrez la vidéo sur l'écran de fin,
00:11:41donc autant cliquer dessus plutôt que de la chercher.
00:11:43Cela nous amène à la fin de cette vidéo.
00:11:45Si vous voulez soutenir la chaîne et nous aider à continuer ces vidéos,
00:11:49vous pouvez le faire via le bouton Super Thanks ci-dessous.
00:11:51Comme toujours, merci d'avoir regardé, et on se retrouve dans la prochaine.