kennedys0/taste-style-skeuomorphism

Utilisez cette compétence uniquement après qu'un utilisateur ait explicitement choisi ou qu'une configuration de projet confirmée la spécifie. Pour les nouvelles demandes d'UI non expliquées, utilisez un sélecteur de style tel que au lieu de décider du goût de l'utilisateur ici. La marque existante, l'accessibilité et les préférences utilisateur prévalent sur tous les exemples ci-dessous. Le guide de style suivant n'est pas une autorisation pour commencer à coder l'UI avant la sélection du style.

Pack de style : Skeuomorphisme

ID : skeuomorphism
Signature : Les contrôles numériques empruntent des affordances tangibles aux objets physiques, aux machines industrielles et au matériel analogique.

Ceci est un pack de style, pas une valeur par défaut obligatoire. Chargez-le uniquement après une sélection explicite ou un style de projet applicable confirmé. Les instructions du projet peuvent remplacer les choix individuels. Préservez l'accessibilité, l'utilité et les contraintes de marque. Les polices sont des suggestions, pas des dépendances requises. Une carte plate avec un dégradé subtil ne correspond pas au Skeuomorphisme.

Bonnes utilisations / compromis

• Fonctionne bien pour : Logiciels de production musicale et de synthétiseurs, outils de matériel audio, simulateurs spécialisés, widgets de tableau de bord tactiles, instruments numériques créatifs et expériences tactiles ludiques.
• Attention avec : Tableaux de données transactionnelles denses ou formulaires mobiles d'entreprise où les textures de matériel physique ornées créent un encombrement visuel.
• Directions de référence :
  • Aluminium industriel brossé / matériel de studio : Châssis en argent ou métal gris usiné avec reflets métalliques radiaux, molettes moletées, puits d'indicateur encastrés et interrupteurs à bascule mécaniques nets.
  • Instrument de précision mat : Base composite en graphite profond / mat avec typographie blanche gravée, indicateurs de statut LED en forme de bijou et interrupteurs à bascule physiques.

Porte de fidélité matérielle skeuomorphique — obligatoire

Avant de déclarer une page skeuomorphique terminée, le viewport d'ouverture doit se lire visiblement comme un instrument physique et tactile ou une interface matérielle. Si un utilisateur a choisi ce style, une carte plate avec des coins arrondis standard et un seul dégradé est un ÉCHEC, même si les classes CSS contiennent skeuo.

Une implémentation skeuomorphique réussie démontre tous les éléments suivants :

1. Direction du modèle de lumière et reflets spéculaires : Les surfaces adhèrent à une source de lumière unique et cohérente (généralement du haut vers le bas) : les bords supérieurs capturent un reflet spéculaire net de 1px (box-shadow : inset 0 1px 0 rgba(255, 255, 255, 0.35)), tandis que les bords inférieurs projettent des ombres portées physiques.
2. Surfaces réfléchissantes multi-arrêts : Les boutons, les faces avant et les interrupteurs à bascule utilisent des dégradés linéaires ou radiaux multi-arrêts simulant l'aluminium brossé, le plastique mat ou le métal anodisé. Les remplissages unis de couleur unique sont un échec.
3. Polarité gravée ou encastrée : Les affichages de texte, les curseurs et les puits de mesure sont visuellement enfoncés dans le châssis à l'aide d'ombres intérieures profondes (box-shadow : inset 0 2px 5px rgba(0, 0, 0, 0.6)), distinguant clairement les contrôles mobiles des conteneurs qui les abritent.
4. Course mécanique à l'interaction : Les boutons s'enfoncent physiquement dans le châssis au clic (transform : translateY(1.5px); box-shadow : inset 0 2px 4px rgba(0, 0, 0, 0.7);), imitant les mécanismes d'interrupteur à ressort réels.
5. Affordances analogiques lisibles : Les cadrans et curseurs physiques incluent des lectures numériques claires ou des repères de graduation numérotés, garantissant l'accessibilité au clavier et la saisie exacte des données.

Test du premier viewport : Dans une capture d'écran de bureau, identifiez le châssis physique, les reflets de biseau spéculaires, les puits encastrés et les commandes matérielles tactiles sans lire le titre de la page. Si cela semble purement numérique et plat, renforcez les reflets du dégradé et les reflets du biseau.

Exception explicite de matériel skeuomorphique — les reflets matériels sont autorisés

Remplacement spécifique au skeuomorphisme : La mise en garde universelle anti-décoration contre les dégradés, textures ou ombres décoratifs NE DOIT PAS être interprétée comme une interdiction des dégradés de matériaux multi-arrêts, des reflets métalliques, des bords biseautés ou du déplacement physique ici. Ce sont des propriétés habilitantes du matériel, essentielles pour communiquer l'affordance mécanique.

• Traitements de matériel autorisés : Dégradés métalliques linéaires/radiaux multi-arrêts, biseaux de reflet de 1px, canaux de puits encaissés, bordures de bouton moletées et voyants LED en forme de bijou.
• Limite anti-décoration : Chaque métaphore mécanique doit correspondre à une action réelle et fonctionnelle. Ne décorez pas les écrans avec de fausses vis, des boutons ornementaux non tournants ou des compteurs statiques affichant des mesures fabriquées.
• Interprétation anti-décoration : Évaluez les détails skeuomorphiques par l'affordance tactile, l'utilité fonctionnelle et la lisibilité, pas en comptant les arrêts de couleur du dégradé. Supprimer les biseaux physiques pour satisfaire une heuristique plate générique est une régression de conception.

Typographie et écriture

Sans technique utilitaire ou police d'affichage monospace : IBM Plex Sans, DIN Next, Roboto Mono, ou sans système. Étiquettes de contrôle : 11–13px en majuscules avec suivi (letter-spacing : 0.08em) ; compteurs d'affichage : mono LCD/LED à contraste élevé (16–24px). Contraste élevé par rapport aux faces avant sombres (au moins 4.5:1).

Direction des couleurs

• Mode sombre (châssis foncé anodisé métallisé gris) :
  • Base du châssis : Dégradé d'ardoise usinée / métal gris anodisé (linear-gradient(180deg, #323741 0%, #262A32 100%)).
  • Reflets de surface : Trait blanc spéculaire (rgba(255, 255, 255, 0.40)).
  • Puits encastrés : Cavité noire profonde (#141619 à #181A1E).
  • Étiquettes de contrôle : Typographie blanche/argentée gravée nette (#F3F4F6).
• Mode clair (châssis aluminium brossé / argent) :
  • Base du châssis : Dégradé aluminium usiné / argent (linear-gradient(180deg, #F5F7FA 0%, #E4E7EB 100%)).
  • Reflets de surface : Trait blanc spéculaire (rgba(255, 255, 255, 0.85)).
  • Puits encastrés : Cavité d'ardoise encaissée douce (#D1D5DB avec ombre intérieure).
  • Étiquettes de contrôle : Encre charbon gravée profonde (#1F2937 ou #111827).
• Accents physiques : Ambre de signal (#FFAE00), vert aviation (#10B981), ou cobalt studio (#2563EB).
• Indicateurs LED : Couleurs de bijou nettes avec une lueur active distincte vs état inactif sombre.
• Règle de couplage de thème et d'anti-collision : En mode châssis skeuomorphique clair, les étiquettes gravées et le texte de contrôle DOIVENT passer au charbon profond (#1F2937). Laisser les étiquettes blanches sur un châssis argent/aluminium brossé produit un texte invisible et est strictement interdit.

Mise en page et géométrie

Les formes des composants correspondent strictement à leurs métaphores physiques : cadrans rotatifs, boutons-poussoirs tactiles, interrupteurs à bascule et compteurs segmentés. Rayons de coin de 4 à 12 px sur les panneaux ; rayons circulaires pour les boutons. Évitez d'appliquer des skins matériels à des paragraphes de texte génériques.

Surfaces, profondeur, texture

• Panneau de châssis : Dégradé linéaire multi-arrêts (linear-gradient(180deg, #323741 0%, #262A32 100%)) avec reflet supérieur de 1 px et ombre portée inférieure.
• Bouton-poussoir physique : Bord biseauté avec reflet supérieur, surface de bouton radiale et enfoncement actif net.
• Puits / écran encaissé : box-shadow : inset 0 2px 6px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.15);

Anatomie et interaction des composants

• Bouton-poussoir tactile : Finition aluminium usiné, étiquette gravée blanche, retour mécanique au relâchement.
• Interrupteur à bascule : Bascule physique à deux états avec ombre portée visible sur le côté actif.
• Écran LCD / lecture de données encaissé : Écran enfoncé avec valeur monospace, grille de trame subtile et contraste élevé.
• Cadran rotatif / curseur : Indicateur de position tactile avec sémantique ARIA slider et prise en charge des touches fléchées du clavier.
• Voyant LED : Petite lentille de bijou circulaire avec une lueur rayonnante lorsqu'elle est active (box-shadow : 0 0 8px currentColor).

Animation

Réponse mécanique de 140 à 200 ms. Enfoncement physique direct de 1 à 2 px au clic. Pas de dépassement rebondissant cartoon ; le mouvement doit sembler pondéré et amorti.

Recette optionnelle Anime.js v4

• Décision de mouvement : Ressort amorti ou dépression mécanique linéaire sur pression ; rotation précise pour les cadrans.
• Durée de départ : 160 ms (0 = immédiat) ; ajustez à la tâche et à la préférence de l'utilisateur.
• Évitez : oscillation perpétuelle, secousses d'aiguille non sollicitées, éléments flottants.
• Dépendance : CSS/natif par défaut. Utilisez Anime.js v4 uniquement si l'interaction demandée le justifie. Suivez references/motion-engine.md du Taste Engine lorsqu'il est disponible ; la compétence autonome suit les principes de mouvement réduit et de boucle non décorative ci-dessus.

Rédaction UI et microcopie

Technique, précise et concise. Exemples : « Master Output », « Bypass », « Channel 01 », « Gain : +3.5 dB ». Évitez le marketing bavard sur les panneaux d'instruments.

Jetons de départ (suggestions, pas un thème complet)

Jeton	Valeur par défaut châssis sombre	Valeur par défaut châssis clair
--taste-skeuo-chassis-bg	linear-gradient(180deg, #323741 0%, #262a32 100%)	linear-gradient(180deg, #f5f7fa 0%, #e4e7eb 100%)
--taste-skeuo-chassis-border	1px solid rgba(0, 0, 0, 0.8)	1px solid rgba(0, 0, 0, 0.15)
--taste-skeuo-chassis-highlight	inset 0 1px 0 rgba(255, 255, 255, 0.25)	inset 0 1px 0 rgba(255, 255, 255, 0.90)
--taste-skeuo-text	#f3f4f6	#1f2937
--taste-skeuo-btn-bg	linear-gradient(180deg, #3c424f 0%, #2a2e37 100%)	linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%)
--taste-skeuo-btn-bevel	inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(0, 0, 0, 0.50)	inset 0 1px 0 rgba(255, 255, 255, 0.80), inset 0 -1px 0 rgba(0, 0, 0, 0.20)
--taste-skeuo-btn-shadow	0 4px 8px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40)	0 4px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08)
--taste-skeuo-well-inset	inset 0 3px 6px rgba(0, 0, 0, 0.70), 0 1px 0 rgba(255, 255, 255, 0.12)	inset 0 3px 6px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.80)
--taste-skeuo-led-active	#10b981	#059669
--taste-skeuo-led-glow	0 0 10px rgba(16, 185, 129, 0.75)	0 0 8px rgba(5, 150, 105, 0.45)
--taste-skeuo-radius-panel	12px	12px
--taste-skeuo-font-mono	IBM Plex Mono, ui-monospace, monospace	IBM Plex Mono, ui-monospace, monospace
--taste-skeuo-motion-duration	160ms	160ms

Les jetons représentent une direction et ne sont pas garantis copier-coller pour chaque palette/plateforme. Définissez --taste-skeuo-* au niveau du projet, assurez le contraste des couleurs et adaptez via des jetons de thème plutôt que de disperser des valeurs littérales.

Composition héro (premier viewport complet)

Lorsqu'un portfolio/landing/page d'accueil public a un héros : utilisez une composition en-tête+héros sur un écran visible. Basez la hauteur sur min-height : 100svh avec un repli 100vh, en soustrayant l'en-tête réel uniquement lorsqu'il est dans le flux normal ; laissez le héros s'étendre pour l'accessibilité et les écrans mobiles courts. Ne l'appliquez pas aux tableaux de bord privés ou autres écrans de tâches ; les préférences directes de l'utilisateur priment. Direction spécifique au style : Traitez le premier viewport comme une console de contrôle maître authentique ou une face avant d'instrument signature ; fournissez des contrôles fonctionnels et un CTA principal sans équivoque. Ne jonchez pas la toile avec des vis non fonctionnelles, des câbles décoratifs ou des compteurs analogiques déconnectés. Voir le routeur references/hero-layout.md lorsqu'il est présent. L'utilisation autonome suit les mêmes principes de réactivité et anti-décoration.

Porte de qualité spécifique au style

• À faire : Vérifiez un reflet spéculaire descendant cohérent sur tous les contrôles ; assurez-vous que les états de pression mécanique s'enfoncent en douceur ; fournissez des lectures numériques à côté des cadrans/curseurs ; testez le focus clavier ; vérifiez la commutation mode sombre/clair afin que le châssis, les reflets de biseau, les puits et la typographie des étiquettes s'adaptent par paires couplées.
• À ne pas faire : Ne traitez pas un thème sombre simple comme skeuomorphique ; n'ajoutez pas de vis décoratives non fonctionnelles ou d'aiguilles analogiques factices qui ne sont pas connectées à des données réelles ; évitez le texte à faible contraste illisible sur les faces avant sombres ou les étiquettes blanches sur les faces avant argentées claires.
• Confirmez la cohérence sur desktop et mobile ; le focus clavier visible (:focus-visible) ; les états de chargement, vide, désactivé, erreur et succès ; le comportement de mouvement réduit (prefers-reduced-motion).
• N'injectez pas d'hypothèses spécifiques au style dans des projets non liés. Lorsque vous combinez des styles, nommez explicitement le style principal et les fonctionnalités empruntées.

Porte anti-décoration universelle (autonome)

Chaque élément doit gagner sa place. Le contenu avant la décoration. Ne décorez pas l'incertitude. N'inventez pas de soldes, métriques, témoignages, utilisateurs, logos, approbations, statut vérifié/en ligne/actif, activité factice ou confirmations de succès ; utilisez des états vides/chargement/erreur honnêtes à la place. Les données de démonstration ne sont acceptables que si demandées et clairement étiquetées.

N'ajoutez pas de couches décoratives carte-dans-carte : une surface imbriquée doit représenter une limite d'interaction ou d'information distincte. Évitez les grilles de 3 fonctionnalités générées automatiquement, les tableaux de bord de 4 statistiques, les affirmations de héros factices, les graphiques sans but, le spam de badges/chips/icônes, les illustrations décoratives non liées et les boucles aléatoires simplement pour remplir le viewport. Préférez le regroupement avec la typographie, l'espacement, l'alignement et les séparateurs. Les pairs égaux ont besoin d'un équilibre visuel intentionnel.

Rédaction anti-décoration : pas de « Libérez votre potentiel », « Vivez le futur », « Dynamisez votre flux de travail », « transparent » génériques ou d'équivalents traduits. Les titres doivent communiquer le contenu réel, les CTA doivent nommer l'action, et les textes vides/erreur/succès doivent décrire les états réels et les prochaines étapes. Évitez l'urgence factice, les comptes inventés, le battage médiatique vague sur l'IA, les emojis gratuits et les murs de majuscules inaccessibles. Adaptez le libellé à ce style et à la langue de l'utilisateur sans changer la vérité.

Intégrité du contraste du thème et du mode : Lorsqu'un utilisateur demande le mode sombre ou le mode clair (ou crée un sélecteur de thème), les couleurs d'arrière-plan et de premier plan DOIVENT changer par paires synchronisées sur toutes les surfaces, le texte, les bordures, les entrées et les badges sémantiques. Ne laissez jamais de texte noir sur fond sombre, de texte blanc sur fond blanc ou des pastilles de statut illisibles à faible contraste. Tous les états doivent atteindre un contraste WCAG AA (minimum 4.5:1 pour le texte normal/corps, 3:1 pour les grands titres et les limites interactives).

Réactif et mouvement : composez le mobile délibérément, vérifiez les longues étiquettes, le focus...