kennedys0/taste-style-retro-terminal

N'utilisez cette compétence qu'après qu'un utilisateur a explicitement choisi le style ou qu'une configuration de projet confirmée le spécifie. Pour les nouvelles demandes UI non expliquées, utilisez un sélecteur de style à la place 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 : Terminal Rétro

ID : retro-terminal
Signature : Langage visuel authentique de console développeur CRT, lueur phosphorescente, structure tabulaire monospace, et utilité moderne orientée clavier.

Ceci est un pack de style, pas un défaut obligatoire. Ne le chargez qu'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 page noire simple avec du texte vert non stylisé ne satisfait pas au Terminal Rétro.

Bonnes correspondances / compromis

• Fonctionne bien pour : Portfolios de développeurs, tableaux de bord CLI dans le cloud, outils de cybersécurité et devops, consoles de surveillance système, et expériences de codage créatives.
• Soyez prudent avec : Les publics consommateurs non techniques qui pourraient trouver les mises en page de données monospace strictes ou les métaphores de terminal peu familières.
• Directions de référence :
  • CRT Ambre Classique : Fond noir obsidienne (#0C0D0E) avec phosphore ambre chaud (#FFB000), lignes de balayage raster subtiles, et étiquettes crème à contraste élevé.
  • Vert Phosphore Matrice : Toile graphite profond (#0A0F0D) avec phosphore vert électrique (#33FF33), titres de fenêtre entre crochets, et flux de logs nets.
  • Cyan Cyberdeck : Terminal haute technologie avec cyan lumineux (#00F0FF), bordures de dessin de boîte nettes (┌─┐), et étiquettes de raccourcis clavier ([ESC]).

Porte de fidélité du terminal rétro — obligatoire

Avant d'appeler une page terminal-rétro terminée, la fenêtre d'affichage d'ouverture doit visiblement se lire comme une vraie console de terminal fonctionnelle ou un poste de commande. Si un utilisateur a choisi ce style, un site web sombre ordinaire avec police monospace est un ÉCHEC, même si les classes CSS contiennent terminal.

Une implémentation terminal-rétro réussie démontre tous les éléments suivants :

1. Lueur Phosphorescente et Luminance à Contraste Élevé : Le texte et les indicateurs actifs présentent une légère radiation phosphorescente (text-shadow: 0 0 6px currentColor), avec la sortie principale passant le contraste WCAG AA sur des fonds obsidienne.
2. Superposition Subtile de Lignes de Balayage CRT : Les surfaces comportent un motif de lignes de balayage horizontales statiques contrôlé (repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, transparent 2px)) qui ajoute une véritable profondeur d'affichage sans nuire à la lisibilité des caractères.
3. Cadrage Structuré ASCII / Entre Crochets : Les en-têtes de fenêtre, les cadres de panneau et les barres d'état utilisent des règles 1px nettes, des caractères de boîte ASCII (┌─┐), ou des badges entre crochets ([SYS_OK], [MODE: CLI]).
4. Invite de Commande Authentique et Curseur : Les interfaces comportent une ligne d'invite de shell active (visitor@terminal:~$) avec un curseur bloc solide (█) et un style d'historique de commandes distinct.
5. Alignement Tabulaire Monospace : Le contenu s'aligne strictement le long des colonnes de caractères monospace pour les horodatages, les codes d'état, les identifiants de processus, et les lectures de données.

Test de la première fenêtre d'affichage : Dans une capture d'écran de bureau, identifiez l'invite du terminal, la lueur phosphorescente, le raster de ligne de balayage et les cadres de console entre crochets sans lire le titre de la page. Si cela ressemble à un blog sombre générique, ajoutez la superposition de lignes de balayage et la structure d'invite de terminal.

Exception explicite de ligne de balayage du terminal rétro — la lueur phosphorescente est autorisée

Remplacement spécifique au terminal rétro : La mise en garde universelle contre le « slop » concernant les superpositions décoratives ou textures d'écran NE DOIT PAS être interprétée comme une interdiction des lignes de balayage subtiles, de la lueur phosphorescente ou des lignes d'invite de shell ici. Ce sont des propriétés habilitantes pour le matériau, essentielles à l'esthétique de la console CRT.

• Traitements matériels autorisés : Bordures de dessin de boîte monospace, lueur de texte phosphorescente (0 0 6px), superpositions de raster de lignes de balayage statiques, pastilles d'état entre crochets et curseurs blocs clignotants/solides.
• Limite anti-slop : Chaque ligne de commande ou action doit être utilisable. N'inondez pas les écrans avec des caractères de matrice tombante illisibles, de fausses erreurs de démarrage de terminal, ou des extraits de code décoratifs statiques se faisant passer pour une UI fonctionnelle.
• Interprétation anti-slop : Évaluez les éléments du terminal en fonction de la clarté de la commande, de la lisibilité et de la productivité du développeur, pas en interdisant les cadres monospace. La suppression des lignes de balayage et des lignes d'invite pour satisfaire une heuristique plate générique est une régression de conception.

Typographie et frappe

Monospace à haute lisibilité : JetBrains Mono, IBM Plex Mono, Fira Code, ou monospace système (ui-monospace, monospace). Corps principal : 14–15 px ; titres : 20–32 px avec poids gras (700) et style entre crochets majuscules (### [SYSTEM_OVERVIEW]). Maintenez un alignement strict de la grille de caractères.

Direction des couleurs

• Mode Sombre (CRT Obsidienne Phosphore) :
  • Base du canevas : Noir obsidienne (#0C0D0E ou #080A08).
  • Panneaux de surface : Ardoise-charbon profond (#14171A ou #111613).
  • Accent Phosphore (Choisissez Un) :
    • Ambre Classique : #FFB000 (lueur : rgba(255, 176, 0, 0.45))
    • Vert Phosphore : #33FF33 (lueur : rgba(51, 255, 51, 0.45))
    • Cyan Cyber : #00F0FF (lueur : rgba(0, 240, 255, 0.45))
  • Bordures : 1px solid rgba(255, 176, 0, 0.25) ou #2A2F35.
  • Lignes de balayage : Lignes raster sombres translucides (repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px)).
• Mode Clair (Télétype Parchemin Vintage) :
  • Base du canevas : Ivoire papier chaud (#F4F1EA).
  • Panneaux de surface : Gruau chaud (#E8E4DA).
  • Inversion Phosphore (Choisissez Un) :
    • Ambre Brûlé Foncé : #5C3A00
    • Vert Terminal Profond : #0F4D19
    • Encre Carbone : #111613
  • Bordures : 1px solid #D5D0C3.
  • Lignes de balayage : Atténuées ou désactivées (none ou texture de papier subtile).
• Statuts Sémantiques : Rouge Erreur (#FF5555 foncé / #B91C1C clair), Jaune Avertissement (#FFCC00 foncé / #B45309 clair), Menthe Succès (#50FA7B foncé / #047857 clair).
• Règle de Couplage de Thème et Anti-Collision : En mode clair, les accents phosphorescents brillants DOIVENT inverser en encre carbone/ambre foncé à contraste élevé (#111613 ou #5C3A00). Mettre de l'ambre brillant #FFB000 ou du vert néon #33FF33 sur un canevas de papier clair est une collision de contraste immédiate et strictement interdite.

Mise en page et géométrie

Les coins sont nets ou minimaux (0px–4px) ; bordures de panneau de terminal pleines 1px ; rythme vertical serré (grille de lignes monospace 4px/8px). Les panneaux modélisent des multiplexeurs de terminaux modulaires (style tmux/screen).

Surfaces, profondeur, texture

• Écran Terminal : Fond noir profond avec superposition de raster de lignes de balayage statiques.
• Panneau Console : Bordure pleine 1px (1px solid rgba(255, 176, 0, 0.3) ou #2A2F35) avec ombre intérieure subtile.
• Curseur Actif : Curseur bloc avec impulsion 1s ou état actif solide.

Anatomie des composants et interaction

• Ligne d'Invite de Commande : user@system:~$ command --flag avec entrée fonctionnelle et résultats de retour clairs.
• Bouton / Action Terminal : Bouton à bordure entre crochets ([ EXECUTE ] ou [ CANCEL ]) avec inversion de couleur au survol (background: currentColor; color: #000;).
• Flux de Logs de Données : Lignes tabulaires avec horodatage, étiquette de niveau de log et message.
• Raccourcis Clavier : Indicateurs de touches entre crochets ([⌘+K], [ENTER]) avec solutions de repli pour le clic de souris explicites.

Mouvement

Changements d'état immédiats par défaut (0–80 ms). Effet de frappe de caractères optionnel sautable pour les intros de héros uniquement. Respectez prefers-reduced-motion immédiatement.

Recette Anime.js v4 Optionnelle

• Décision de mouvement : Dévoilement de la frappe de caractères monospace ou balayage de barre de scan du terminal ; maintenez la fréquence d'images stable.
• Durée de départ : 100ms par bloc de jetons (0 = immédiat) ; ajustez à la tâche et à la préférence de l'utilisateur.
• Évitez : la gigue d'écran, les ondes de distorsion artificielles, les boucles de scintillement perpétuelles.
• 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 Moteur de Goût lorsqu'il est disponible ; la compétence autonome suit les principes de mouvement réduit et d'absence de boucle décorative ci-dessus.

Rédaction UI et microcopie

Précise, technique, et orientée commande. Exemples : deploy --prod, status: healthy, 4 processes running. Évitez le baratin marketing paternaliste.

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

Jeton	Défaut mode sombre	Défaut mode clair
--taste-term-bg	#0c0d0e	#f4f1ea
--taste-term-surface	#14171a	#e8e4da
--taste-term-text	#ffb000	#5c3a00
--taste-term-amber	#ffb000	#5c3a00
--taste-term-glow	0 0 6px rgba(255, 176, 0, 0.45)	none
--taste-term-border	1px solid rgba(255, 176, 0, 0.25)	1px solid #d5d0c3
--taste-term-scanline	repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px)	none
--taste-term-radius	2px	2px
--taste-term-font-mono	JetBrains Mono, IBM Plex Mono, monospace	JetBrains Mono, IBM Plex Mono, monospace
--taste-term-motion-duration	80ms	80ms

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

Composition du héros (première fenêtre d'affichage complète)

Lorsqu'un portfolio/landing page d'accueil public a un héros : utilisez une composition en-tête+héros visible sur un écran. Basez la hauteur sur min-height: 100svh avec une solution de repli 100vh, en soustrayant l'en-tête réel uniquement lorsqu'il est dans le flux normal ; laissez le héros se développer pour l'accessibilité et les écrans mobiles courts. N'appliquez pas ceci aux tableaux de bord privés ou autres écrans de tâche ; les préférences directes de l'utilisateur l'emportent. Direction spécifique au style : Construisez la première fenêtre d'affichage comme une session de console interactive authentique avec une bannière de bienvenue ASCII, un résumé de l'état du système et une ligne d'invite fonctionnelle. Ne simulez pas de fausse pluie matricielle ou de boucles de glitch illisibles. Voir le routeur references/hero-layout.md lorsqu'il est présent. L'utilisation autonome suit les mêmes principes réactifs et anti-slop.

Porte de qualité spécifique au style

• À faire : Vérifiez le contraste élevé du texte sur le canevas (WCAG AA) ; assurez-vous que l'alignement monospace est préservé ; fournissez des solutions de repli au clic pour tous les raccourcis clavier ; testez la lisibilité des lignes de balayage ; vérifiez la commutation mode sombre/clair pour que les couleurs phosphorescentes s'inversent en encre sombre à contraste élevé sur fonds clairs.
• À ne pas faire : Ne traitez pas un thème sombre simple comme terminal-rétro ; évitez les animations glitch illisibles ; ne présentez pas de fausses invites de console non interactives qui confondent les utilisateurs ; évitez les collisions de thème en mode clair comme le texte vert néon ou ambre clair sur parchemin.
• Confirmez la cohérence bureau 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-slop universelle (autonome)

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

N'ajoutez pas de couches décoratives carte-dans-carte : une surface imbriquée doit représenter une frontière d'interaction ou d'information distincte. Évitez les grilles 3 fonctionnalités générées automatiquement, les tableaux de bord 4 statistiques, les fausses revendications de héros, les graphiques inutiles, le spam de badges/chips/icônes, les illustrations décoratives non liées et les boucles aléatoires juste pour remplir la fenêtre d'affichage. 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-slop : pas de « Libérez votre potentiel », « Vivez le futur », « Boostez votre flux de travail », déclarations « transparentes » génériques ou équivalents traduits. Les titres doivent communiquer le contenu réel, les appels à l'action 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 comptages inventés, le vague battage médiatique sur l'IA, les émojis 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 construit un sélecteur de thème), les couleurs d'arrière-plan et de premier plan DOIVENT s'inverser en paires synchronisées sur toutes les surfaces, textes, bordures, entrées et badges sémantiques. Ne laissez jamais de texte noir sur fond sombre, de texte blanc sur fond blanc, ou des pastilles d'état illisibles à faible contraste. Tous les états doivent atteindre le contraste WCAG AA (minimum 4,5:1 pour le texte normal, 3:1 pour les gros titres et les limites interactives).

Responsif et mouvement : composez le mobile délibérément, vérifiez les libellés longs, les états de focus et le contraste accessible ; pas de rognage de texte pour s'adapter à une mise en page tendance. Statique par défaut ; utilisez le mouvement pour des interactions significatives, respectez les préférences de mouvement réduit, évitez les décorations rebond/flottante/pulsante sans état réel.

Bloc d'achèvement des résultats critiques/hauts : les données/statuts fabriqués, les actions cassées, les commandes inaccessibles/coupées, le libellé trompeur, les collisions de contraste de thème ou les échecs mobiles importants doivent être corrigés. Rapportez ce qui a été réellement vérifié ; ne revendiquez pas des tests qui n'ont pas été effectués.

Pas un veto esthétique : les couleurs expressives, les ombres, les dégradés, les mises en page de cartes ou les traitements décoratifs sont légitimes lorsqu'ils sont des parties intentionnelles de l'esthétique choisie et réussissent les contrôles d'utilisabilité. N'imposez pas silencieusement le minimalisme.

Anti-slop : spécifique au style

Environnement CLI authentique, pas du papier peint hacker.

• Rejetez : Cartes sombres génériques déguisées en terminal, invites de console décoratives non fonctionnelles, superpositions de lignes de balayage aveuglantes, texte néon sur fonds de papier clair et boucles de pluie matricielle illisibles.
• Au lieu de cela : Fournissez une hiérarchie monospace réelle, des lignes de commande fonctionnelles ou des données tabulaires lisibles, des actions orientées clavier et un espacement de grille délibéré. Les jeux de caractères unicode dans les interfaces de console sont attendus et bénéfiques.

Utilisation de l'animation de valeurs décimales

Lorsque des valeurs décimales sont nécessaires pour l'animation de propriétés transform ou similaires, préférez les balises <span> dédiées avec affichage en-ligne aux approches basées sur des pseudo-éléments. Les pseudo-éléments peuvent ne pas être directement animables selon le moteur et peuvent entraîner des comportements inattendus.