axewhyzed/agentic-skills

Ingénierie UI/UX & Systèmes de Design de Produits Modernes

Un guide opérationnel rigoureux et de qualité institutionnelle pour l'ingénierie des interfaces utilisateur, l'architecture UX, les jetons de design, les bibliothèques de composants et les transformations esthétiques des produits.

---

1. Principes Opérationnels Fondamentaux

1. Densité d'Information avec Espace de Respiration : Les mises en page haute densité (Linear, Bloomberg, Stripe, TradingView) présentent un signal maximal par pixel de la fenêtre sans encombrement. Ceci est obtenu grâce à un contraste délibéré, des échelles typographiques compactes, des bordures subtiles de 1px et des grilles d'espacement cohérentes (4px / 8px).
2. Directives de Conception de Haute Qualité : Rejeter les valeurs par défaut génériques et non raffinées :
   • ❌ Pas de dégradés violet/indigo sursaturés.
   • ❌ Pas de texte gris sur gris illisible à faible contraste (text-gray-400 sur blanc ou text-zinc-600 sur noir).
   • ❌ Pas d'icônes emoji au lieu de SVG vectoriels nets (Lucide / Radix).
   • ❌ Pas de grandes cartes flottantes vides avec des rayons énormes (rounded-3xl) et du texte minuscule non aligné.
   • ❌ Pas d'états de focus clavier manquants ou d'interactions exclusives à la souris.
   • ✔️ Utiliser des palettes de couleurs intentionnelles, des bordures subtiles de 1px (border-slate-800), des chiffres tabulaires monospace (font-mono tabular-nums), des micro-badges nets et des ratios de contraste accessibles ($>4.5:1$).
3. Sémantique des Couleurs Spécifique au Domaine :
   • Dans les applications financières / quantitatives, la couleur porte une signification sémantique à enjeux élevés.
   • Vert (#10B981 / #22C55E) : Alpha positif, rentabilité, signaux d'achat, croissance ascendante.
   • Rouge (#EF4444 / #F43F5E) : Pertes, drawdowns, risques juridiques, signaux de vente, flux de trésorerie négatifs.
   • Ambre / Jaune (#F59E0B) : Prudence, tri nécessaire, régime neutre, drapeaux d'avertissement.
   • Bleu / Cyan (#3B82F6 / #06B6D4) : États informationnels, anneaux de focus, boutons d'action principaux, tendances neutres.
   • Accessibilité pour le daltonisme : Ne jamais se fier uniquement à la couleur. Associer les indicateurs de couleur à des glyphes directionnels (▲, ▼, —), des badges d'état ou des infobulles.
4. Performance Perçue Prévisible :
   • Aucun décalage de mise en page (CLS < 0.1) : Réserver un espace squelette pour les graphiques et tableaux chargés paresseusement.
   • Feedback optimiste : États actifs instantanés (feedback < 50ms) sur les clics de boutons et les commutateurs de filtres.
   • Squelettes plutôt que spinners pleine page : Conserver la mise en page de la page et le chrome de navigation pendant l'hydratation des données.

---

2. Architecture des Jetons de Design

Un système de design robuste est structuré en trois niveaux explicites de jetons :

graph TD
    Primitive["1. Jetons Primitifs<br>(Valeurs brutes : slate-900, emerald-500, font-size-14, 8px)"]
    Semantic["2. Jetons Sémantiques<br>(Intention : surface-background, text-primary, border-subtle, status-success)"]
    Component["3. Jetons de Composants<br>(Limités : table-header-bg, badge-pill-padding, chart-grid-stroke)"]

    Primitive --> Semantic --> Component

2.1 Matrice des Jetons de Couleur (Thèmes Sombre et Clair Institutionnels)

Jeton Sémantique	Valeur Mode Sombre	Valeur Mode Clair	Utilisation
bg-app	#0B0F17 (Obsidienne Profonde)	#F8FAFC (Teinte Ardoise)	Fond racine de la fenêtre
bg-surface	#111827 (Zinc/Ardoise Riche)	#FFFFFF (Blanc Pur)	Cartes, panneaux, boîtes de dialogue modales
bg-surface-hover	#1E293B (Bleu-Gris Atténué)	#F1F5F9 (Ardoise Claire)	Survole de ligne de tableau, survole d'élément de menu
border-subtle	#1E293B (Bordure nette 1px)	#E2E8F0	Bordures de cartes, séparateurs de tableaux
border-accent	#334155	#CBD5E1	Entrées ciblées, bordures d'onglets actifs
text-primary	#F8FAFC (Contraste élevé, 16:1)	#0F172A	Titres principaux, valeurs de données de tableau
text-secondary	#94A3B8 (Ardoise 400, 7:1)	#475569	Étiquettes de métriques, descriptions, horodatages
text-muted	#64748B (Ardoise 500, 4.5:1)	#64748B	Pieds de page, états désactivés, indices de raccourcis
accent-primary	#2563EB (Bleu Royal)	#2563EB	Boutons d'appel à l'action principaux, onglets radio actifs
status-bullish	#10B981 (Émeraude)	#059669	Gains, Conviction d'achat, CAGR positif
status-bearish	#EF4444 (Rose/Rouge)	#DC2626	Drawdowns, Exclusions, Dette élevée
status-caution	#F59E0B (Ambre)	#D97706	Données obsolètes, Nécessite un examen, Drapeaux modérés

2.2 Échelle Typographique et Formatage Numérique

/* Essentiel pour les terminaux financiers et les tableaux haute densité */
.tabular-numbers {
  font-family: var(--font-mono), monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

• Titres (Affichage/Titre) : Semi-gras / Gras (600/700), crénage serré (letter-spacing: -0.03em), hauteur de ligne 1.2.
• Corps de texte et Contrôles : 13px–14px (text-sm), moyen (500) pour les étiquettes interactives, normal (400) pour le texte.
• Micro-étiquettes et Badges : 11px–12px (text-xs), gras/semi-gras (600/700), majuscule avec tracking-wider.
• Chiffres et Métriques : Police tabulaire monospace (JetBrains Mono, Roboto Mono, ou Inter avec tabular-nums), alignés à droite dans tous les tableaux.

---

3. Expérience Utilisateur des Terminaux Financiers et Tableaux Haute Densité

Les tableaux de données sont le moteur principal des flux de travail financiers et analytiques. Suivez ces règles non négociables :

1. Règles d'Alignement :
   • Texte, symboles et noms d'entreprise : Aligné à gauche.
   • Métriques numériques (Prix, P/E, ROCE, CAGR, Scores, Dates) : Aligné à droite.
   • Badges d'état, drapeaux actionnables, icônes : Aligné au centre.
2. Colonnes Figées et En-têtes Multi-Lignes :
   • La ligne d'en-tête doit rester fixe lors du défilement vertical (sticky top-0 bg-surface z-10).
   • Colonne d'identifiant figée (Nom de l'entreprise / Symbole) lors du défilement horizontal pour les mobiles et les tableaux ultra-larges.
3. Structure Visuelle :
   • Hauteur de ligne : Compacte (36px–40px) ou standard (44px) avec un rayage zébré subtil ou des bordures nettes de 1px (border-b border-slate-800/60).
   • Surbrillance instantanée au survol de la ligne (hover:bg-slate-800/40 cursor-pointer).
   • Pastilles de badge en ligne directes (bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded text-xs font-semibold).
4. Contrôles Interactifs :
   • Flèches indicatrices de tri (▲ tri ascendant actif, ▼ tri descendant actif, ⇅ triable atténué).
   • Recherche instantanée avec bouton d'effacement (X), compteur de filtres actifs (Filtres (3)), et contrôles de pagination avec compteur total (Affichage de 1 à 50 sur 1 060).

---

4. Architecture d'Utilisabilité et d'Interaction (Heuristiques de Nielsen Norman)

flowchart LR
    A["Reconnaissance plutôt que Rappel<br>(Fil d'Ariane, En-têtes Collantes, Filtres Enregistrés)"] --> B["Contrôle et Liberté de l'Utilisateur<br>(Effacement Rapide, Échap pour fermer, Annuler)"]
    B --> C["Visibilité de l'État du Système<br>(UI Optimiste, Squelettes de Chargement, Horodatages)"]
    C --> D["Efficacité d'Utilisation<br>(Raccourcis Clavier, Palette de Commandes Cmd+K)"]

1. Visibilité de l'État du Système :
   • Toujours afficher "En date du [Date/Heure du Marché]" sur les données financières afin que l'utilisateur sache si le marché est en direct ou fermé.
   • Lorsque les requêtes prennent plus de 100 ms, afficher des squelettes localisés plutôt que des écrans vides ou des spinners bloquants.
2. Contrôle et Liberté de l'Utilisateur :
   • Les barres de filtre doivent avoir un bouton "Réinitialiser tous les filtres" en un clic lorsqu'un filtre non par défaut est actif.
   • Les modales et les tiroirs doivent se fermer avec la touche Échap et un clic sur l'arrière-plan.
3. Cohérence et Hiérarchie des Composants :
   • Action Principale : Remplissage solide à contraste élevé (bg-blue-600 hover:bg-blue-500 text-white). Exactement un CTA principal par vue.
   • Action Secondaire : Remplissage bordé / subtil (bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700).
   • Action Fantôme : Transparent (hover:bg-slate-800 text-slate-400 hover:text-slate-100).
   • Action Destructrice : Avertissement teinté de rouge (bg-rose-600/10 hover:bg-rose-600/20 text-rose-400 border border-rose-500/30).
4. Accessibilité (WCAG 2.2 AA / AAA) :
   • Ratio de contraste texte-arrière-plan $ \ge 4.5:1$ pour le texte de corps normal, $ \ge 3:1$ pour les grands textes et les composants d'interface.
   • Tous les éléments interactifs doivent avoir des anneaux de focus :focus-visible visibles (ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-900).
   • Zones cliquables minimales : $44 \times 44$px sur les appareils tactiles.

---

5. Ingénierie et Vérification des Contrastes de Couleur WCAG 2.2 AA / AAA

Le contraste n'est pas une préférence esthétique ; c'est une spécification d'ingénierie mathématique. Un faible contraste provoque une fatigue cognitive sévère, une défaillance de la lisibilité sous l'effet de l'éblouissement ou d'une faible luminosité, et des violations de conformité en matière d'accessibilité.

5.1 Spécification du Ratio de Contraste Mathématique

La luminance relative $L$ de toute couleur sRGB est calculée à l'aide de la formule CIE : $$L = 0.2126 R_s + 0.7152 G_s + 0.0722 B_s$$ où chaque canal de couleur $C \in {R, G, B}$ est linéarisé à partir du sRGB 8 bits ($C_{\text{srgb}} = C_{8\text{bit}} / 255$) : $$C_s = \begin{cases} \frac{C_{\text{srgb}}}{12.92} & \text{si } C_{\text{srgb}} \le 0.04045 \ \left(\frac{C_{\text{srgb}} + 0.055}{1.055}\right)^{2.4} & \text{si } C_{\text{srgb}} > 0.04045 \end{cases}$$

Le ratio de contraste entre une couleur plus claire ($L_1$) et une couleur plus foncée ($L_2$) est : $$\text{Ratio de Contraste} = \frac{L_1 + 0.05}{L_2 + 0.05} : 1$$

5.2 Seuils de Conformité Stricts

Catégorie d'Élément	Minimum WCAG 2.2 AA	Cible WCAG 2.2 AAA	Norme de Vérification
Texte de Corps Normal (< 18pt / 24px normal, < 14pt / 18.5px gras)	$\ge 4.5:1$	$\ge 7.0:1$	Données principales, étiquettes, descriptions, lignes de tableau, étiquettes de boutons
Grand Texte et Titres ($\ge 18\text{pt}$ / $24\text{px}$, ou $\ge 14\text{pt}$ gras)	$\ge 3.0:1$	$\ge 4.5:1$	Titres d'affichage, en-têtes de section, numéros de métriques importants
Composants d'Interface et Objets Graphiques (WCAG 1.4.11)	$\ge 3.0:1$	$\ge 4.5:1$	Bordures de champs, bascules, limites d'onglets segmentés, contours de puces actives, anneaux de focus
Utilisation de la Couleur (WCAG 1.4.1)	Indicateur non couleur requis	Double codage requis	Ne jamais communiquer la sélection ou l'état uniquement par la couleur ; associer à des coches, des icônes ou du poids de texte

5.3 Les 5 Pièges de Contraste Courants et Corrections Systématiques

1. Le Mélange d'Onglets Segmentés en Mode Sombre

• Le Défaut : Un onglet actif défini sur --card: #111827 dans un conteneur défini sur --tab-bg: #0F172A. Le ratio de contraste est de 1.02:1 (un delta RVB de 2 unités). L'onglet sélectionné se fond complètement dans l'arrière-plan du conteneur, rendant impossible pour l'utilisateur de déterminer la sélection active.
• La Correction : Élever l'arrière-plan de l'onglet actif à --card-elevated: #1E293B, ajouter une bordure sémantique active de 1px (1px solid var(--accent) / #10B981), un anneau lumineux subtil (box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25)), et teinter l'icône SVG de l'onglet actif pour correspondre.

2. L'Échec de Contraste du Texte Atténué en Mode Clair

• Le Défaut : Texte secondaire/atténué par défaut utilisant Slate-400 (#94A3B8) sur blanc (#FFFFFF) ou papier clair (#F8FAFC). Le ratio de contraste est de 2.57:1, échouant gravement au WCAG SC 1.4.3 ($\ge 4.5:1$).
• La Correction : Assombrir le texte secondaire en mode clair au moins jusqu'à Slate-500 (#64748B), ce qui donne 4.77:1 sur #FFFFFF et 4.54:1 sur #F8FAFC.

3. L'Échec du Badge de Texte Ambre / Avertissement

• Le Défaut : Utilisation d'ambre brillant (#D97706 / Amber-600) sur blanc pur pour les pastilles d'état. Le ratio de contraste est de 3.22:1, échouant au seuil de texte 4.5:1.
• La Correction : Assombrir à Amber-700 (#B45309) pour les badges de texte en mode clair, atteignant 4.82:1 tout en maintenant la chaleur sémantique.

4. Limites Invisibles des Entrées et Contrôles en Mode Sombre (WCAG 1.4.11)

• Le Défaut : Bordures subtiles d'opacité blanche de 8 % à 12 % (rgba(255, 255, 255, 0.08)) sur les surfaces d'ardoise foncée (#111827 / #0B0F17) ont un ratio de contraste de seulement 1.2:1–1.4:1, violant l'exigence de limite non textuelle de 3:1.
• La Correction : Définir les bordures d'entrée par défaut en mode sombre à au moins 18 % d'opacité blanche (rgba(255, 255, 255, 0.18) / #334155) et les états de survol à 32 % (rgba(255, 255, 255, 0.32) / #475569).

5. Le Piège du FilterChip du Mode Sombre Android Material 3

• Le Défaut : Dans Material 3, le FilterChip sélectionné par défaut utilise secondaryContainer (#37474F) sur la surface sombre (#14181E), donnant seulement 1.83:1 de contraste. Sans contour ni glyphe, la puce échoue à la fois à SC 1.4.11 et SC 1.4.1.
• La Correction : Spécifier explicitement :
  1. selectedBorderColor = MaterialTheme.colorScheme.primary (ce qui donne 9.88:1 de contraste).
  2. selectedBorderWidth = 1.5.dp.
  3. leadingIcon = if (selected) { { Icon(Icons.Filled.Done, ...) } } else null afin que la sélection soit visible indépendamment de la perception des couleurs.

---

6. Guide de Refonte UI/UX (Exécution par Phases)

Lorsqu'il s'agit de refaire ou de moderniser l'UI/UX d'une application existante, suivez cette stratégie d'exécution en 4 étapes :

Étape 1 : Fondation du Système de Design et Extraction des Jetons

• Établir la palette de couleurs, l'échelle typographique, les variables d'espacement et la hiérarchie des rayons de bordure en CSS/Tailwind (globals.css / tailwind.config.js).
• Introduire les jetons de mode sombre institutionnels et les classes de couleurs sémantiques.

Étape 2 : Modernisation des Primitives de Composants

• Refactoriser les primitives d'interface réutilisables de base :
  • Button : Primaire, secondaire, fantôme, destructeur, avec spinners de chargement.
  • Badge / Tag : Pastilles de couleurs sémantiques pour l'état, les niveaux et la dynamique.
  • Card / Panel : Bordures nettes, coins arrondis (rounded-lg ou rounded-xl), arrière-plans subtils.
  • DataTable : Tri des en-têtes, nombres alignés à droite, en-tête collante, lignes au survol.
  • Modal / Drawer : Flou d'arrière-plan, piège de focus, animations d'entrée fluides.
  • Tooltip : Explications informatives pour les métriques complexes (par exemple EV/EBITDA, score CANSLIM).

Étape 3 : Refonte de la Mise en Page et de la Navigation

• Moderniser la barre de navigation supérieure / le panneau latéral avec des indicateurs de route active clairs, une barre de recherche d'entreprise, un indicateur d'état du système (par exemple, date de session de marché, état de l'API).
• Éliminer les secousses de mise en page et les sauts de page lors des transitions de route.

Étape 4 : Modernisation des Pages à Haute Valeur Ajoutée

• Refondre les vues critiques orientées utilisateur :
  • Tableau de Bord : Tuiles de résumé exécutif, pouls du marché, plus hausses/baisses, cartes de chaleur de régime.
  • Conviction / Filtre : Tableau haute densité avec recherche rapide, colonnes triables, pastilles de métriques et tiroir de détails rapide.
  • Espace de Travail / Détail de l'Entreprise : Graphiques interactifs avec pastilles de période (1M, 6M, 1Y, 5Y, Max), surlignage des données clés et métriques fondamentales.

---

7. Micro-Interactions & Conception d'Animations (GUIDE DE RÉFÉRENCE)

7.1 Mécanismes de Feedback Instantané

-Les micro-interactions sont la différence entre une UI qui semble réactive et une qui semble lente.

• Clic de Bouton & Changement d'État : Utiliser transition-colors duration-150 ease-in-out pour les changements d'états de boutons, de bascules et de puces. Éviter duration-300 (trop lent).
• Aperçus au Survole : transition-all duration-200 ease-out. Pour les cartes, utiliser scale-105 ou un assombrissement de l'arrière-plan (brightness-110).
• Animations d'Entrée : Pour les modales, les tiroirs et les listes : animate-in fade-in slide-in-from-bottom-4 duration-200. Fournir toujours data-state="open" / data-state="closed" pour les animations conditionnelles.
• Retrait de Spin / Chargement : Jamais de spinner indéfini. Utiliser des squelettes avec une impulsion de gradient subtile (animate-pulse bg-slate-700/50).

7.2 Animations de Transition de Page & de Route

• Nouvelles pages : opacity-0 vers opacity-100 (duration-200 ease-out).
• Retour arrière / Arrière : Sortie légèrement plus rapide (duration-150).
• Panels latéraux / Tiroirs : Glissement depuis le côté respectif (translate-x-full vers translate-x-0, durée 200-250ms).

---

8. Directives Supplémentaires pour les Interfaces Financières & de Données

• Graphiques & Visualisations : Utiliser des pastilles de période (1M, 6M, 1Y, 5Y, MAX) avec l'option sélectionnée affichée comme un onglet actif dans le temps. Les graphiques doivent avoir un quadrillage propre et discret (0.5px, ardoise foncée #334155 en mode sombre).
• Cadres de Données : Afficher toujours l'unité de mesure (par exemple, $, %, T) et le symbole de la devise si elle est applicable.
• Aucune Donnée / États Vides : Ne jamais montrer de tableau vide ou de graphique vide. Afficher une illustration SVG informative (`^) avec texte descriptif, par exemple "Commencez par ajouter une entreprise à votre liste de suivi.", et un CTA clair.

---

Cette compétence est conçue comme un guide de référence complet pour les ingénieurs UI/UX et les architectes de données qui construisent ou refondent des applications institutionnelles, axées sur les données. Ses principes s'appliquent à toute base de code utilisant les frameworks CSS modernes, les systèmes de jetons de design et les directives d'accessibilité.