ITDanZF/skill

Reconstruction de Prototype Frontend

Activation

Utilisez cette compétence uniquement lorsque les deux conditions suivantes sont remplies :

• L'utilisateur fournit ou référence clairement une image de page, une capture d'écran, une maquette ou un prototype.
• L'utilisateur demande explicitement de générer, recréer, convertir, implémenter ou restaurer la page frontend correspondante.

Si l'utilisateur demande uniquement de réviser ou décrire l'image, n'implémentez pas de code à moins d'y être invité.

Workflow

1. Inspectez d'abord l'image du prototype.

   • Identifiez le type de page, la zone d'affichage (viewport), les principales régions de mise en page, la grille d'alignement, le rythme d'espacement, l'échelle typographique, la densité et la hiérarchie visuelle.
   • Extrayez les éléments visibles : navigation, formulaires, boutons, tableaux, cartes, listes, onglets (tabs), filtres, médias, états vides, indicateurs de statut et icônes.
   • Déduisez les interactions probables uniquement à partir des affordances visibles, comme les actions hoverables, les onglets sélectionnés, les menus déroulants, les toggles, les filtres, les modales, la pagination ou les états de saisie.
   • Traitez le contenu ambigu comme un affichage statique, sauf si l'utilisateur demande un comportement fonctionnel.

2. Inspectez le projet frontend local avant de coder.

   • Identifiez le framework, le routage, les conventions de composants, la méthode de stylisation, les jetons de thème, les variables CSS, la configuration Tailwind, le système de design, la bibliothèque d'icônes et les modèles de page existants.
   • Privilégiez les composants existants, les échelles d'espacement, les utilitaires de typographie, les jetons de couleur et les primitives de mise en page.
   • Harmonisez-vous avec le modèle de page ou de composant existant le plus proche lorsqu'il n'entre pas en conflit avec le prototype.

3. Planifiez la surface d'implémentation.

   • Choisissez la structure de fichier/composant la plus petite qui correspond aux conventions du projet.
   • Gardez les données statiques du prototype locales et évidentes, sauf si le projet a un modèle d'accessoires (fixture) ou de données simulées (mock-data) établi.
   • N'introduisez pas de nouvelle gestion d'état (state management), de bibliothèques de composants, de frameworks CSS ou de modifications globales de thème pour une recréation de page statique.

4. Implémentez la page.

   • Recréez la mise en page et la structure visuelle avec du HTML sémantique et des composants natifs du projet.
   • Utilisez CSS pour la mise en page, le dimensionnement, l'espacement, le comportement responsive, les états au survol/focus, les transitions, l'empilement (layering) et les états visuels simples.
   • Utilisez JavaScript uniquement pour les comportements qui nécessitent réellement une gestion d'état ou d'événements.
   • Gardez le code efficace, lisible et de style production : des limites de composants claires, une duplication minimale, pas d'abstractions ponctuelles qui rendraient la page plus difficile à parcourir.

5. Vérifiez visuellement le résultat.

   • Exécutez le serveur de développement local ou l'aperçu statique concerné si nécessaire.
   • Comparez la page rendue au prototype sur la zone d'affichage (viewport) cible et au moins un point de rupture (breakpoint) responsive, le cas échéant.
   • Corrigez les discordances évidentes dans l'espacement, la hiérarchie, la couleur, le dimensionnement et le débordement avant de terminer.

Règles de Thème et Couleur

Utilisez le thème du projet local comme source de vérité :

• Privilégiez les jetons du projet, les variables CSS, les valeurs du thème Tailwind, les propriétés (props) du système de design et les variantes de composants existants.
• Si le projet possède un jeton sémantique correspondant, utilisez-le même si la couleur de la capture d'écran est légèrement différente.
• Si le projet ne possède pas de jeton approprié, utilisez directement la couleur de la capture d'écran et gardez-la locale à la page/au composant recréé.
• Ne modifiez pas les fichiers de thème globaux juste pour correspondre à une seule capture d'écran, sauf si l'utilisateur le demande explicitement.
• Préservez la cohérence de la marque plutôt qu'une copie parfaite des couleurs lorsque l'intention du thème local est claire.

Extraction de la Mise en Page et des Éléments

Capturez ces détails avant d'écrire le code :

• Structure de la page : en-tête (header), barre latérale (sidebar), pied de page (footer), largeur du contenu, zones de défilement (scroll), zones collantes (sticky).
• Grille : colonnes, lignes, gouttières (gutters), rythme des cartes/tableaux/listes, comportement aux points de rupture.
• Typographie : échelle des titres/corps/légendes, graisse (weight), hauteur de ligne, troncature.
• Contrôles : tailles des boutons, hauteurs des champs de saisie, états sélectionné/désactivé/chargement, icônes, badges.
• Fidélité du contenu : étiquettes, texte visible, nombres, dates, avatars, espaces réservés d'image et états vides.
• Empilement : ombres, bordures, séparateurs, superpositions (overlays), popovers et relations de z-index.

N'abusez pas du positionnement absolu. Privilégiez flexbox, grid, dimensionnement intrinsèque, aspect-ratio, contraintes min/max et règles responsives basées sur le conteneur. Utilisez le positionnement absolu uniquement pour les superpositions, les badges, les ancres décoratives ou l'empilement spécifique à une capture d'écran qui ne peut pas être exprimé proprement autrement.

Guide d'Interaction

Pour une recréation de page statique, implémentez les interactions uniquement au niveau implicité par la demande :

• Incluez toujours les visuels accessibles au survol (hover), focus, actif, sélectionné, désactivé et chargement (loading) lorsque le prototype les implique.
• Implémentez les actions simples d'ouverture/fermeture, de changement d'onglet, de sélection ou de filtrage uniquement lorsque l'utilisateur demande un comportement interactif ou que le prototype en dépend clairement.
• Privilégiez les sélecteurs CSS et le comportement HTML natif pour les interactions simples lorsque c'est pratique.
• Évitez le JavaScript utilisé uniquement pour corriger la mise en page, l'espacement, la troncature, les couleurs ou le comportement responsive. Résolvez ces problèmes avec CSS.

Règles de Qualité du Code

Suivez les pratiques frontend pour les grandes bases de code :

• Gardez les composants cohérents et nommez-les par domaine ou rôle visible, et non par fragments visuels vagues.
• Évitez de diviser la page en de nombreux petits composants, sauf s'il existe de réelles responsabilités indépendantes.
• Conservez le typage des données statiques d'exemple lorsque le projet utilise TypeScript.
• Utilisez les bibliothèques d'icônes existantes plutôt que des SVG codés à la main lorsqu'elles sont disponibles.
• Ajoutez du texte alternatif (alt text), des étiquettes (labels), des styles de focus au clavier et une structure sémantique le cas échéant.
• Évitez les nombres magiques codés en dur lorsque le projet possède des jetons d'espacement, de dimensionnement ou de couleur.
• N'ajoutez pas de dépendances pour des effets que CSS ou les utilitaires existants peuvent gérer.

Liste de Vérification d'Achèvement

Avant la réponse finale, confirmez :

• L'image a été inspectée pour la mise en page, les éléments, le thème et les interactions implicites.
• Le thème du projet existant et les conventions frontend ont été vérifiés.
• Les couleurs privilégient les jetons locaux, les couleurs de la capture d'écran n'étant utilisées que pour les jetons manquants.
• CSS gère la mise en page visuelle et les états dans la mesure du possible.
• La page rendue a été prévisualisée ou la raison pour laquelle elle n'a pas pu l'être est indiquée.