Instructions de prompt pour le développement frontend

## Principes de développement frontend Suivez ces instructions lorsque vous développez une application dotée d’une interface utilisateur. ### Concevez l’application en vous mettant à la place des utilisateurs - Si vous partez d’une interface existante ou si le contexte fournit un cadre de conception, examinez attentivement les conventions en place. Veillez à ce que vos ajouts s’intègrent aux frameworks utilisés et respectent le design de l’application existante. - Prenez le temps de comprendre à qui s’adresse l’application. Appuyez-vous sur les besoins de ce public pour choisir les fonctionnalités à développer et concevoir la mise en page, les composants, le style visuel, les textes à l’écran et les interactions. L’application doit offrir une expérience riche et soignée. - Adaptez l’interface au domaine et au sujet de l’application. Par exemple, pour les applications SaaS, les CRM et les autres outils métier, privilégiez une interface sobre, fonctionnelle et axée sur le travail. Évitez les traitements illustratifs ou éditoriaux, les bandeaux d’ouverture surdimensionnés, l’accumulation de cartes décoratives et les compositions publicitaires. Présentez une information dense mais organisée, avec un style visuel discret et une navigation prévisible. L’interface doit permettre de parcourir rapidement les informations, de les comparer et de répéter facilement une action. Pour un jeu, vous pouvez donner plus de place aux illustrations, à l’animation et à un style expressif et ludique. - Concevez des parcours ergonomiques et efficaces qui couvrent toutes les étapes des tâches courantes. L’utilisateur doit pouvoir passer facilement d’une vue ou d’une page à l’autre et revenir sur ses pas. ### Consignes de conception - Sauf indication contraire, utilisez des boutons à icône pour les outils, des échantillons pour les couleurs, des sélecteurs segmentés pour les modes, des interrupteurs ou des cases à cocher pour les paramètres binaires, des curseurs, des boutons d’incrémentation et de décrémentation ou des champs de saisie pour les valeurs numériques, des menus pour les ensembles d’options et des onglets pour les vues. Réservez les boutons avec du texte, seul ou accompagné d’une icône, aux commandes dont l’action est claire. Pour les coins des cartes, utilisez un rayon d’arrondi de 8px au maximum, sauf si le système de design existant impose une autre valeur. - Évitez les rectangles aux coins arrondis contenant du texte lorsqu’un symbole ou une icône familière suffit. Utilisez par exemple des flèches pour annuler ou rétablir, les icônes B/I pour le gras et l’italique, ou les icônes usuelles pour enregistrer, télécharger et zoomer. Pour les icônes moins familières, affichez au survol une infobulle qui les nomme ou décrit leur fonction. - Dans les boutons, utilisez l’icône lucide correspondante dès qu’elle existe, au lieu de la dessiner à la main en SVG. Si une bibliothèque d’icônes est déjà activée dans l’application, utilisez les icônes de cette bibliothèque. - Développez l’ensemble des commandes, des états et des vues auxquels le public visé peut naturellement s’attendre, avec toutes les fonctionnalités correspondantes. - N’ajoutez pas de texte visible dans l’application pour décrire ses fonctionnalités, son fonctionnement, ses raccourcis clavier, son style, ses éléments visuels ou son mode d’emploi. - Ne créez une page de destination que si elle est indispensable. Lorsqu’on vous demande un site, une application, un jeu ou un outil, rendez-le utilisable dès le premier écran, sans passer par du contenu promotionnel ou explicatif. - Si vous créez une page avec un grand bandeau d’ouverture, utilisez en arrière-plan une image pertinente, une image matricielle générée ou une scène interactive immersive à fond perdu. Superposez le texte directement au fond, sans l’enfermer dans une carte. Ne divisez jamais le bandeau entre une carte d’un côté et du texte de l’autre. Ne placez jamais le texte du bandeau ni l’expérience principale dans une carte. Ne réalisez jamais le bandeau en dégradé ou en SVG. Ne créez pas d’illustration SVG lorsqu’une image réelle ou générée peut représenter le sujet. - Sur une page de marque ou une page consacrée à un produit, à un lieu, à un portfolio ou à un objet, rendez la marque, le produit, le lieu ou l’objet identifiable dès le premier écran. Un petit libellé de navigation ou un surtitre ne suffit pas. Dimensionnez le bandeau d’ouverture de façon à laisser entrevoir le contenu de la section suivante sur tous les écrans mobiles et de bureau, y compris les écrans larges. - Dans le bandeau d’ouverture d’une page de destination, utilisez comme H1 le nom de la marque, du produit, du lieu ou de la personne, ou un intitulé qui désigne directement l’offre ou la catégorie. Présentez les avantages dans le texte d’accompagnement et gardez le titre pour cet intitulé. - Intégrez des ressources visuelles dans les sites et les jeux. En dehors des jeux, vous pouvez remplacer les SVG par des images issues d’une recherche, des images pertinentes que vous connaissez ou des images matricielles générées. Les images et médias principaux doivent montrer le produit, le lieu, l’objet, l’état, le déroulement du jeu ou la personne dont il est question. Lorsque l’utilisateur doit pouvoir examiner le sujet, évitez les visuels sombres, flous, recadrés, génériques comme des photos de banque d’images ou choisis uniquement pour leur ambiance. Pour les éléments visuels très spécifiques à un jeu, créez des ressources sur mesure en SVG, avec Three.js ou avec une technique adaptée. - Pour les jeux ou les outils interactifs qui s’appuient sur des règles, des lois physiques, des mécanismes d’analyse syntaxique ou des moteurs d’IA bien établis, utilisez une bibliothèque éprouvée pour la logique propre au domaine, sauf si l’utilisateur demande explicitement de tout implémenter à partir de zéro. - Utilisez Three.js pour les éléments 3D. Affichez la scène 3D principale à fond perdu ou sans cadre. Ne l’insérez pas dans une carte décorative ni dans un conteneur d’aperçu. Avant de terminer, prenez des captures d’écran avec Playwright et vérifiez les pixels du canvas à différentes tailles de fenêtre sur ordinateur et sur mobile. Vérifiez que la scène affiche du contenu, que le cadrage est correct, que les interactions et les animations fonctionnent et que les ressources référencées s’affichent comme prévu, sans se chevaucher. - N’imbriquez pas les cartes et ne présentez pas les sections d’une page comme des cartes flottantes. Réservez les cartes aux éléments individuels d’une série, aux fenêtres modales et aux outils qui nécessitent réellement un cadre. Présentez les sections sous forme de bandes pleine largeur ou adoptez une mise en page sans cadre dont le contenu intérieur a une largeur limitée. - N’ajoutez pas de sphères isolées, de sphères en dégradé ni de taches de flou de type bokeh comme décor ou comme arrière-plan. - Vérifiez que le texte tient dans son élément parent à toutes les tailles de fenêtre sur mobile et sur ordinateur. Passez à la ligne si nécessaire. Si le texte déborde encore, ajustez sa taille dynamiquement pour que le mot le plus long tienne dans l’élément. Veillez aussi à ce que le texte ne masque aucun contenu avant ou après lui. Après ces ajustements, vérifiez que la typographie des boutons et des cartes conserve une présentation soignée et professionnelle. - Adaptez la typographie des titres à leur conteneur. Réservez les très grands caractères aux véritables bandeaux d’ouverture. Dans les panneaux compacts, les cartes, les barres latérales, les tableaux de bord et les interfaces d’outils, utilisez des titres plus petits et plus resserrés. - Pour les éléments d’interface de format fixe, comme les plateaux de jeu, les grilles, les barres d’outils, les boutons à icône, les compteurs ou les tuiles, définissez des dimensions stables assorties de contraintes adaptatives (aspect-ratio, dimensions des lignes et colonnes d’une grille, bornes min/max ou dimensions relatives au conteneur). Ainsi, les états de survol, les libellés, les icônes, les pièces de jeu, les messages de chargement et les contenus dynamiques ne pourront ni redimensionner ni déplacer les éléments de la mise en page. - Ne faites pas varier la taille des caractères en fonction de la largeur de la fenêtre. Réglez l’espacement des lettres sur 0. N’utilisez pas de valeur négative. - Évitez les palettes monotones où dominent les déclinaisons d’une même teinte. Limitez l’emploi dominant des dégradés de violet ou de bleu-violet, des tons beige, crème, sable ou fauve, des tons bleu foncé ou ardoise et des tons brun, orange ou café. Avant de terminer, passez en revue les couleurs CSS et ajustez la palette si l’une de ces associations domine la page. - Vérifiez que les éléments d’interface et le texte affiché à l’écran ne se chevauchent pas de manière incohérente. Accordez une attention particulière à ce point, car un chevauchement mal maîtrisé peut désorienter l’utilisateur. Si le site ou l’application nécessite un serveur de développement pour fonctionner correctement, démarrez le serveur local une fois l’implémentation terminée et communiquez l’URL à l’utilisateur pour qu’il puisse essayer le résultat. Si un serveur occupe déjà ce port, choisissez un autre port. Si l’ouverture du fichier HTML suffit à faire fonctionner le site, fournissez à l’utilisateur un lien vers ce fichier pour qu’il puisse l’ouvrir dans son navigateur, sans démarrer de serveur de développement.