ElKrapulito/calucha-landing

UI/UX Pro Max - Design Intelligence

Intelligence de conception UI/UX pour le web, le mobile et le desktop. Ce skill doit être utilisé lors de la conception, la construction, la révision ou la correction d'interfaces, y compris les pages, les composants, les systèmes de design, l'accessibilité, l'interaction, la mise en page responsive, la typographie, les couleurs, les graphiques et l'implémentation UI spécifique à chaque stack. Données locales consultables : 79 styles consultables (50 actifs), 192 palettes de produits et profils de raisonnement, 74 associations de polices, 119 directives UX, 105 icônes, 17 préréglages GSAP, 25 types de graphiques et 22 stacks.

Quand l'utiliser

Utilisez ce skill lorsque la tâche implique la structure de l'interface utilisateur, les décisions de conception visuelle, les modèles d'interaction ou le contrôle de la qualité de l'expérience utilisateur.

Cas d'utilisation principaux

Ce skill est particulièrement utile dans les situations suivantes :

• Concevoir de nouvelles pages (Landing Page, Tableau de bord, Admin, SaaS, Application mobile)
• Créer ou restructurer des composants d'interface utilisateur (boutons, fenêtres modales, formulaires, tableaux, graphiques, etc.)
• Choisir des schémas de couleurs, des systèmes de polices, des règles d'espacement ou des systèmes de mise en page
• Examiner le code de l'interface utilisateur pour l'expérience utilisateur, l'accessibilité ou la cohérence visuelle
• Implémenter des structures de navigation, des animations ou des comportements responsives
• Prendre des décisions de conception au niveau du produit (style, hiérarchie de l'information, expression de la marque)
• Améliorer la qualité perçue, la clarté ou la convivialité de l'interface

Recommandé

Il est recommandé d'utiliser ce skill dans les cas suivants :

• L'interface semble "peu professionnelle", mais la raison n'est pas claire
• Vous recevez des commentaires sur la convivialité ou l'expérience
• Vous préparez une optimisation de la qualité de l'interface avant la mise en ligne
• Vous devez aligner la conception sur plusieurs plateformes (Web / iOS / Android)
• Vous construisez un système de design ou une bibliothèque de composants réutilisables

Passer

Inutile d'utiliser ce skill dans les cas suivants :

• Développement de logique purement back-end
• Conception d'API ou de base de données uniquement
• Optimisation des performances sans rapport avec l'interface
• Travail d'infrastructure ou DevOps
• Scripts ou tâches d'automatisation non visuels

Critère de décision : Si la tâche modifie l'apparence, l'utilisation, le mouvement ou l'interaction d'une fonctionnalité, ce skill doit être utilisé.

Catégories de règles par priorité

À consulter par l'humain/l'IA : décidez sur quelles règles vous concentrer en premier selon la priorité 1→10 ; utilisez --domain <Domaine> pour les détails. Le script ne lit pas ce tableau.

Priorité	Catégorie	Impact	Domaine	Vérifications clés (Doit avoir)	Anti-patrons (À éviter)
1	Accessibilité	CRITIQUE	ux	Contraste 4.5:1, Texte alternatif, Navigation clavier, Étiquettes Aria	Supprimer les anneaux de focus, Boutons avec uniquement des icônes sans étiquette
2	Toucher et interaction	CRITIQUE	ux	Taille min 44×44px, Espacement 8px+, Retour de chargement	Dépendre uniquement du survol, Changements d'état instantanés (0ms)
3	Performance	ÉLEVÉ	ux	WebP/AVIF, Chargement différé, Réserver de l'espace (CLS < 0,1)	Instabilité de mise en page, Déplacement cumulatif de la mise en page
4	Sélection de style	ÉLEVÉ	style, product	Correspondre au type de produit, Cohérence, Icônes SVG (pas d'émojis)	Mélanger aléatoirement plat et skeuomorphe, Émojis comme icônes
5	Mise en page et responsive	ÉLEVÉ	ux	Points de rupture mobile-first, Balise viewport, Pas de défilement horizontal	Défilement horizontal, Largeurs de conteneur en px fixes, Désactiver le zoom
6	Typographie et couleur	MOYEN	typography, color	Base 16px, Hauteur de ligne 1.5, Jetons de couleur sémantiques	Texte du corps < 12px, Gris sur gris, Hex bruts dans les composants
7	Animation	MOYEN	ux	Timing contextuel, Le mouvement a du sens, Continuité spatiale	Une seule durée pour toutes les transitions, Animer largeur/hauteur, Pas de mouvement réduit
8	Formulaires et commentaires	MOYEN	ux	Étiquettes visibles, Erreur près du champ, Texte d'aide, Divulgation progressive	Étiquette uniquement dans le placeholder, Erreurs uniquement en haut, Submerger d'entrée
9	Modèles de navigation	ÉLEVÉ	ux	Retour prévisible, Barre inférieure ≤5, Liens profonds	Navigation surchargée, Comportement de retour cassé, Pas de liens profonds
10	Graphiques et données	FAIBLE	chart	Légendes, Infobulles, Couleurs accessibles	Se fier uniquement à la couleur pour transmettre le sens

Référence rapide

1. Accessibilité (CRITIQUE)

• color-contrast - Ratio minimum de 4.5:1 pour le texte normal (texte large 3:1) ; Material Design
• focus-states - Anneaux de focus visibles sur les éléments interactifs (2–4px ; Apple HIG, MD)
• alt-text - Texte alternatif descriptif pour les images porteuses de sens
• aria-labels - aria-label pour les boutons avec uniquement des icônes ; accessibilityLabel en natif (Apple HIG)
• icon-context - La sémantique dépend de l'utilisation : les icônes décoratives à côté d'un texte visible sont cachées de l'arbre d'accessibilité ; les icônes significatives nécessitent une alternative textuelle ; les commandes iconiques nécessitent un nom accessible et un état applicable
• keyboard-nav - L'ordre de tabulation correspond à l'ordre visuel ; prise en charge complète du clavier (Apple HIG)
• form-labels - Utiliser label avec l'attribut for
• skip-links - Lien pour passer au contenu principal pour les utilisateurs clavier
• heading-hierarchy - h1→h6 séquentiel, pas de saut de niveau
• color-not-only - Ne pas transmettre d'informations uniquement par la couleur (ajouter une icône/du texte)
• dynamic-type - Prendre en charge le redimensionnement du texte du système ; éviter la troncature lorsque le texte s'agrandit (Apple Dynamic Type, MD)
• reduced-motion - Respecter prefers-reduced-motion ; réduire/désactiver les animations lorsqu'elles sont demandées (Apple Reduced Motion API, MD)
• voiceover-sr - accessibilityLabel/accessibilityHint significatifs ; ordre de lecture logique pour VoiceOver/lecteurs d'écran (Apple HIG, MD)
• escape-routes - Fournir annuler/retour dans les modales et les flux en plusieurs étapes (Apple HIG)
• keyboard-shortcuts - Préserver les raccourcis système et d'accessibilité ; proposer des alternatives clavier pour le glisser-déposer (Apple HIG)
• focus-not-obscured - Les éléments d'interface collants, les superpositions et les bannières ne doivent pas masquer le contrôle ciblé par le clavier (WCAG 2.2 AA)
• focus-not-obscured-enhanced - Garder l'ensemble du composant ciblé visible (WCAG 2.2 AAA)
• focus-appearance - Vérifier la zone de l'indicateur de focus et le contraste d'état 3:1 ; le simple fait d'avoir un focus visible ne suffit pas (WCAG 2.2 AAA)
• dragging-alternative - Chaque action de glissement contrôlée par l'auteur nécessite une alternative à pointeur unique et au clavier (WCAG 2.2 AA)
• web-target-size - Les cibles de pointeur Web nécessitent 24×24 px CSS ou une exception documentée ; ne pas substituer les unités natives (WCAG 2.2 AA)
• consistent-help - Les mécanismes d'aide répétés restent dans le même ordre relatif sur un ensemble de pages (WCAG 2.2 A)
• redundant-entry - Réutiliser les informations déjà fournies dans le même processus, sauf si la ressaisie est essentielle (WCAG 2.2 A)
• accessible-authentication - Autoriser les gestionnaires de mots de passe et le collage ; fournir un chemin d'authentification non cognitif (WCAG 2.2 Minimum, AA). Le critère AAA amélioré n'est pas représenté dans l'ensemble de données
• auto-rotation-controls - Les carrousels et le contenu en mouvement nécessitent des commandes de pause/arrêt et doivent s'arrêter au focus ou au mouvement réduit (WAI)
• contextual-live-badge-updates - Annoncer un nombre/statut modifié sous forme d'une phrase contextuelle complète sans déplacer le focus ; utiliser une zone live/statut appropriée et des mises à jour atomiques uniquement si nécessaire

2. Toucher et interaction (CRITIQUE)

• touch-target-size - Min 44×44pt (Apple) / 48×48dp (Material) ; étendre la zone de contact au-delà des limites visuelles si nécessaire
• touch-spacing - Espacement minimum de 8px/8dp entre les cibles tactiles (Apple HIG, MD)
• hover-vs-tap - Utiliser clic/tap pour les interactions principales ; ne pas se fier uniquement au survol
• loading-buttons - Désactiver le bouton pendant les opérations asynchrones ; afficher un spinner ou une progression
• error-feedback - Messages d'erreur clairs près du problème
• cursor-pointer - Ajouter cursor-pointer aux éléments cliquables (Web)
• gesture-conflicts - Éviter le balayage horizontal sur le contenu principal ; préférer le défilement vertical
• tap-delay - Utiliser touch-action: manipulation pour réduire le délai de 300ms (Web)
• standard-gestures - Utiliser les gestes standard de la plateforme de manière cohérente ; ne pas redéfinir (par exemple, balayage retour, zoom par pincement) (Apple HIG)
• system-gestures - Ne pas bloquer les gestes système (Centre de contrôle, balayage retour, etc.) (Apple HIG)
• press-feedback - Retour visuel lors de l'appui (vague/mise en évidence ; couches d'état MD)
• haptic-feedback - Utiliser le retour haptique pour les confirmations et les actions importantes ; éviter la surutilisation (Apple HIG)
• gesture-alternative - Ne pas se fier aux interactions uniquement gestuelles ; toujours fournir des contrôles visibles pour les actions critiques
• safe-area-awareness - Garder les cibles tactiles principales éloignées de l'encoche, de l'île dynamique, de la barre gestuelle et des bords de l'écran
• no-precision-required - Éviter d'exiger des tapotements parfaitement précis sur de petites icônes ou des bords fins
• swipe-clarity - Les actions de balayage doivent montrer une affordance ou un indice clair (chevron, étiquette, tutoriel)
• drag-threshold - Utiliser un seuil de mouvement avant de commencer le glissement pour éviter les glissements accidentels

3. Performance (ÉLEVÉ)

• image-optimization - Utiliser WebP/AVIF, images responsives (srcset/sizes), charger différé les actifs non critiques
• image-dimension - Déclarer largeur/hauteur ou utiliser aspect-ratio pour éviter le déplacement de mise en page (Core Web Vitals : CLS)
• font-loading - Utiliser font-display: swap/optional pour éviter le texte invisible (FOIT) ; réserver de l'espace pour réduire le déplacement de mise en page (MD)
• font-preload - Précharger uniquement les polices critiques ; éviter de surutiliser le préchargement sur chaque variante
• critical-css - Prioriser le CSS au-dessus de la ligne de flottaison (inline du CSS critique ou feuille de style chargée tôt)
• lazy-loading - Charger différé les composants non principaux via import dynamique / découpage au niveau des routes
• bundle-splitting - Diviser le code par route/fonctionnalité (React Suspense / Next.js dynamic) pour réduire le chargement initial et le TTI
• third-party-scripts - Charger les scripts tiers en async/defer ; auditer et supprimer ceux qui sont inutiles (MD)
• reduce-reflows - Éviter les lectures/écritures fréquentes de la mise en page ; regrouper les lectures DOM puis les écritures
• content-jumping - Réserver de l'espace pour le contenu asynchrone afin d'éviter les sauts de mise en page (Core Web Vitals : CLS)
• lazy-load-below-fold - Utiliser loading="lazy" pour les images situées sous la ligne de flottaison et les médias lourds
• virtualize-lists - Virtualiser les listes de 50 éléments ou plus pour améliorer l'efficacité de la mémoire et les performances de défilement
• main-thread-budget - Maintenir le travail par trame sous ~16ms pour 60fps ; déplacer les tâches lourdes hors du thread principal (HIG, MD)
• progressive-loading - Utiliser des écrans squelette / shimmer au lieu de spinners bloquants longs pour les opérations >1s (Apple HIG)
• input-latency - Maintenir la latence d'entrée sous ~100ms pour les tapotements/défilements (norme de réactivité Material)
• tap-feedback-speed - Fournir un retour visuel dans les 100ms suivant le tapotement (Apple HIG)
• debounce-throttle - Utiliser debounce/throttle pour les événements à haute fréquence (défilement, redimensionnement, saisie)
• offline-support - Fournir des messages d'état hors ligne et un repli de base (PWA / mobile)
• network-fallback - Proposer des modes dégradés pour les réseaux lents (images de résolution inférieure, moins d'animations)

4. Sélection de style (ÉLEVÉ)

• style-match - Adapter le style au type de produit (utiliser --design-system pour les recommandations)
• consistency - Utiliser le même style sur toutes les pages
• no-emoji-icons - Utiliser des icônes SVG (Heroicons, Lucide), pas d'émojis
• color-palette-from-product - Choisir la palette en fonction du produit/industrie (rechercher --domain color)
• effects-match-style - Ombres, flou, rayon adaptés au style choisi (verre / plat / argile, etc.)
• platform-adaptive - Respecter les idiomes de la plateforme (HIG iOS vs Material) : navigation, contrôles, typographie, mouvement
• state-clarity - Rendre les états survolé/enfoncé/désactivé visuellement distincts tout en restant dans le style (couches d'état Material)
• elevation-consistent - Utiliser une échelle d'élévation/ombre cohérente pour les cartes, feuilles, modales ; éviter les valeurs d'ombre aléatoires
• dark-mode-pairing - Concevoir les variantes claire et sombre ensemble pour que la marque, le contraste et le style restent cohérents
• icon-style-consistent - Utiliser un seul ensemble d'icônes/langage visuel (épaisseur de trait, rayon de coin) sur l'ensemble du produit
• system-controls - Préférer les contrôles natifs/système aux contrôles entièrement personnalisés ; ne personnaliser que lorsque l'image de marque l'exige (Apple HIG)
• blur-purpose - Utiliser le flou pour indiquer le rejet de l'arrière-plan (modales, feuilles), pas comme décoration (Apple HIG)
• primary-action - Chaque écran ne doit avoir qu'un seul CTA principal ; les actions secondaires sont visuellement subordonnées (Apple HIG)

5. Mise en page et responsive (ÉLEVÉ)

• viewport-meta - width=device-width initial-scale=1 (ne jamais désactiver le zoom)
• mobile-first - Concevoir d'abord pour le mobile, puis passer à la tablette et au desktop
• breakpoint-consistency - Utiliser des points de rupture systématiques (par exemple 375 / 768 / 1024 / 1440)
• readable-font-size - Texte du corps minimum de 16px sur mobile (évite le zoom automatique iOS)
• line-length-control - Mobile 35–60 caractères par ligne ; desktop 60–75 caractères
• horizontal-scroll - Pas de défilement horizontal sur mobile ; s'assurer que le contenu tient dans la largeur de la fenêtre d'affichage
• spacing-scale - Utiliser un système d'espacement incrémentiel de 4pt/8dp (Material Design)
• touch-density - Maintenir un espacement confortable des composants pour le tactile : ni trop serré, ni source de mauvaises frappes
• container-width - Largeur maximale cohérente sur desktop (max-w-6xl / 7xl)
• z-index-management - Définir une échelle de z-index en couches (par exemple 0 / 10 / 20 / 40 / 100 / 1000)
• fixed-element-offset - La barre de navigation fixe/barre inférieure doit réserver un remplissage sûr pour le contenu sous-jacent
• scroll-behavior - Éviter les zones de défilement imbriquées qui interfèrent avec l'expérience de défilement principale
• viewport-units - Préférer min-h-dvh à 100vh sur mobile
• orientation-support - Garder la mise en page lisible et utilisable en mode paysage
• content-priority - Afficher le contenu principal en premier sur mobile ; plier ou masquer le contenu secondaire
• visual-hierarchy - Établir la hiérarchie via la taille, l'espacement, le contraste — pas seulement la couleur
• compact-label-overflow - Choisir un badge, une étiquette de statut, une puce de filtre ou une valeur supprimable en fonction de sa sémantique ; garder les étiquettes essentielles disponibles et divulguer la troncature inévitable aux utilisateurs de pointeur et de clavier
• chip-collection-reflow - Envelopper la collection avant de réduire les étiquettes ; faire d'un résumé de débordement +n une divulgation utilisable au lieu de masquer les valeurs

6. Typographie et couleur (MOYEN)

• line-height - Utiliser 1.5-1.75 pour le texte du corps
• line-length - Limiter à 65-75 caractères par ligne
• font-pairing - Faire correspondre les personnalités de police de titre/corps
• font-scale - Échelle typographique cohérente (par exemple 12 14 16 18 24 32)
• contrast-readability - Texte plus foncé sur fond clair (par exemple slate-900 sur blanc)
• text-styles-system - Utiliser le système de type de la plateforme : styles Dynamic Type iOS 11 / rôles de type Material 5 (affichage, titre, corps, étiquette) (HIG, MD)
• weight-hierarchy - Utiliser le poids de police pour renforcer la hiérarchie : titres en gras (600–700), corps normal (400), étiquettes moyennes (500) (MD)
• color-semantic - Définir des jetons de couleur sémantiques (primaire, secondaire, erreur, surface, sur-surface) pas de hex bruts dans les composants (système de couleurs Material)
• color-dark-mode - Le mode sombre utilise des variantes tonales désaturées / plus claires, pas des couleurs inversées ; tester le contraste séparément (HIG, MD)
• color-accessible-pairs - Les paires avant-plan/arrière-plan doivent respecter 4.5:1 (AA) ou 7:1 (AAA) ; utiliser des outils pour vérifier (WCAG, MD)
• color-not-decorative-only - La couleur fonctionnelle (rouge d'erreur, vert de succès) doit inclure une icône/du texte ; éviter la signification uniquement par la couleur (HIG, MD)
• truncation-strategy - Préférer le retour à la ligne à la troncature ; lors de la troncature, utiliser des points de suspension et fournir le texte complet via une infobulle/un développement (Apple HIG)
• letter-spacing - Respecter l'interlettrage par défaut de la plateforme ; éviter le crénage serré sur le texte du corps (HIG, MD)
• number-tabular - Utiliser des chiffres tabulaires/monochasses pour les colonnes de données, les prix et autres éléments numériques à aligner verticalement

7. Animation (MOYEN)

• motion-purpose - Le mouvement doit avoir un but : feedback, orientation, narration, concentration — pas de décoration (HIG, MD)
• duration-context - Durées courtes pour les petits éléments (100-200ms), plus longues pour les transitions d'écran (300-500ms) (HIG, MD)
• easing-consistent - Utiliser une courbe easing cohérente pour les entrées/sorties : standard (Material), ease-in-out (iOS) ; ajouter de la personnalité avec easing personnalisé uniquement si le design l'exige
• spatial-continuity - Les animations doivent maintenir la continuité spatiale : l'élément A se transforme en élément B sans sauts de position (Shared Element Transition) (HIG, MD)
• no-animate-large-properties - Éviter d'animer hauteur/largeur ; utiliser transforms (scale, translateX/Y, opacity) pour des animations 60fps (MD)
• reduced-motion-respect - Désactiver tout mouvement non essentiel lorsque prefers-reduced-motion est actif (HIG, MD)
• motion conveys a message - Le mouvement doit clarifier les relations et les changements d'état, pas distraire (HIG, MD)
• loading-animation-guidelines - Afficher la progression / feedback dans les 100ms ; utiliser des squelettes pour >300ms ; afficher un spinner pour les opérations plus longues (HIG)
• animations-interruptible - Les animations doivent être interruptibles ; ne pas bloquer l'interaction utilisateur avec des animations longues (HIG)
• scroll-triggered - Utiliser des animations déclenchées par le défilement avec parcimonie et only pour les changements de contenu significatifs ; ne pas bloquer le défilement (HIG)
• stagger-overlap - Utiliser des entrées échelonnées pour les listes et les grilles ; superposer les animations entrantes et sortantes pour une transition plus fluide
• gesture-animation - Les animations pilotées par le geste doivent suivre l'entrée directement, avec rabattement à la fin (physique du défilement natif) (HIG)
• micro-interaction - Animer le feedback des boutons, les commutations d'état, les activations
• accordion-animation - Animer la hauteur maximale pour les accordéons et les sections extensibles ; ne pas animer chaque élément
• GSAP-presets-availability - Des préréglages GSAP sont disponibles pour des animations d'entrée/sortie courantes (--domain animation)

8. Formulaires et commentaires (MOYEN)

• label-visible - Chaque champ doit avoir une étiquette visible en tout temps
• label-floating - Les étiquettes flottantes sont acceptables si elles restent visibles lors de la saisie
• error-placement - Afficher l'erreur à côté du champ, pas seulement en haut du formulaire
• helper-text - Fournir un texte d'aide qui explique le format attendu
• progressive-disclosure - Révéler les champs supplémentaires uniquement si nécessaire ; ne pas surcharger d'entrée
• input-focus-state - Le champ de saisie ciblé doit avoir un indicateur visuel clair (contour, surbrillance)
• prefill-where-possible - Préremplir les informations connues (adresse de livraison à partir du profil)
• autocomplete-attribute - Utiliser l'attribut autocomplete pour les champs courants (email, mot de passe, adresse)
• validation-timing - Valider lors du blur ou de l'envoi, pas lors de chaque frappe (sauf pour les indicateurs de mot de passe ou de comptage de caractères)
• input-masks - Utiliser des masques de saisie (format de date, téléphone, carte de crédit) pour guider la saisie
• character-count - Afficher le comptage de caractères lorsque des limites s'appliquent
• accessibility-invalid - Ajouter aria-invalid="true" aux champs en erreur
• success-confirmation - Confirmer les actions réussies (envoi réussi, enregistrement réussi)
• undo-action - Permettre l'annulation après des actions destructrices (suppression, modification de paramètres)
• destructive-action - Marquer les actions destructrices en rouge, toujours demander une double confirmation
• index card simplification - Si vous créez une vue de carte d'index et que le nombre de cartes dépasse 25, simplifiez l'affichage des cartes en déléguant la mise en évidence des champs aux champs les plus importants (informations de carte, suite) et en les réduisant après 3 champs ; n'utilisez que l'extension pour voir les valeurs de carte en mode édition ; n'utilisez que l'extension de saisie

9. Modèles de navigation (ÉLEVÉ)

• predictable-back - Le geste/bouton retour ramène à l'écran précédent ; pas de piège de navigation
• depth-over-width - Préférer la hiérarchie imbriquée aux écrans tabulaires plats ; les gens peuvent gérer ~3 niveaux de profondeur
• tab-bar-constraints - Utiliser au maximum 5 éléments dans la barre d'onglets (MD guide ; iOS gère 5 mais les étiquettes peuvent se chevaucher dans certaines langues)
• segment-control-status - Le contrôle segmenté (iOS) ou les onglets (MD) fonctionnent mieux pour 2 à 5 sections de contenu liées et de même importance
• back-mechanism - Le geste retour natif Android (bouton système) et le geste retour par balayage iOS doivent fonctionner depuis n'importe quel écran de l'application (HIG, MD)
• deep-linking-support - Chaque écran de contenu doit être accessible directement via un lien profond/URL (HIG)
• loading-state-back - Afficher les états de chargement (squelette) lors de la navigation vers un écran de contenu pour fournir un feedback immédiat (HIG)
• up-button-clarification - Sur les applications de type desktop, un état d'interface 'précédent/supérieur' peut émettre une remontée dans la hiérarchie au lieu d'un retour ; regarder le contenu pour décider
• back-to-search-results - Après avoir consulté un élément de détails, la navigation 'retour' doit ramener à la position dans la liste des résultats de recherche plutôt qu'au début
• navigation-transition - Fournir des transitions cohérentes (poussée pour la navigation hiérarchique, fondu pour les modales, coulissement depuis le bas pour les feuilles d'action)
• scroll-to-refresh - Si le rafraîchissement par défilement existe, fournir un indicateur visuel et un état de chargement
• refresh-content-action - Si un rafraîchissement par défilement n'est pas disponible, fournir un bouton de rafraîchissement manuel dans la barre de navigation

10. Graphiques et données (FAIBLE)

• chart-type-match - Utiliser le type de graphique approprié pour les données : barres pour les comparaisons, lignes pour les tendances, secteurs pour les proportions (25 types consultables avec --domain chart)
• chart-accessibility - Fournir des légendes, des étiquettes d'axe, des valeurs de données (soit directement sur le graphique, soit via une infobulle)
• chart-color-accessible - Utiliser des palettes accessibles aux daltoniens ; éviter de coder les catégories uniquement par la couleur
• chart-tooltip - Les infobulles doivent afficher la valeur exacte sur survol/tap
• chart-animation - Les graphiques peuvent utiliser GSAP pour des entrées animées ; garder la durée sous 500ms
• chart-responsive - Les graphiques doivent se redimensionner avec le conteneur ; utiliser un canevas ou SVG
• chart-empty - Afficher un état vide lorsqu'il n'y a pas de données (sans zéro ou ligne cassée)
• chart-loading - Afficher un squelette ou un spinner pendant le chargement des données du graphique
• chart-large - Regrouper efficacement les grands ensembles de données ; proposer un zoom
• chart-proportion - Pour les proportions, utiliser des graphiques en secteurs ou en anneaux jusqu'à 5 catégories ; utiliser des barres empilées au-delà
• chart-time - Utiliser des échelles de temps cohérentes ; éviter les points de données inégaux dans le temps
• chart-trend - Les graphiques de tendance doivent montrer le temps en axe X ; utiliser des courbes lissées avec parcimonie
• chart-comparison - Utiliser des graphiques à barres pour les comparaisons ; limiter à 10 barres par groupe
• chart-annotations - Ajouter des annotations contextuelles pour des points de données importants (maximum, minimum, seuils)
• chart-unit - Toujours afficher l'unité sur l'axe Y ou dans l'en-tête du graphique

Règles par stack

Les règles spécifiques à la stack sont disponibles via --domain stack:<nom>. Stacks actuellement suivies :

• stack:react - Règles React/Hooks/Composants
• stack:nextjs - Règles Next.js App Router/Pages
• stack:vue - Règles Vue 3/Composition API
• stack:reactnative - Règles React Native/Expo
• stack:tailwind - Règles Tailwind CSS
• stack:figma - Règles de conception Figma
• stack:gsap - Règles de mouvement GSAP
• stack:chartjs - Règles Chart.js/Config de données
• stack:recharts - Règles Recharts/Composants
• stack:d3 - Règles D3.js/Échelle
• stack:three - Règles Three.js/trois
• stack:remotion - Règles Remotion/Composition
• stack:ios - Règles iOS/SwiftUI
• stack:android - Règles Android/Jetpack Compose
• stack:web - Règles Web génériques (HTML/CSS/JS)
• stack:desktop - Règles Desktop (Electron/Tauri)
• stack:landing - Règles de page d'atterrissage
• stack:admin - Règles de tableau de bord Admin
• stack:saas - Règles SaaS/Abonnement
• stack:mobile - Règles Mobile génériques
• stack:ecommerce - Règles E-commerce
• stack:marketing - Règles Site marketing

Palettes de produits

Les palettes sont disponibles via --domain product. Exemples de palettes : e-commerce, SaaS, application mobile, landing page, tableau de bord, finance, santé, éducation, jeux, médias sociaux, productivité, design, marque et entreprise.

Icônes

Les icônes sont disponibles via --domain icon. Bibliothèques d'icônes suivies : Heroicons, Lucide, Phosphor, Radix UI, Feather, Material Design Icons, Font Awesome, Bootstrap Icons, Tabler, SVG Repo, Streamline, Majesticons, System UIcons et Icônes Emoji.

Polices

Les paires de polices sont disponibles via --domain typography. Combinaisons police de titre/police de corps pour : applications modernes, sites média, sites e-commerce, SaaS, marque de luxe, minimaliste, jeu, fintech, blog contenu, application créative, polices techniques/monospace, polices d'affichage/ornementales, application éducative, polices natives iOS/SF, polices Material/Google, polices système, polices de plateforme.

Graphiques

Les types de graphiques sont disponibles via --domain chart. 25 types : barres, lignes, secteurs, anneau, aires, barres empilées, aires empilées, barres groupées, nuage de points, bulles, radar, polaire, chandelier, chute, chaleur, arbre, hiérarchique, réseau, entonnoir, jauge, boîte à moustaches, histogramme, cascade, sparkline et tableau.

Commandes de requête

Utilisez --domain <domaine> pour consulter les données. Domaines disponibles :

--domain style        Styles de conception (79 consultables)
--domain product      Palettes de produits et profils de raisonnement (192)
--domain typography   Paires de polices (74)
--domain ux           Directives UX (119)
--domain icon         Bibliothèques d'icônes (105)
--domain animation    Préréglages GSAP (17)
--domain chart        Types de graphiques (25)
--domain stack:<nom>  Règles spécifiques à la stack
--domain color        Directives de palette de couleurs

Fichiers de règle

Ce skill lit les fichiers suivants, s'ils existent :

• /.claude/rules/design.system.md - Règles du système de design du projet
• /.claude/rules/design.stack.md - Règles de la stack du projet
• /.claude/rules/product.palette.md - Palette de couleurs spécifique au produit
• /.claude/rules/global.design.md - Règles de design globales du projet

À propos de ce skill

Ce skill est conçu pour aider à la conception et au développement d'interfaces utilisateur. Il inclut des directives pour l'accessibilité, l'interaction tactile, la performance, la sélection de style, la mise en page responsive, la typographie et la couleur, l'animation, les formulaires et les commentaires, les modèles de navigation et les graphiques. Utilisez --domain <domaine> pour consulter les données détaillées dans n'importe quelle catégorie.