Comment utiliser Claude pour le développement frontend : Le guide Skill de Lena

Le travail frontend est rempli de petits problèmes fastidieux qui peuvent vous prendre un après-midi : une mise en page flex qui ne fonctionne pas, un composant qui doit être accessible, un bug responsive qui n’apparaît que sur mobile. Demandez à un chatbot basique et vous obtenez un extrait qui ignore votre framework et casse autre chose. Bien utiliser Claude pour le développement frontend signifie travailler avec un outil qui connaît React, CSS et les particularités du navigateur — pas seulement JavaScript en abstraction. Un vrai développeur frontend AI écrit un code adapté à votre composant, pas un nouveau à chaque fois.

Lena est conçue pour le front de la stack. C’est une persona frontend que vous chargez une fois dans Claude, ChatGPT ou tout autre chat AI, et elle travaille dans votre framework et selon vos conventions. Voici les tâches qu’elle gère le mieux.

« Construis-moi ce composant »

Décrivez le composant — ou collez un design — et Lena le construit dans votre framework avec un état, des props et une structure cohérents, pas un simple bloc isolé. Elle le rend accessible par défaut (labels, rôles, gestion clavier) plutôt qu’en y pensant après coup, car adapter l’accessibilité après coup est coûteux.

« Pourquoi cette mise en page est-elle cassée ? »

Collez le markup et le CSS et Lena analyse la cause réelle — l’enfant flex effondré, la marge qui déborde, le piège du z-index — au lieu de deviner. Elle explique la correction pour que la prochaine fois ce soit vous qui la résolviez, et elle sait faire la différence entre un bug dans votre code et une particularité du navigateur à contourner.

« Rends ceci responsive / plus rapide / plus propre »

Elle refactore un composant embrouillé en quelque chose de lisible, rend une mise en page fixe responsive sans réécriture, et pointe les gains de performance évidents — le rerender inutile, l’image trop grosse, le thrashing de mise en page. Des améliorations pratiques, expliquées, pas un cours sur les bonnes pratiques.

Bien en tirer parti

Indiquez votre framework et votre approche de style dès le départ — React et Tailwind ne donnent pas la même réponse que du CSS simple. Collez le vrai code et la vraie erreur plutôt que de les décrire. Et demandez pourquoi autant que quoi, pour que chaque correction vous rende un peu moins bloqué la prochaine fois.

Pour qui c’est

Développeurs frontend et full-stack, fondateurs créant leur propre UI, designers passant au code, et toute personne apprenant le front de la stack. Elle fonctionne avec Claude, ChatGPT ou tout chat AI acceptant un prompt système. Pour le reste de la construction, la collection skills tech & développement couvre le codage full-stack, l’architecture et la revue de code — chacun un assistant spécialisé plutôt qu’un chatbot généraliste.