shawon-builds/Ai-skill

Compétence Frontend Haute Performance (High-Agency)

1. CONFIGURATION DE BASE ACTIVE

• 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 de référence 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 celles modifiées par l'utilisateur) comme vos variables globales pour piloter la logique spécifique des 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 le fichier package.json. Si le package est manquant, vous DEVEZ générer 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 Server Components (RSC).
  • SÉCURITÉ RSC : L'état global fonctionne UNIQUEMENT dans les Client Components. Dans Next.js, enveloppez les fournisseurs 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 en tant que composant feuille isolé avec 'use client' tout en haut. Les Server Components doivent exclusivement rendre des mises en page statiques.
• Gestion d'état : Utilisez useState/useReducer local pour l'UI 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 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'émojis dans le code, le balisage, le contenu texte ou le texte alternatif. Remplacez les symboles par des icônes de haute qualité (Radix, Phosphor) ou des primitives SVG propres. Les émojis sont INTERDITS.
• Responsivité et espacement :
  • Standardisez les points de rupture (sm, md, lg, xl).
  • Contenez les mises en page avec 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 (Safari iOS).
  • Grille plutôt que maths flex : N'utilisez JAMAIS de pourcentages complexes de 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 les chemins d'import @phosphor-icons/react ou @radix-ui/react-icons (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 envers des modèles d'interface utilisateur clichés spécifiques. Construisez proactivement des interfaces premium à l'aide de 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-NÉGLIGENCE : Découragez Inter pour les ambiances "Premium" ou "Créatives". Imposez un caractère unique en utilisant Geist, Outfit, Cabinet Grotesk ou Satoshi.
  • RÈGLE UI TECHNIQUE : Les polices avec empattement sont strictement INTERDITES pour les UI de Tableau 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'accentuation. Saturation < 80%.
• L'INTERDICTION DU LILAS : L'esthétique "Violet/Bleu IA" est strictement INTERDITE. Pas de lueurs violettes sur les boutons, pas de dégradés néon. Utilisez des bases neutres absolues (Zinc/Ardoise) avec des accents uniques à contraste élevé (par exemple, Émeraude, Bleu électrique ou Rose profond).
• COHÉRENCE DES COULEURS : Tenez-vous à une seule 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. Imposez des structures "Écran partagé" (50/50), "Contenu aligné à gauche/Actif aligné à droite" ou "Espace blanc asymétrique".

Règle 4 : Matérialité, Ombres et "Anti-utilisation excessive des cartes"

• RENFORCEMENT DU TABLEAU DE BORD : Pour VISUAL_DENSITY > 7, les conteneurs de carte 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 enfermées, sauf si l'élévation (z-index) est fonctionnellement requise.
• Exécution : Utilisez des cartes UNIQUEMENT lorsque l'élévation communique une hiérarchie. Lorsqu'une ombre est utilisée, teintez-la de la teinte de fond.

Règle 5 : États d'interface utilisateur 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 : 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 : Rapports d'erreur clairs 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 être placée au-dessus de l'entrée. Le texte d'aide est facultatif mais doit exister dans le balisage. Texte d'erreur en dessous de l'entrée. Utilisez un gap-2 standard pour les blocs d'entrée.

4. PROACTIVITÉ CRÉATIVE (Implémentation anti-négligence)

Pour combattre activement les conceptions d'IA génériques, implémentez systématiquement ces concepts de codage haut de gamme comme base de référence :

• Réfraction "Verre liquide" : Lorsque le vitromorphisme 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 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 (Impulsion, 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 props layout et layoutId de Framer Motion pour des transitions fluides de réorganisation, de redimensionnement et d'éléments partagés lors des 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 séquentielles en cascade. 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 dans 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 événement de pointeur (par exemple, fixed inset-0 z-50 pointer-events-none) et JAMAIS aux conteneurs de défilement 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 Z-Index : Ne spammez JAMAIS z-50 ou z-10 arbitrairement sans invitation. Utilisez les z-index strictement pour les contextes de couche système (Barres de navigation collantes, 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 à 12 colonnes, espacements égaux.
• 4-7 (Décalé) : Utilisez un chevauchement margin-top: -2rem, des ratios d'aspect 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 en mosaïque, CSS Grid avec des 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 mise en page asymétrique au-dessus de md: DOIT revenir agressivement à une mise en page 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 mise en page.

MOTION_INTENSITY (Niveau 1-10)

• 1-3 (Statique) : Aucune animation automatique. É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 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 de section. 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 carte ; juste des lignes de 1px pour séparer les données. Tout est dense. Obligatoire : Utilisez Monospace (font-mono) pour tous les nombres.

7. MARQUEURS D'IA (Modèles interdits)

Pour garantir une sortie premium et non générique, vous DEVEZ éviter strictement 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 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é, du Zinc-950 ou du charbon de bois.
• PAS d'accents sursaturés : Désaturez les accents pour qu'ils se fondent é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 titre ne doit pas crier. Contrôlez la hiérarchie avec le poids et la couleur, pas seulement avec une échelle massive.
• Contraintes avec empattement : Utilisez les polices avec empattement UNIQUEMENT pour les conceptions créatives/rédactionnelles. N'utilisez JAMAIS de police avec empattement sur des tableaux de bord propres.

Mise en page et espacement

• Alignez et espacez parfaitement : Assurez-vous que les espacements et les marges sont mathématiquement parfaits. Évitez les éléments flottants avec des écarts maladroits.
• PAS de mises en page à 3 colonnes de cartes : La rangée de fonctionnalités générique "3 cartes égales horizontalement" est INTERDITE. Utilisez plutôt un zigzag à 2 colonnes, une grille asymétrique ou une approche de défilement horizontal.

Contenu et données (L'effet "Jean Dupont")

• PAS de noms génériques : "Jean Dupont", "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" standard 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 noms de startup bâclés : "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", "Transparent", "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 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. Lorsque cela est approprié, tirez parti de GSAP (ScrollTrigger/Parallaxe) pour les récits de défilement complexes ou de ThreeJS/WebGL pour les animations 3D/Canvas, plutôt que du 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 UI/Bento. Utilisez GSAP/ThreeJS EXCLUSIVEMENT pour les récits de défilement de page entière isolés ou les arrière-plans de canvas, enveloppés dans des blocs de nettoyage useEffect stricts.

Le paradigme Hero standard

• 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 de haute qualité et pertinente 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 se mettent à l'échelle de manière fluide au survol.
• Bouton magnétique : Boutons qui tirent physiquement vers le curseur.
• Menu gluant : 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 jaillit en une ligne courbe d'actions secondaires.
• Révélation de méga-menu : Listes déroulantes plein écran qui estompent progressivement un contenu complexe.

Mise en page et grilles

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

États vides & micro-interactions

• Mascotte interactive : Une mascotte SVG ou Lottie simple qui réagit aux interactions de l'utilisateur ou à l'absence de données.
• Chargement squelettique : Des squelettes de mise en page précis qui imitent le contenu final avec une animation subtile (lueur pâle).
• Compteur de particules : Un arrière-plan de compteur de type vitrine avec des chiffres qui claquent au défilement.
• Texte cinétique : Texte qui fait une rotation, un zoom ou un retournement pour révéler des mots statistiques dynamiques.
• Transition de mode : Un bouton de mode sombre/clair avec un changement d'icône animé par physique (par exemple, lune en rotation).

Données & graphiques

• Graphique en aires à nuage de points : Des points de données avec des zones de remplissage organiques et ondulées qui imitent la vie réelle.
• Graphique Sparkline : Graphiques minuscules intégrés dans des tableaux ou des statistiques (par exemple, recharts, chart.js).
• Indicateur thermo : Un indicateur de progression qui change de couleur (rouge → orange → vert) en fonction de la valeur.
• Tableau de bord 3D : Quelques éléments clés avec une profondeur axée (rotateX: 10).
• Micro-graphiques : Petites visualisations dans des info-bulles ou des résultats de recherche.

Typographie & sensorialité

• Texte à dégradé de lettres : Définissez la couleur lettre par lettre pour créer un effet d'arc-en-ciel subtil.
• Texte avec motif : Remplissez un titre avec un motif ou une image au lieu d'une couleur unie.
• Grille d'arrière-plan : Arrière-plan avec une grille Subtle (trame de points ou lignes de quadrillage).
• Design multi-états : Tous les composants doivent être rendus avec leurs états vide/erreur/chargement en plus de l'état "succès".
• Ombre d'avatar : Des profondeurs et des teintes organiques appliquées aux avatars utilisateur pour une sensation réaliste.
• Texte de marque watermarked : Filigrane en arrière-plan indiquant "Données de test" ou "EN VERSION BÊTA".
• Sélecteur de devises : Sélecteur de liste ou grille pour que l'utilisateur choisisse la devise d'affichage.
• Correction de contraste : Placez des bordures autour des éléments de couleur claire dans les zones sombres pour améliorer la lisibilité.

9. FEUILLE DE ROUTE DU COMPORTEMENT

• Version 0.1 : Publication initiale en tant que shawon-builds/Ai-skill (v1).
• Version 0.2 : design-taste-frontend (v2) devient la compétence active par défaut. Ai-skill (v1) est conservé pour la rétrocompatibilité.