L'IA est un maçon ultra-rapide : elle dresse un mur en quelques secondes. Mais elle laisse des gravats partout — du code mort que personne n'appelle, la même logique copiée à cinq endroits, des `any` répandus comme du sel, des animations qui font transpirer le GPU. De l'extérieur ton app est superbe ; à l'intérieur elle rouille. Cette ressource te donne le protocole en 7 phases qui transforme ton agent d'IA en chirurgien : il entre dans le code, élimine le mort, fusionne les doublons, corrige les animations, affine les performances de React, bannit les `any`, apaise le GPU — et il ressort sans avoir touché un seul pixel de ce que l'utilisateur voit. La règle est sacrée : zéro changement visuel, zéro changement de comportement. On ne nettoie qu'à l'intérieur. Je t'explique quand c'est nécessaire, pourquoi l'IA salit, l'habitude qui évite que ça pourrisse, et UN prompt maître que tu lui passes pour qu'il opère phase par phase.
Au début, tout est magique. Tu dis à l'IA "ajoute un écran de profil" et il apparaît. "Maintenant un bouton pour exporter", et il apparaît. Tu avances vite, très vite. Mais il y a un moment — presque toujours entre la troisième et la dixième semaine — où quelque chose change. Demander une petite fonctionnalité n'est plus instantané. L'IA met plus de temps, se trompe, touche à des choses qu'elle ne devait pas. Des bugs apparaissent à des endroits que tu n'as même pas touchés. L'app fonctionne, mais la faire évoluer est devenu pénible, comme marcher avec de la boue aux chaussures.
C'est LE moment. Rien de dramatique ne s'est produit : rien de visible n'est cassé. Ce qui s'est passé est invisible et ça s'appelle la dette technique. L'IA a construit vite et, comme tous ceux qui construisent vite, elle a laissé des gravats : du code que plus personne n'utilise mais qui reste là, la même logique copiée dans cinq fichiers, des types any qui coupent toutes les alarmes, des animations montées n'importe comment. Rien de tout ça ne se voit à l'écran. Mais tout ça rend chaque changement futur plus difficile.
Voici l'essentiel, en toute honnêteté : l'IA n'écrit pas du mauvais code. Elle écrit du code qui fonctionne. Le problème, c'est qu'elle optimise pour "que ça marche maintenant", pas pour "que ce soit facile à maintenir dans trois mois". Et ces deux objectifs tirent dans des directions opposées. Voilà pourquoi, même si chaque morceau est correct, la somme finit par se salir. Voici les quatre types de gravats qu'elle laisse, et pourquoi elle les laisse :
any. Avec ça, elle coupe toutes les alarmes que TypeScript possède pour t'avertir des erreurs. Le code compile… et explose en production.Un chirurgien n'ouvre pas et ne fouille pas au hasard : il suit un protocole, dans l'ordre, étape par étape. La chirurgie de code, c'est pareil. Ce sont sept phases, et l'ordre compte : d'abord tu retires le mort (pour ne pas nettoyer du code que tu allais effacer), puis tu fusionnes les doublons, puis tu durcis les animations, puis les performances de React, puis les types, puis tu apaises le GPU, et à la fin tu émets un rapport de santé. Voici chacune d'elles.
La première chose, c'est de retirer de la table tout ce qui ne respire plus. C'est la phase la plus rentable car elle dégage le terrain pour toutes les autres : ça n'a aucun sens d'optimiser une fonction que tu vas effacer.
return, des if que plus personne ne déclenche.Le terrain nettoyé, tu cherches maintenant ce qui est répété. La règle du métier est simple : si quelque chose apparaît trois fois ou plus, ce n'est plus un hasard mais un motif qui mérite un seul endroit où vivre.
helper) que les deux endroits appellent. Une règle, un seul endroit.48, la même URL, la même couleur) → centralise-les dans des constantes nommées. Tu changes une fois, ça change partout.custom hook) qui encapsule la logique une seule fois.Les animations, c'est là où l'IA improvise le plus et où elle laisse le plus de défauts subtils — des choses qui ne cassent pas mais qui font que l'app se sent "cheap" : clignotements, sauts, transitions qui ne démarrent pas. Voici les règles concrètes que la chirurgie vérifie (elles s'appliquent aux librairies d'animation de React comme Motion / Framer Motion, le standard de l'écosystème) :
rgba(0,0,0,0) à la place. Quand tu interpoles le mot transparent avec une couleur, la transition peut produire un clignotement laid à mi-chemin ; rgba(0,0,0,0) interpole proprement.borderColor. Le shorthand n'interpole pas proprement.background est problématique ; anime seulement la propriété spécifique qui change.AnimatePresence) — si les éléments d'une liste animée n'ont pas de key stable et unique, les animations de sortie se cassent et les éléments sautent. La key doit être un id réel, jamais l'index du tableau.Ici la chirurgie cherche le travail que React répète sans nécessité. Chaque re-render inutile, c'est un peu de lenteur ; additionnés, ils font que l'app se sent lourde. Quatre points concrets sont passés en revue :
useCallback et useMemo "au cas où". Non : mémoïser a aussi un coût (mémoire, complexité). La chirurgie ne mémoïse que là où il y a un bénéfice réel et mesurable — un handler qui descend vers beaucoup d'enfants, un calcul vraiment coûteux. Trop optimiser est sa propre forme de saleté.TypeScript est le système d'alarmes de ton code : il t'avertit avant qu'une erreur n'atteigne l'utilisateur. Mais il ne fonctionne que si tu le laisses voir les types. Chaque any est une alarme que quelqu'un a coupée. Cette phase les rallume.
any désactive toutes les vérifications. Si tu ne connais vraiment pas le type, utilise unknown, qui t'oblige à le vérifier avant de l'utiliser (sûr), au lieu de any, qui n'oblige à rien (dangereux).as est un point où le compilateur a cessé de vérifier. On les revoit un par un : est-ce vrai, ou est-ce un pansement ?any déguisés.Voici la phase que presque personne ne connaît et celle qui se remarque le plus sur les appareils modestes. Certains effets visuels sont magnifiques mais brutalement coûteux à dessiner : si tu en abuses, la carte graphique se sature et l'app saccade. La chirurgie cherche les trois coupables classiques :
@keyframes. Animer un dégradé conique par JavaScript à chaque frame est très coûteux ; avec les keyframes le navigateur l'optimise.backdrop-blur, cet effet de verre dépoli si à la mode) oblige le GPU à regarder TOUT ce qui se trouve derrière l'élément et à le flouter en temps réel. Un seul, grand, ce n'est rien. Vingt petits qui se répètent, c'est comme demander à la carte de flouter l'écran vingt fois par frame. C'est là que le portable de ton utilisateur commence à faire souffler le ventilateur.Toute chirurgie se termine par un compte rendu. Sans rapport, tu ne sais pas ce qui a été touché ni ne peux avoir confiance qu'il n'y a pas eu de dégâts collatéraux. La dernière phase, c'est que l'agent te remette un résumé clair, dans ta langue, de tout ce qu'il a fait :
any éliminés, combien d'animations corrigées, etc.L'erreur la plus courante, c'est de penser la chirurgie comme quelque chose qu'on fait une fois, quand tout est déjà un désastre. Non. Le code de l'IA se salit CONTINUELLEMENT, parce que chaque session de construction laisse de nouveaux gravats. La chirurgie n'est pas une opération d'urgence : c'est le détartrage que tu fais tous les six mois pour ne jamais en arriver au traitement de canal.
Voici la pièce maîtresse : UN seul prompt qui transforme ton agent de code en chirurgien appliquant les 7 phases, dans l'ordre, à un fichier ou un module — sans toucher à rien de visuel. Remplis les [crochets], colle-le, et laisse-le opérer. Un conseil avant : fais d'abord un commit sur GitHub (ton filet de sécurité) et pointe-le vers UN module, pas vers tout le projet.
Agis comme un chirurgien de code expert en debug. Tu vas opérer ce fichier/module : [CHEMIN DU FICHIER OU DOSSIER, ex : src/components/Dashboard/]. Le stack est : [ex : React + TypeScript + Motion/Framer Motion + Tailwind]. RÈGLE SACRÉE ET INVIOLABLE : ZÉRO changement visuel et ZÉRO changement de comportement. L'app doit avoir l'air et se comporter EXACTEMENT pareil avant et après. Tu ne fais que nettoyer et durcir à l'intérieur. Devant tout doute entre nettoyer plus ou préserver le comportement, c'est TOUJOURS préserver le comportement qui gagne. N'efface rien si tu n'es pas sûr que ce n'est pas utilisé ; signale-le et demande-moi. Applique ces 7 phases DANS L'ORDRE. Ne passe pas à la suivante sans terminer la précédente. À la fin de chaque phase, dis-moi en une ligne ce que tu as trouvé et ce que tu as changé. PHASE 1 — CODE MORT : élimine les fichiers orphelins (que personne n'importe), les exports sans consommateurs, les variables/fonctions/imports inutilisés, et les branches de code inatteignables. Avant d'effacer quelque chose de douteux, liste-le-moi et attends ma confirmation. PHASE 2 — DOUBLONS : cherche la logique répétée (→ extrais dans un helper), les nombres/textes magiques répétés (→ constantes nommées), le JSX répété 3+ fois (→ sous-composant avec props), et le motif useState+handler répété (→ custom hook). NE fusionne PAS des choses qui se ressemblent seulement mais changent pour des raisons différentes. PHASE 3 — RÈGLES D'ANIMATION : corrige transparent→rgba(0,0,0,0), élimine le transition dupliqué, n'anime pas le shorthand border (utilise borderColor), change background→backgroundColor dans les animations, et assure des keys stables et uniques (jamais l'index) dans les listes avec AnimatePresence. PHASE 4 — PERFORMANCE REACT : enveloppe dans useCallback les handlers passés comme props, mémoïse avec useMemo les calculs coûteux, corrige les tableaux de dépendances de useEffect (ni trop ni trop peu), et ajoute une key stable à chaque .map. NE mémoïse PAS au cas où : seulement là où il y a un bénéfice réel. PHASE 5 — TYPESCRIPT : remplace chaque any par un type réel ou par unknown ; passe en revue chaque cast 'as Type' (est-ce vrai ou est-ce un pansement ?) ; internalise les exports qui ne sont utilisés que dans leur propre fichier ; et type les props de tous les composants. PHASE 6 — EFFONDREMENT DU GPU : déplace les dégradés coniques animés vers des @keyframes CSS ; consolide les repeat:Infinity s'il y en a beaucoup en même temps ; et remplace backdrop-blur par un fond solide/semi-transparent sur les petits éléments qui se répètent beaucoup. PHASE 7 — RAPPORT DE SANTÉ : à la fin, remets-moi un rapport avec : décompte par phase, total de lignes purgées, la confirmation explicite que tu n'as rien changé, ni visuel ni comportemental, et une liste de ce que tu as décidé de NE PAS toucher et pourquoi. Travaille phase par phase, montre-moi le diff de chacune, et si quelque chose met en péril la règle sacrée, ARRÊTE-toi et demande-moi avant de continuer.
Une chirurgie ne se termine pas quand tu refermes : elle se termine quand tu confirmes que le patient va bien. La règle sacrée (zéro changement de comportement), il faut la vérifier, pas seulement lui faire confiance. Il y a deux filets de sécurité automatiques qui te le confirment en quelques secondes, et que ton agent peut lancer sans que tu programmes quoi que ce soit.
# 1) La vérification des types : zéro erreur = la chirurgie n'a pas cassé les contrats npx tsc --noEmit # 2) Les tests : s'ils passaient avant et passent pareil après, # le comportement a été préservé npm test
git diff. Règle de lecture : presque tout ce que tu vois doit être des lignes ROUGES (effacées) ou des déplacements, pas de la logique nouvelle. Si apparaissent des chaînes de texte que l'utilisateur voit modifiées, des valeurs par défaut différentes, ou des conditions nouvelles, il y a là une possible blessure — demande à l'IA pourquoi avant d'accepter.Pour que ça ne se complique pas : la plus grande partie de la chirurgie, c'est ton agent de code qui la fait seul, par le chat. Ton rôle, c'est de diriger et d'approuver. Voici la répartition.
any et les animations mal montées — tu ne fais que lui donner le prompt maître.tsc et les tests pour confirmer qu'elle n'a rien cassé.Join 4,200+ builders. No credit card. Build your first app with AI in minutes.