kennedys0/taste-style-retro-terminal

Verwende dieses Skill nur, nachdem ein Benutzer es explizit ausgewählt oder eine bestätigte Projektkonfiguration es festgelegt hat. Für unerklärte neue UI-Anfragen verwende stattdessen einen Stilselektor, anstatt hier den Geschmack des Benutzers zu entscheiden. Bestehende Marken-, Barrierefreiheits- und Benutzerüberschreibungen haben Vorrang vor allen untenstehenden Beispielen. Die folgende Stilrichtlinie ist keine Erlaubnis, mit dem UI-Coding zu beginnen, bevor der Stil ausgewählt wurde.

Stilpaket: Retro Terminal

ID: retro-terminal
Signatur: Authentische visuelle Sprache einer CRT-Entwicklerkonsole, Phosphor-Leuchten, monospace-tabellarische Struktur und moderne tastaturgesteuerte Bedienung.

Dies ist ein Stilpaket, kein verbindlicher Standard. Lade es nur nach expliziter Auswahl oder bestätigtem, anwendbarem Projektstil. Projektanweisungen können einzelne Entscheidungen überschreiben. Bewahre Barrierefreiheit, Nutzbarkeit und Markenvorgaben. Schriftarten sind Vorschläge, keine erforderlichen Abhängigkeiten. Eine schwarze Seite mit unformatiertem grünem Text qualifiziert sich nicht als Retro Terminal.

Geeignete Einsatzbereiche / Abwägungen

• Geeignet für: Entwickler-Portfolios, CLI-Cloud-Dashboards, Cybersicherheits- und DevOps-Tools, Systemüberwachungskonsolen und kreative Coding-Erfahrungen.
• Vorsicht geboten bei: Nicht-technischen Verbraucherzielgruppen, denen strenge monospace-Datenlayouts oder Terminal-Metaphern möglicherweise nicht vertraut sind.
• Referenzrichtungen:
  • Klassische Bernstein-CRT: Obsidianschwarzer Hintergrund (#0C0D0E) mit warmem Phosphor-Bernstein (#FFB000), subtilen Raster-Scanlines und hochkontrastreichen Cremelabels.
  • Phosphor-Matrix-Grün: Tiefe Graphitleinwand (#0A0F0D) mit elektrischem Phosphorgrün (#33FF33), eckigen Fenstertiteln und klaren Log-Strömen.
  • Cyberdeck-Cyan: High-Tech-Terminal mit leuchtendem Cyan (#00F0FF), scharfen Boxdrawing-Rahmen (┌─┐) und Tastaturkürzel-Tags ([ESC]).

Retro-Terminal-Fidelity-Tor – verpflichtend

Bevor eine Retro-Terminal-Seite als vollständig betrachtet wird, muss der erste Viewport sichtbar wie eine echte, funktionierende Terminalkonsole oder ein Kommandodeck lesen. Wenn ein Benutzer diesen Stil gewählt hat, ist eine gewöhnliche dunkle Website mit Monospace-Schrift ein FEHLER, selbst wenn die CSS-Klassen terminal enthalten.

Eine erfolgreiche Retro-Terminal-Implementierung zeigt alle der Folgenden:

1. Phosphor-Leuchten & hochkontrastreiche Leuchtkraft: Text und aktive Indikatoren zeigen subtile Phosphor-Strahlung (text-shadow: 0 0 6px currentColor), wobei die primäre Ausgabe den WCAG-AA-Kontrast gegen Obsidian-Hintergründe besteht.
2. Subtiler CRT-Scanline-Overlay: Oberflächen weisen ein kontrolliertes, statisches horizontales Scanline-Muster auf (repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, transparent 2px)), das echte Anzeigetiefe hinzufügt, ohne die Lesbarkeit der Zeichen zu beeinträchtigen.
3. Strukturierte ASCII-/Klammer-Layout-Rahmung: Fensterkopfzeilen, Panelrahmen und Statusleisten verwenden präzise 1px-Regeln, ASCII-Box-Zeichen (┌─┐) oder Klammer-Badges ([SYS_OK], [MODE: CLI]).
4. Authentischer Befehls-Prompt & Caret: Schnittstellen zeigen eine aktive Shell-Prompt-Zeile (visitor@terminal:~$) mit einem soliden Block-Caret (█) und einer klaren Befehlsverlauf-Stilgebung.
5. Monospace-Tabellarische Ausrichtung: Der Inhalt richtet sich streng nach monospace-Zeichenspalten für Zeitstempel, Statuscodes, Prozess-IDs und Datenablesungen.

Erster Viewport-Test: Identifiziere in einem Desktop-Screenshot den Terminal-Prompt, den Phosphor-Leuchten, den Scanline-Raster und die eckigen Konsolenrahmen, ohne den Seitentitel zu lesen. Wenn es wie ein generischer dunkler Blog aussieht, füge den Scanline-Overlay und die Terminal-Prompt-Struktur hinzu.

Ausdrückliche Retro-Terminal-Scanline-Ausnahme – Phosphor-Leuchten sind erlaubt

Retro-Terminal-spezifische Überschreibung: Die universelle Anti-Slop-Warnung vor dekorativen Overlays oder Bildschirmtexturen DARF NICHT als Verbot von subtilen Scanlines, Phosphor-Leuchten oder Shell-Prompt-Zeilen hier interpretiert werden. Diese sind materialermöglichende Eigenschaften, wesentlich für die CRT-Konsolen-Ästhetik.

• Erlaubte Materialbehandlungen: Monospace-Boxdrawing-Rahmen, Phosphor-Textleuchten (0 0 6px), statische Scanline-Raster-Overlays, eckige Status-Pills und blinkende/solide Block-Carets.
• Anti-Slop-Grenze: Jede Befehlszeile oder Aktion muss nutzbar sein. Überschwemme Bildschirme nicht mit unlesbaren fallenden Matrix-Zeichen, vorgetäuschten Terminal-Boot-Fehlern oder statischen dekorativen Code-Schnipseln, die sich als funktionale UI tarnen.
• Anti-Slop-Interpretation: Bewerte Terminal-Elemente nach Befehls-Klarheit, Lesbarkeit und Entwicklerproduktivität, nicht nach dem Verbot von Monospace-Rahmen. Das Entfernen von Scanlines und Prompt-Zeilen, um eine generische flache Heuristik zu erfüllen, ist eine Design-Regression.

Typografie und Schreibmaschinen-Stil

Hochlesbare Monospace: JetBrains Mono, IBM Plex Mono, Fira Code oder systemeigene Monospace (ui-monospace, monospace). Primärer Fließtext: 14–15 px; Überschriften: 20–32 px mit fettem Gewicht (700) und großgeschriebener Klammer-Stilgebung (### [SYSTEM_ÜBERBLICK]). Halte strenge Zeichenraster-Ausrichtung ein.

Farbrichtung

• Dunkelmodus (Obsidian-CRT-Phosphor):
  • Leinwandbasis: Obsidianschwarz (#0C0D0E oder #080A08).
  • Oberflächenpanels: Tiefes Schieferkohle (#14171A oder #111613).
  • Phosphor-Akzent (Wähle Einen):
    • Klassisches Bernstein: #FFB000 (Glühen: rgba(255, 176, 0, 0.45))
    • Phosphor-Grün: #33FF33 (Glühen: rgba(51, 255, 51, 0.45))
    • Cyber-Cyan: #00F0FF (Glühen: rgba(0, 240, 255, 0.45))
  • Rahmen: 1px solid rgba(255, 176, 0, 0.25) oder #2A2F35.
  • Scanlines: Transparente dunkle Rasterlinien (repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px)).
• Hellmodus (Vintage-Pergament-Fernschreiber):
  • Leinwandbasis: Warmes Papier-Elfenbein (#F4F1EA).
  • Oberflächenpanels: Warmes Haferflocken (#E8E4DA).
  • Phosphor-Inversion (Wähle Einen):
    • Dunkles Verbranntes Bernstein: #5C3A00
    • Tiefes Terminal-Grün: #0F4D19
    • Carbon-Tinte: #111613
  • Rahmen: 1px solid #D5D0C3.
  • Scanlines: Dezent oder ausgeschaltet (none oder subtile Papierstruktur).
• Semantische Status: Fehler Rot (#FF5555 dunkel / #B91C1C hell), Warnung Gelb (#FFCC00 dunkel / #B45309 hell), Erfolg Mint (#50FA7B hell / #047857 hell).
• Theme-Kopplung & Anti-Kollisionsregel: Im Hellmodus MÜSSEN helle Phosphor-Akzente zu hochkontrastreicher Carbon-/Dunkelbernstein-Tinte invertiert werden (#111613 oder #5C3A00). Helles Bernstein #FFB000 oder Neon-Grün #33FF33 auf heller Papierleinwand ist eine sofortige Kontrastkollision und strengstens verboten.

Layout und Geometrie

Ecken sind scharf oder minimal (0px–4px); 1px solide Terminal-Panel-Rahmen; enger vertikaler Rhythmus (4px/8px Monospace-Zeilenraster). Panels modellieren modulare Terminal-Multiplexer (tmux/screen-Stil).

Oberflächen, Tiefe, Textur

• Terminalbildschirm: Tiefschwarzer Hintergrund mit statischem Scanline-Raster-Overlay.
• Konsolenpanel: 1px durchgehender Rand (1px solid rgba(255, 176, 0, 0.3) oder #2A2F35) mit subtilem inneren Schatten.
• Aktiver Cursor: Block-Caret mit 1s Puls oder solidem aktiven Zustand.

Komponenten-Anatomie und Interaktion

• Befehlszeilen-Prompt: user@system:~$ command --flag mit funktionaler Eingabe und klaren Rückgabewerten.
• Terminal-Button / Aktion: Eckiger Klammer-Button ([ AUSFÜHREN ] oder [ ABBRECHEN ]) mit hover-Farbinversion (background: currentColor; color: #000;).
• Daten-Log-Stream: Tabellarische Zeilen mit Zeitstempel, Log-Level-Tag und Nachricht.
• Tastaturkürzel: Eckige Tastenindikatoren ([⌘+K], [ENTER]) mit klaren Klick-Fallbacks.

Bewegung

Standardmäßig sofortige Zustandsänderungen (0–80 ms). Optionaler überspringbarer Schreibmaschinen-Effekt für Hero-Intros nur. prefers-reduced-motion sofort respektieren.

Optionales Anime.js v4 Rezept

• Bewegungsentscheidung: Monospace-Zeichen-Enthüllung oder Terminal-Scan-Balken-Wischen; Framerate stabil halten.
• Startdauer: 100ms pro Token-Block (0 = sofort); an Aufgabe und Benutzerpräferenz anpassen.
• Vermeiden: Bildschirmzittern, künstliche Verzerrungswellen, dauerhafte Blink-Schleifen.
• Abhängigkeit: Standardmäßig CSS/nativ. Anime.js v4 nur verwenden, wenn die angeforderte Interaktion es rechtfertigt. Wenn verfügbar, den Taste-Engine references/motion-engine.md folgen; eigenständiges Skill folgt den oben genannten Prinzipien zur reduzierten Bewegung und keinen dekorativen Schleifen.

UI-Text und Mikrokopien

Präzise, technisch und befehlsgesteuert. Beispiele: deploy --prod, status: healthy, 4 Prozesse laufen. Vermeide herablassendes Marketing-Gerede.

Starter-Tokens (Vorschläge, kein vollständiges Theme)

Token	Dunkelmodus-Standard	Hellmodus-Standard
--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

Tokens stellen eine Richtung dar und sind nicht als Copy-Paste für jede Palette/Plattform garantiert. Definiere --taste-term-* auf Projektebene, stelle Farbkontrast sicher und passe über Theme-Tokens an, anstatt Literalwerte zu verstreuen.

Hero-Komposition (erster vollständiger Viewport)

Wenn eine öffentlichkeitswirksame Portfolio-/Landing-/Homepage einen Hero-Bereich hat: Verwende eine einbildschirmgroße Kopfzeilen-Hero-Komposition. Basishöhe auf min-height: 100svh mit 100vh Fallback, abzüglich der tatsächlichen Kopfzeile nur, wenn diese im normalen Fluss ist; lasse den Hero-Bereich für Barrierefreiheit und kleine Mobilbildschirme expandieren. Wende dies nicht auf private Dashboards oder andere Aufgabenbildschirme an; direkte Benutzerüberschreibungen gewinnen. Stilspezifische Richtung: Konstruiere den ersten Viewport als authentische interaktive Konsolensitzung mit Willkommens-ASCII-Banner, Systemstatusübersicht und einer funktionierenden Prompt-Zeile. Simuliere keine fake Matrix-Regen oder unlesbare Glitch-Schleifen. Siehe Router references/hero-layout.md, falls vorhanden. Eigenständige Verwendung folgt denselben responsiven und Anti-Slop-Prinzipien.

Stilspezifisches Qualitätstor

• Tun: Stelle hohen Textkontrast gegen Leinwand sicher (WCAG AA); stelle monospace-Ausrichtung sicher; biete Klick-Fallbacks für alle Tastaturkürzel; teste Scanline-Lesbarkeit; überprüfe Dunkel-/Hellmodus-Umschaltung, sodass Phosphorfarben zu hochkontrastreicher dunkler Tinte auf hellem Grund invertieren.
• Nicht tun: Behandle ein schlichtes dunkles Theme nicht als Retro-Terminal; vermeide unlesbare Glitch-Animationen; präsentiere keine vorgetäuschten nicht-interaktiven Konsolen-Prompts, die Benutzer verwirren; vermeide Hellmodus-Theme-Kollisionen wie Neon-Grün oder helles Bernstein auf Pergament.
• Bestätige Desktop- und Mobil-Konsistenz; sichtbarer Tastaturfokus (:focus-visible); Lade-, Leer-, Deaktiviert-, Fehler- und Erfolgszustände; reduziertes Bewegungsverhalten (prefers-reduced-motion).
• Injiziere keine stilspezifischen Annahmen in nicht verwandte Projekte. Wenn du Stile kombinierst, benenne explizit den primären Stil und die entliehenen Merkmale.

Universelles Anti-Slop-Tor (eigenständig)

Jedes Element muss seinen Platz verdienen. Inhalt vor Dekoration. Dekoriere keine Unsicherheit. Erfinde keine Bilanzen, Metriken, Testimonials, Benutzer, Logos, Genehmigungen, verifizierten/live/online-Status, gefälschte Aktivität oder Erfolgsbestätigungen; verwende stattdessen ehrliche leere/Lade-/Fehlerzustände. Demodaten sind nur akzeptabel, wenn sie angefordert und sichtbar gekennzeichnet sind.

Füge keine dekorativen Karte-in-Karte-Schichten hinzu: Eine verschachtelte Oberfläche muss eine eigene Interaktions- oder Informationsgrenze darstellen. Vermeide automatisch generierte 3-Feature-Grids, 4-Stat-Dashboards, gefälschte Hero-Behauptungen, zwecklose Diagramme, Badge/Chip/Icon-Spam, nicht verwandte dekorative Kunst und zufällige Schleifen nur um den Viewport zu füllen. Gruppiere bevorzugt mit Typografie, Abständen, Ausrichtung und Trennlinien. Gleiche Elemente benötigen absichtliches visuelles Gleichgewicht.

Anti-Slop-Text: Keine generischen "Entfalte dein Potenzial", "Erlebe die Zukunft", "Beschleunige deinen Workflow", "nahtlos"-Behauptungen oder übersetzte Äquivalente. Überschriften müssen tatsächlichen Inhalt kommunizieren, CTAs müssen die Aktion benennen, und Leer-/Fehler-/Erfolgstexte müssen reale Zustände und nächste Schritte beschreiben. Vermeide vorgetäuschte Dringlichkeit, erfundene Zahlen, vage KI-Hype, unnötige Emojis und unzugängliche Großbuchstabenwände. Passe die Formulierung an diesen Stil und die Sprache des Benutzers an, ohne die Wahrheit zu ändern.

Theme- und Modus-Kontrastintegrität: Wenn ein Benutzer den Dunkelmodus oder Hellmodus anfordert (oder einen Theme-Schalter baut), MÜSSEN Hintergrund- und Vordergrundfarben in synchronisierten Paaren über alle Oberflächen, Texte, Rahmen, Eingaben und semantischen Badges hinweg umschalten. Lasse niemals schwarzen Text auf dunklem Hintergrund, weißen Text auf weißem Hintergrund oder unlesbare niedrigkontrastreiche Status-Pills stehen. Alle Zustände müssen den WCAG-AA-Kontrast erfüllen (mindestens 4,5:1 für Fließtext/normalen Text, 3:1 für große Überschriften und interaktive Grenzen).

Responsiv und Bewegung: Gestalte für Mobilgeräte absichtlich, überprüfe lange Labels, Fokus-Zustände und zugänglichen Kontrast; keine Textbeschneidung, um in ein trendiges Layout zu passen. Standardmäßig statisch; verwende Bewegung für sinnvolle Interaktionen, respektiere Präferenzen für reduzierte Bewegung, vermeide Bounce-/Float-/Puls-Dekoration ohne einen echten Zustand.

Blockierung kritischer/hoher Befunde: Erfundener Status/Daten, defekte Aktionen, unzugängliche/beschnittene Steuerelemente, irreführender Text, Theme-Kontrastkollisionen oder erheblicher Mobilgerätefehler müssen behoben werden. Berichte, was tatsächlich verifiziert wurde; behaupte keine Tests, die nicht durchgeführt wurden.

Kein Ästhetik-Veto: Ausdrucksstarke Farben, Schatten, Verläufe, Kartenlayouts oder dekorative Behandlungen sind legitim, wenn sie absichtliche Teile der ausgewählten Ästhetik sind und die Benutzerfreundlichkeitsprüfungen bestehen. Erzwinge nicht stillschweigend Minimalismus.

Anti-Slop: stilspezifisch

Authentische CLI-Umgebung, keine Hacker-Tapete.

• Ablehnen: Generische dunkle Karten, die als Terminal getarnt sind, dekorative nicht-funktionale Konsolen-Prompts, blendende Scanline-Overlays, Neon-Text auf hellem Papierhintergrund und unlesbare Matrix-Regen-Schleifen.
• Stattdessen: Biete echte monospace-Hierarchie, funktionierende Befehlszeilen oder Registerkarten-Ansichten, echte Log-Daten mit Zeitstempeln und klaren semantischen Farben, und respektiere die Benutzerpräferenz für reduzierte Bewegung.