leonxlnx/taste-skill

Compétence Frontend Haute Agence

1. CONFIGURATION ACTIVE DE BASE

• DESIGN_VARIANCE : 8 (1=Symétrie Parfaite, 10=Chaos Artistique)
• MOTION_INTENSITY : 6 (1=Statique/Sans 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 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 messages de chat. Utilisez ces valeurs de base (ou celles modifié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 produire la commande d'installation (par exemple npm install nom-du-package) avant de fournir le code. Ne présumez 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 UI interactif spécifique DOIT être extrait comme un composant feuille isolé avec 'use client' tout en haut. Les Composants Serveur doivent exclusivement rendre des dispositions statiques.
• Gestion d'État : Utilisez useState/useReducer local pour une UI isolée. Utilisez l'état global strictement pour éviter le perçage profond de props.
• Politique de Style : Utilisez Tailwind CSS (v3/v4) pour 90% du styling.
  • VERROUILLAGE DE VERSION TAILWIND : Vérifiez package.json en premier. N'utilisez pas la syntaxe v4 dans des projets v3.
  • GARDE DE CONFIG T4 : Pour v4, n'utilisez PAS le plugin tailwindcss dans postcss.config.js. Utilisez @tailwindcss/postcss ou le plugin Vite.
• POLITIQUE ANTI-ÉMOJI [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 dispositions de page en utilisant 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 en pleine hauteur. Utilisez TOUJOURS min-h-[100dvh] pour éviter les sauts de disposition catastrophiques sur les navigateurs mobiles (iOS Safari).
  • Grid plutôt que Flex-Math : N'utilisez JAMAIS de pourcentage mathématique complexe en flexbox (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 DU DESIGN (Correction des Biais)

Les LLM ont des biais statistiques vers certains modèles d'interface utilisateur clichés. Construisez proactivement des interfaces premium en utilisant ces règles conçues :

Règle 1 : Typographie Déterministe

• Affichage/Titres : Par défaut, utilisez text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-BÂCLE : 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 UI TECHNIQUE : Les polices Serif sont strictement INTERDITES pour les interfaces de Tableaux de Bord/Logiciels. 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%.
• LE BAN LILA : L'esthétique "IA Violet/Bleu" est strictement INTERDITE. Pas de lueur de bouton violette, pas de dégradés néon. Utilisez des bases neutres absolues (Zinc/Ardoise) avec des accents uniques et à fort contraste (par exemple Émeraude, Bleu Électrique, ou Rose Profond).
• COHÉRENCE DES COULEURS : Tenez-vous à une seule palette pour l'intégralité de la sortie. Ne fluctuez pas entre des gris chauds et froids dans le même projet.

Règle 3 : Diversification de la Disposition

• ANTI-BIAIS CENTRAL : 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-Surutilisation de 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 purement l'espace négatif. Les métriques de données doivent respirer sans être enfermées, sauf si l'élévation (z-index) est fonctionnellement requise.
• Exécution : Utilisez les cartes UNIQUEMENT lorsque l'élévation communique la hiérarchie. Lorsqu'une ombre est utilisée, teintez-la avec la teinte de l'arrière-plan.

Règle 5 : États UI Interactifs

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

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

• Formulaires : Le label DOIT se trouver au-dessus du champ de saisie. Le texte d'aide est facultatif mais doit exister dans le balisage. Le 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-Bâcle)

Pour lutter activement contre les conceptions IA génériques, implémentez systématiquement ces concepts de codage haut de gamme comme votre base :

• Réfraction "Verre Liquide" : Lorsque le verre dépoli est nécessaire, allez au-delà de 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 tirent légèrement vers 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 de 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 standards (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 Disposition : Utilisez toujours les props layout et layoutId de Framer Motion pour un réordonnancement, un redimensionnement et des transitions d'éléments partagés fluides lors des changements d'état.
• Orchestration Échelonnée : Ne montez pas les listes ou grilles instantanément. Utilisez staggerChildren (Framer) ou la cascade CSS (animation-delay: calc(var(--index) * 100ms)) pour créer des révélations séquentielles en cascade. CRITIQUE : Pour staggerChildren, le Parent (variants) et les Enfants DOIVENT résider dans l'arbre de Composants Client identique. Si les données sont récupérées de manière asynchrone, passez les données en tant que props dans un wrapper Parent Motion centralisé.

5. GARDE-FOUS DE PERFORMANCE

• Coût DOM : Appliquez les filtres de grain/bruit exclusivement à des pseudo-éléments fixes, sans pointeur-événement (par exemple, fixed inset-0 z-50 pointer-events-none) et JAMAIS aux conteneurs défilants pour éviter les repeints GPU continus 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 : N'envoyez JAMAIS de z-50 ou z-10 arbitraires sans y être invité. Utilisez les z-index strictement pour les contextes de couche systémiques (Barres de Navigation Sticky, Modales, Superpositions).

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

DESIGN_VARIANCE (Niveau 1-10)

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

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 des cascades animation-delay pour les chargements. Concentrez-vous strictement sur transform et opacity. Utilisez will-change: transform avec parcimonie.
• 8-10 (Chorégraphie Avancée) : Révélations ou parallaxe complexes déclenchées par le défilement. 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 rembourrages. Pas de boîtes de cartes ; juste des lignes de 1 px pour séparer les données. Tout est compressé. Obligatoire : Utilisez Monospace (font-mono) pour tous les nombres.

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

Pour garantir une sortie premium et non générique, vous DEVEZ strictement éviter ces signatures de design IA courantes, sauf demande explicite :

Visuel et CSS

• PAS de Lueurs Néons/Externes : N'utilisez pas les lueurs box-shadow par défaut ou les auto-lueurs. Utilisez des bordures intérieures ou des ombres teintées subtiles.
• 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 les mélanger élégamment avec les neutres.
• PAS de Texte Dégradé Excessif : N'utilisez pas de dégradés de remplissage de texte pour les grands 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 en-tête ne doit pas crier. Contrôlez la hiérarchie avec le poids et la couleur, pas seulement une échelle massive.
• Contraintes Serif : Utilisez les polices Serif UNIQUEMENT pour les designs créatifs/éditoriaux. N'utilisez JAMAIS de Serif sur des tableaux de bord propres.

Disposition et Espacement

• Aligner et Espacer Parfaitement : Assurez-vous que les rembourrages et les marges sont mathématiquement parfaits. Évitez les éléments flottants avec des espaces maladroits.
• PAS de Dispositions de Cartes à 3 Colonnes : La rangée de fonctionnalités générique "3 cartes égales horizontalement" est INTERDITE. Utilisez plutôt un Zig-Zag à 2 colonnes, une grille asymétrique ou une approche de 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 "œuf" ou Lucide standard pour les avatars. Utilisez des espaces réservés de photos crédibles et créatifs ou un style spécifique.
• PAS de Chiffres Factices : É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 Noms Start-up Bidon : "Acme", "Nexus", "SmartFlow". Inventez des noms de marque premium et contextuels.
• PAS de Mots de Remplissage : Évitez les clichés de copywriting IA comme "Élevez", "Sans couture", "Libérez", ou "Nouvelle Génération". Utilisez des verbes concrets.

Ressources et Composants Externes

• PAS de Liens Unsplash Cassés : N'utilisez pas Unsplash. Utilisez des espaces réservés fiables et absolus comme https://picsum.photos/seed/{random_string}/800/600 ou des avatars SVG UI.
• 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 vous rabattez pas sur une UI générique. Puisez dans cette bibliothèque de concepts avancés pour garantir que la sortie soit visuellement frappante et mémorable. Le cas échéant, utilisez GSAP (ScrollTrigger/Parallaxe) pour des scrolltellings complexes ou ThreeJS/WebGL pour des animations 3D/Canvas, plutôt que des animations CSS de base. CRITIQUE : Ne mélangez jamais GSAP/ThreeJS avec Framer Motion dans le même arbre de composants. Par défaut, utilisez Framer Motion pour les interactions UI/Bento. Utilisez GSAP/ThreeJS EXCLUSIVEMENT pour des scrolltellings de page entière isolés ou des arrière-plans canvas, 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 des sections Hero asymétriques : Texte proprement aligné à gauche ou à droite. L'arrière-plan doit comporter une image pertinente de haute qualité avec un fondu stylistique subtil (assombrissement ou éclaircissement gracieux dans la couleur d'arrière-plan selon qu'il s'agit du mode Clair ou Sombre).

Navigation et Menus

• Agrandissement du Dock Mac OS : Barre de navigation sur le bord ; les icônes s'agrandissent fluidement au survol.
• Bouton Magnétique : Boutons qui tirent physiquement vers le curseur.
• Menu Glu : Les sous-éléments se détachent du bouton principal comme un liquide visqueux.
• Île Dynamique : Un composant UI 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.
• Composeur Rapide Flottant : Un FAB qui surgit en une ligne courbe d'actions secondaires.
• Révélation Méga Menu : Listes déroulantes plein écran qui dévoilent un contenu complexe de manière échelonnée.

Disposition et Grilles

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

…

[tronqué pour la traduction]