joniii4k/main1

Skill Front-End Haute Qualité

1. CONFIGURATION DE BASE ACTIVE

• DESIGN_VARIANCE : 8 (1=Symétrie Parfaite, 10=Chaos Artistique)
• MOTION_INTENSITY : 6 (1=Statique/Aucun mouvement, 10=Cinématique/Physique Magique)
• VISUAL_DENSITY : 4 (1=Galerie d'Art/Aéré, 10=Poste de Pilotage/Données Denses)

Instruction IA : La ligne de base standard pour toutes les générations est strictement fixée à ces valeurs (8, 6, 4). Ne demandez pas à l'utilisateur de modifier ce fichier. Sinon, écoutez TOUJOURS l'utilisateur : adaptez ces valeurs dynamiquement en fonction de ce qu'il demande explicitement dans ses invites de chat. Utilisez ces valeurs de base (ou remplacées par l'utilisateur) comme vos variables globales pour piloter la logique spécifique dans les Sections 3 à 7.

2. ARCHITECTURE ET CONVENTIONS PAR DÉFAUT

Sauf si l'utilisateur spécifie explicitement une pile différente, respectez ces contraintes structurelles pour maintenir la cohérence :

• VÉRIFICATION DES DÉPENDANCES [OBLIGATOIRE]: Avant d'importer UNE bibliothèque tierce (par exemple framer-motion, lucide-react, zustand), vous DEVEZ vérifier package.json. Si le package est manquant, vous DEVEZ fournir la commande d'installation (par exemple npm install nom-du-package) avant de fournir le code. Ne supposez jamais qu'une bibliothèque existe.
• Framework et Interactivité : React ou Next.js. Par défaut, utilisez les Composants Serveur (RSC).
  • SÉCURITÉ RSC : L'état global fonctionne UNIQUEMENT dans les Composants Client. Dans Next.js, enveloppez les providers dans un composant "use client".
  • ISOLATION DE L'INTERACTIVITÉ : Si les Sections 4 ou 7 (Mouvement/Verre Liquide) sont actives, le composant d'interface utilisateur interactif spécifique DOIT être extrait en tant que composant feuille isolé avec 'use client' tout en haut. Les Composants Serveur doivent exclusivement rendre des mises en page statiques.
• Gestion d'État : Utilisez useState/useReducer local pour l'interface utilisateur isolée. Utilisez l'état global strictement pour éviter le forage profond de props.
• Politique de Style : Utilisez Tailwind CSS (v3/v4) pour 90% du style.
  • VERROUILLAGE DE VERSION TAILWIND : Vérifiez d'abord package.json. N'utilisez PAS la syntaxe v4 dans les projets v3.
  • GARDE DE CONFIGURATION T4 : Pour la v4, n'utilisez PAS le plugin tailwindcss dans postcss.config.js. Utilisez @tailwindcss/postcss ou le plugin Vite.
• POLITIQUE ANTI-EMOJI [CRITIQUE]: N'utilisez JAMAIS d'emojis dans le code, le balisage, le contenu textuel ou le texte alternatif. Remplacez les symboles par des icônes de haute qualité (Radix, Phosphor) ou des primitives SVG propres. Les emojis sont INTERDITS.
• Responsivité et Espacement :
  • Standardisez les points de rupture (sm, md, lg, xl).
  • Contenez les mises en page à l'aide de max-w-[1400px] mx-auto ou max-w-7xl.
  • Stabilité de la Zone d'Affichage [CRITIQUE]: N'utilisez JAMAIS h-screen pour les sections Hero pleine hauteur. Utilisez TOUJOURS min-h-[100dvh] pour éviter les sauts de mise en page catastrophiques sur les navigateurs mobiles (iOS Safari).
  • Grille plutôt que Flex-Math : N'utilisez JAMAIS de calculs de pourcentage flexbox complexes (w-[calc(33%-1rem)]). Utilisez TOUJOURS CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) pour des structures fiables.
• Icônes : Vous DEVEZ utiliser exactement @phosphor-icons/react ou @radix-ui/react-icons comme chemins d'importation (vérifiez la version installée). Standardisez strokeWidth globalement (par exemple, utilisez exclusivement 1.5 ou 2.0).

3. DIRECTIVES D'INGÉNIERIE DE CONCEPTION (Correction de Biais)

Les LLM ont des biais statistiques envers des motifs d'interface utilisateur clichés spécifiques. Construisez de manière proactive des interfaces haut de gamme en utilisant ces règles d'ingénierie :

Règle 1 : Typographie Déterministe

• Affichage/Titres : Par défaut, utilisez text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-NÉGLIGENCE : Découragez Inter pour les ambiances "Premium" ou "Créatives". Forcez un caractère unique en utilisant Geist, Outfit, Cabinet Grotesk ou Satoshi.
  • RÈGLE D'UI TECHNIQUE : Les polices Serif sont strictement INTERDITES pour les interfaces utilisateur de Tableau de Bord/Logiciel. Pour ces contextes, utilisez exclusivement des associations Sans-Serif haut de gamme (Geist + Geist Mono ou Satoshi + JetBrains Mono).
• Corps/Paragraphes : Par défaut, utilisez text-base text-gray-600 leading-relaxed max-w-[65ch].

Règle 2 : Calibrage des Couleurs

• Contrainte : Maximum 1 Couleur d'Accent. Saturation < 80%.
• L'INTERDICTION DU VIOLET : L'esthétique "IA Violet/Bleu" est strictement INTERDITE. Pas de lueurs de boutons violets, pas de dégradés néon. Utilisez des bases neutres absolues (Zinc/Slate) avec des accents uniques à contraste élevé (par exemple Émeraude, Bleu Électrique ou Rose Foncé).
• COHÉRENCE DES COULEURS : Tenez-vous à une palette pour l'ensemble de la sortie. Ne fluctuez pas entre les gris chauds et froids dans le même projet.

Règle 3 : Diversification de la Mise en Page

• ANTI-BIAIS DE CENTRAGE : Les sections Hero/H1 centrées sont strictement INTERDITES lorsque DESIGN_VARIANCE > 4. Forcez les structures "Écran Partagé" (50/50), "Contenu aligné à gauche/Élément aligné à droite" ou "Espace Blanc Asymétrique".

Règle 4 : Matérialité, Ombres et "Anti-Suremploi des Cartes"

• RENFORCEMENT DU TABLEAU DE BORD : Pour VISUAL_DENSITY > 7, les conteneurs de cartes génériques sont strictement INTERDITS. Utilisez le regroupement logique via border-t, divide-y ou l'espace négatif pur. Les métriques de données doivent respirer sans être encadrées, sauf si l'élévation (z-index) est fonctionnellement requise.
• Exécution : N'utilisez les cartes QUE lorsque l'élévation communique une hiérarchie. Lorsqu'une ombre est utilisée, teintez-la à la teinte de l'arrière-plan.

Règle 5 : États d'Interface Utilisateur Interactifs

• Génération Obligatoire : Les LLM génèrent naturellement des états "réussis" statiques. Vous DEVEZ implémenter des cycles d'interaction complets :
  • Chargement : Chargeurs squelettiques correspondant aux tailles de mise en page (évitez les spinners circulaires génériques).
  • États Vides : États vides joliment composés indiquant comment peupler les données.
  • États d'Erreur : Signalement d'erreur clair et en ligne (par exemple, formulaires).
  • Retour Tactile : Sur :active, utilisez -translate-y-[1px] ou scale-[0.98] pour simuler une poussée physique indiquant le succès/l'action.

Règle 6 : Modèles de Données et de Formulaires

• Formulaires : L'étiquette DOIT se trouver au-dessus du champ de saisie. Le texte d'aide est facultatif mais doit exister dans le balisage. Texte d'erreur en dessous du champ de saisie. Utilisez un gap-2 standard pour les blocs de saisie.

4. PROACTIVITÉ CRÉATIVE (Implémentation Anti-Négligence)

Pour lutter activement contre les conceptions d'IA génériques, mettez en œuvre systématiquement ces concepts de codage haut de gamme comme votre ligne de base :

• Réfraction "Verre Liquide" : Lorsque le glassmorphisme est nécessaire, allez au-delà du backdrop-blur. Ajoutez une bordure intérieure de 1px (border-white/10) et une ombre intérieure subtile (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) pour simuler la réfraction physique des bords.
• Micro-Physique Magnétique (Si MOTION_INTENSITY > 5) : Implémentez des boutons qui attirent légèrement le curseur de la souris. CRITIQUE : N'utilisez JAMAIS React useState pour le survol magnétique ou les animations continues. Utilisez EXCLUSIVEMENT useMotionValue et useTransform de Framer Motion en dehors du cycle de rendu React pour éviter l'effondrement des performances sur mobile.
• Micro-Interactions Perpétuelles : Lorsque MOTION_INTENSITY > 5, intégrez des micro-animations continues et infinies (Pulsation, Machine à écrire, Flottement, Scintillement, Carrousel) dans les composants standard (avatars, points de statut, arrière-plans). Appliquez une physique à ressort premium (type: "spring", stiffness: 100, damping: 20) à tous les éléments interactifs - pas d'assouplissement linéaire.
• Transitions de Mise en Page : Utilisez toujours les propriétés layout et layoutId de Framer Motion pour un réordonnancement, un redimensionnement et des transitions d'éléments partagés fluides entre les changements d'état.
• Orchestration Échelonnée : Ne montez pas les listes ou les grilles instantanément. Utilisez staggerChildren (Framer) ou la cascade CSS (animation-delay: calc(var(--index) * 100ms)) pour créer des révélations en cascade séquentielles. CRITIQUE : Pour staggerChildren, le Parent (variants) et les Enfants DOIVENT résider dans l'arborescence de composants Client identique. Si les données sont récupérées de manière asynchrone, transmettez les données en tant que props à un wrapper Motion Parent centralisé.

5. GARDE-FOUS DE PERFORMANCE

• Coût DOM : Appliquez les filtres de grain/bruit exclusivement aux pseudo-éléments fixes sans pointeur-événement (par exemple, fixed inset-0 z-50 pointer-events-none) et JAMAIS aux conteneurs de défilement pour éviter les repeintures GPU continues et la dégradation des performances mobiles.
• Accélération Matérielle : N'animez JAMAIS top, left, width ou height. Animez exclusivement via transform et opacity.
• Retenue du Z-Index : Ne spammez JAMAIS des z-50 ou z-10 arbitraires sans y être invité. Utilisez les z-index strictement pour les contextes de calque systémiques (Barres de navigation collantes, Modaux, Superpositions).

6. RÉFÉRENCE TECHNIQUE (Définitions des Cadrans)

DESIGN_VARIANCE (Niveau 1-10)

• 1-3 (Prévisible) : justify-center Flexbox, grilles symétriques strictes à 12 colonnes, espacements égaux.
• 4-7 (Décalé) : Utilisez margin-top: -2rem pour le chevauchement, des rapports hauteur/largeur d'image variés (par exemple, 4:3 à côté de 16:9), des en-têtes alignés à gauche sur des données centrées.
• 8-10 (Asymétrique) : Mises en page Masonry, CSS Grid avec des unités fractionnaires (par exemple, grid-template-columns: 2fr 1fr 1fr), des zones vides massives (padding-left: 20vw).
• SUBSTITUTION MOBILE : Pour les niveaux 4-10, toute mise en page asymétrique au-dessus de md: DOIT revenir de manière agressive à une mise en page stricte à une seule colonne (w-full, px-4, py-8) sur les fenêtres < 768px pour empêcher le défilement horizontal et la rupture de mise en page.

MOTION_INTENSITY (Niveau 1-10)

• 1-3 (Statique) : Pas d'animations automatiques. États CSS :hover et :active uniquement.
• 4-7 (CSS Fluide) : Utilisez transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Utilisez les cascades animation-delay pour les chargements entrants. Concentrez-vous strictement sur transform et opacity. Utilisez will-change: transform avec parcimonie.
• 8-10 (Chorégraphie Avancée) : Révélations complexes déclenchées par le défilement ou parallaxe. Utilisez les hooks Framer Motion. N'utilisez JAMAIS window.addEventListener('scroll').

VISUAL_DENSITY (Niveau 1-10)

• 1-3 (Mode Galerie d'Art) : Beaucoup d'espace blanc. Énormes écarts entre les sections. Tout semble très cher et propre.
• 4-7 (Mode Application Quotidienne) : Espacement normal pour les applications Web standard.
• 8-10 (Mode Poste de Pilotage) : Petits espacements. Pas de boîtes de cartes ; juste des lignes de 1px pour séparer les données. Tout est compressé. Obligatoire : Utilisez Monospace (font-mono) pour tous les nombres.

7. SIGNES RÉVÉLATEURS DE L'IA (Modèles Interdits)

Pour garantir un résultat premium et non générique, vous DEVEZ strictement éviter ces signatures de conception d'IA courantes, sauf demande explicite :

Visuel et CSS

• PAS de Lueurs Néon/Extérieures : N'utilisez pas les lueurs box-shadow par défaut ou les lueurs automatiques. Utilisez des bordures intérieures ou des ombres subtilement teintées.
• PAS de Noir Pur : N'utilisez jamais #000000. Utilisez du Noir Cassé, Zinc-950 ou Charbon.
• PAS d'Accents Sur-saturés : Désaturez les accents pour qu'ils se mélangent élégamment avec les neutres.
• PAS de Texte Dégradé Excessif : N'utilisez pas de dégradés de remplissage de texte pour les gros en-têtes.
• PAS de Curseurs de Souris Personnalisés : Ils sont obsolètes et ruinent les performances/l'accessibilité.

Typographie

• PAS de Police Inter : Interdite. Utilisez Geist, Outfit, Cabinet Grotesk ou Satoshi.
• PAS de H1 Surdimensionnés : Le premier titre ne doit pas crier. Contrôlez la hiérarchie avec le poids et la couleur, et pas seulement une échelle massive.
• Contraintes Serif : Utilisez les polices Serif UNIQUEMENT pour les conceptions créatives/éditoriales. NE JAMAIS utiliser Serif sur des Tableaux de Bord propres.

Mise en Page et Espacement

• Alignez et Espacez Parfaitement : Assurez-vous que le rembourrage et les marges sont mathématiquement parfaits. Évitez les éléments flottants avec des espaces maladroits.
• PAS de Mises en Page à 3 Cartes : La rangée de fonctionnalités générique "3 cartes égales horizontalement" est INTERDITE. Utilisez plutôt une approche Zig-Zag à 2 colonnes, une grille asymétrique ou un défilement horizontal.

Contenu et Données (L'Effet "Jane Doe")

• PAS de Noms Génériques : "John Doe", "Sarah Chan" ou "Jack Su" sont interdits. Utilisez des noms très créatifs et réalistes.
• PAS d'Avatars Génériques : N'utilisez PAS les icônes SVG standard "œuf" ou les icônes utilisateur Lucide pour les avatars. Utilisez des espaces réservés photo créatifs et crédibles ou un style spécifique.
• PAS de Faux Nombres : Évitez les sorties prévisibles comme 99,99%, 50% ou les numéros de téléphone de base (1234567). Utilisez des données organiques et désordonnées (47,2%, +1 (312) 847-1928).
• PAS de Mots de Start-up : "Acme", "Nexus", "SmartFlow". Inventez des noms de marque premium et contextuels.
• PAS de Mots de Remplissage : Évitez les clichés de rédaction IA comme "Élevez", "Sans couture", "Libérez" ou "Nouvelle génération". Utilisez des verbes concrets.

Ressources Externes et Composants

• PAS de Liens Unsplash Cassés : N'utilisez pas Unsplash. Utilisez des espaces réservés absolus et fiables comme https://picsum.photos/seed/{random_string}/800/600 ou des Avatars UI SVG.
• Personnalisation shadcn/ui : Vous pouvez utiliser shadcn/ui, mais JAMAIS dans son état générique par défaut. Vous DEVEZ personnaliser les rayons, les couleurs et les ombres pour correspondre à l'esthétique haut de gamme du projet.
• Propreté Prête pour la Production : Le code doit être extrêmement propre, visuellement frappant, mémorable et méticuleusement raffiné dans chaque détail.

8. L'ARSENAL CRÉATIF (Inspiration Haut de Gamme)

Ne revenez pas à une interface utilisateur générique. Puisez dans cette bibliothèque de concepts avancés pour garantir que le résultat soit visuellement frappant et mémorable. Le cas échéant, exploitez GSAP (ScrollTrigger/Parallaxe) pour la narration complexe par défilement ou ThreeJS/WebGL pour les animations 3D/Canvas, plutôt que le mouvement CSS de base. CRITIQUE : Ne mélangez jamais GSAP/ThreeJS avec Framer Motion dans la même arborescence de composants. Par défaut, utilisez Framer Motion pour les interactions d'interface utilisateur/Bento. Utilisez GSAP/ThreeJS EXCLUSIVEMENT pour la narration par défilement en page entière isolée ou les arrière-plans de canevas, enveloppés dans des blocs de nettoyage useEffect stricts.

Le Paradigme Standard du Hero

• Arrêtez de faire du texte centré sur une image sombre. Essayez les sections Hero asymétriques : Texte proprement aligné à gauche ou à droite. L'arrière-plan doit comporter une image pertinente de haute qualité avec une atténuation stylistique subtile (assombrissement ou éclaircissement gracieux dans la couleur d'arrière-plan selon qu'il s'agit du mode Clair ou Sombre).

Navigation et Menus

• Magnification du Dock Mac OS : Barre de navigation sur le bord ; les icônes se mettent à l'échelle de manière fluide au survol.
• Bouton Magnétique : Boutons qui attirent physiquement le curseur.
• Menu Gluant : Les sous-éléments se détachent du bouton principal comme un liquide visqueux.
• Île Dynamique : Un composant d'interface utilisateur en forme de pilule qui se transforme pour afficher le statut/les alertes.
• Menu Radial Contextuel : Un menu circulaire s'étendant exactement aux coordonnées du clic.
• Cadran Flottant : Un FAB qui jaillit en une ligne courbe d'actions secondaires.
• Révélation de Méga Menu : Listes déroulantes plein écran qui dévoilent un contenu complexe par un fondu échelonné.

Mise en Page et Grilles

• Bento Grid : Regroupement asymétrique basé sur des tuiles (par exemple, le Centre de Contrôle Apple).
• Mise en Page Masonry : Grille décalée sans hauteurs de ligne fixes (par exemple, Pinterest).
• Chroma Grid : Bordures de grille ou tuiles montrant des dégradés de couleur subtils et continus.

*[Le contenu a été tronqué pour la traduction]