moulkefta/Claude-Skills

Compétence Frontend 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 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 celles remplacé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 ex. framer-motion, lucide-react, zustand), vous DEVEZ vérifier package.json. Si le package est manquant, vous DEVEZ fournir la commande d'installation (par ex. 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 rendre exclusivement 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 package.json d'abord. 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 textuel 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 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 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 mathématiques 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 les chemins d'importation @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 DE CONCEPTION (Correction de Biais)

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

Règle 1 : Typographie Déterministe

• Affichage/Titres : Par défaut text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-SLOP : Découragez Inter pour les vibrations « 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 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 text-base text-gray-600 leading-relaxed max-w-[65ch].

Règle 2 : Calibrage des Couleurs

• Contrainte : Max 1 Couleur d'Accent. Saturation < 80%.
• L'INTERDICTION LILA : L'esthétique « Violet/Bleu IA » 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 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 quand 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 encadré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 de la teinte d'arrière-plan.

Règle 5 : États UI Interactifs

• Génération Obligatoire : Les LLM génèrent naturellement des états de réussite « 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 magnifiquement composés indiquant comment remplir 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 se trouver 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-Slop)

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

• Réfraction « Verre Liquide » : Lorsque le glassmorphisme 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 des bords physiques.
• 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 : Quand 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 de 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 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 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, passez les données comme 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 et à pointeur-événement-absent (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 de Z-Index : NE spammez JAMAIS z-50 ou z-10 arbitrairement sans y être invité. Utilisez les z-index strictement pour les contextes de couches systémiques (Barres de Navigation Collantes, Modales, Superpositions).

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

DESIGN_VARIANCE (Niveau 1-10)

• 1-3 (Prévisible) : Flexbox justify-center, grilles symétriques strictes de 12 colonnes, espacements égaux.
• 4-7 (Décalé) : Utilisez margin-top: -2rem pour chevaucher, des rapports 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 Masonry, 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 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) : 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. 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. Grands écarts de 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 dense. Obligatoire : Utilisez Monospace (font-mono) pour tous les nombres.

7. INDICES 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 & CSS

• PAS de Lueurs Néon/Externes : N'utilisez pas les lueurs box-shadow ou les auto-lueurs par défaut. 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 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 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 Serif : Utilisez les polices Serif UNIQUEMENT pour les designs créatifs/éditoriaux. N'utilisez JAMAIS Serif sur des Tableaux de Bord propres.

Mise en Page & Espacement

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

Contenu & 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 » standard ou les icônes utilisateur Lucide pour les avatars. Utilisez des espaces réservés pour photos créatifs et crédibles ou un style spécifique.
• PAS de Nombres 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 de Startup Bidon : « Acme », « Nexus », « SmartFlow ». Inventez des noms de marque premium et contextuels.
• PAS de Mots de Remplissage : Évitez les clichés de rédaction d'IA comme « Élevez », « Transparent », « Libérez » ou « Nouvelle Génération ». Utilisez des verbes concrets.

Ressources Externes & 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 du projet haut de gamme.
• 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 l'interface utilisateur 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, exploitez GSAP (ScrollTrigger/Parallax) pour les scrollytelling complexes 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. Utilisez par défaut Framer Motion pour les interactions UI/Bento. Utilisez GSAP/ThreeJS EXCLUSIVEMENT pour les scrollytelling de page entière ou les arrière-plans Canvas isolés, 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 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 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 & Menus

• Agrandissement du Dock Mac OS : Barre de navigation en bordure ; les icônes se mettent à l'échelle de manière fluide au survol.
• Bouton Magnétique : Boutons qui tirent physiquement vers le curseur.
• Menu Visqueux : 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 d'Appel Flottant : Un FAB qui jaillit en une ligne courbe d'actions secondaires.
• Révélation Méga Menu : Des menus déroulants en plein écran qui dévoilent un contenu complexe de manière échelonnée.

Mises en Page & Grilles

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