kennedys0/taste-style-enterprise

Verwende dieses Skill nur, nachdem ein Benutzer es explizit ausgewählt hat oder eine bestätigte Projektkonfiguration es vorsieht. Verwende bei unerklärten neuen UI-Anfragen einen Stilauswähler wie zum Beispiel style selector, anstatt den Geschmack des Benutzers hier zu bestimmen. Vorhandene Marken-, Barrierefreiheits- und Benutzerüberschreibungen gehen allen folgenden Beispielen vor. Die folgende Stilrichtlinie ist keine Erlaubnis, mit dem UI-Coding zu beginnen, bevor der Stil ausgewählt wurde.

Style-Pack: Enterprise / Daten-zentriert

ID: enterprise
Signatur: Informationsdichte operative Cockpits, tabellarische Datenausrichtung, semantische Status-Tokens, Tastaturproduktivität und zuverlässige Workflow-Architektur.

Dies ist ein Style-Pack, 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 Consumer-Kartenvorlage mit 3 gefälschten KPI-Zahlen und einem dekorativen Kuchendiagramm qualifiziert sich nicht als Enterprise-Daten-zentriert.

Gute Passung / Kompromisse

• Funktioniert gut für: B2B-SaaS-Plattformen, operative Admin-Konsolen, Cloud-Infrastruktur-Monitore, Fintech- und Handelsportale, Logistik- und Lieferketten-Backends sowie datenintensive Produktivitätstools.
• Vorsichtig sein bei: Consumer-Marketing-Landingpages, bei denen narrative Geschwindigkeit und emotionale visuelle Markenbildung Vorrang vor dichter tabellarischer Scannbarkeit haben.
• Referenzrichtungen:
  • Modern Cloud Console (Linear / Stripe / Vercel Stil): Scharfe, schiefergraue Basis (#0F1117 dunkel oder #F9FAFB hell), kompakte 36px Tabellenzeilen, tabellarische Zahlen (font-variant-numeric: tabular-nums), dezente Haarstrich-Trennlinien (#E5E7EB oder #262933) und semantische Status-Tokens.
  • High-Density Operations Desk: Sauberer weißer Schreibtisch mit kompakten 32px Zeilen, Suchfilterleisten mit Tastenkürzeln (⌘K), fixierten Tabellenköpfen und responsiven Master-Detail-Bereichen.

Enterprise-Datenqualitätstore – obligatorisch

Bevor eine Enterprise-Seite als vollständig bezeichnet wird, muss der angezeigte Viewport sichtbar als funktionales, dichtes und professionelles Daten-Cockpit wirken. Wenn ein Benutzer diesen Stil gewählt hat, ist eine überdimensionierte Consumer-Vorlage mit dekorativen Metrik-Karten und null scanbarer tabellarischer Struktur ein direkter FEHLER.

Eine erfolgreiche Enterprise-Daten-zentrierte Implementierung zeigt alle der folgenden Merkmale:

1. Informationsdichte tabellarische Architektur: Kerndatensätze und -entitäten werden in strukturierten, scanbaren Datentabellen oder kompakten Master-Detail-Listen mit konsistenten Zeilenhöhen (32px–40px) und expliziten Spaltenüberschriften dargestellt.
2. Tabellarische Zahlen & bündige Ausrichtung: Alle Zahlen, Finanzbeträge, Metriken und Zeitstempel erzwingen font-variant-numeric: tabular-nums. Numerische Spalten sind streng rechtsbündig ausgerichtet; Textspalten sind linksbündig ausgerichtet.
3. Semantische Status-Tokens mit lesbarem Kontrast: Statusindikatoren (Healthy, Degraded, Failed, Pending) verwenden kalibrierte semantische Token-Pillen mit dunklem, zugänglichem Text auf weichen, getönten Hintergründen (z. B. Erfolg: #ECFDF5 Hintergrund mit #065F46 Text, erfüllt WCAG AA 4.5:1).
4. Produktivitätsfunktionen & Tastenkürzel: Suchleisten zeigen Tastatur-Trigger-Hinweise (⌘K oder /), Tabellenköpfe zeigen Sortierindikatoren (▲/▼) und Batch-Aktionsleisten erscheinen bei Auswahl von Datensätzen.
5. Wahrheitsgetreue Zustandsvollständigkeit: Tabellen enthalten echte Paginierungsleisten (zeige Zeige 1–25 von 1.420 Elementen), responsives horizontales Scrollen und dedizierte Leer-/Lade-/Fehlerzustände.

Erster-Viewport-Test: Identifiziere in einem Desktop-Screenshot die dichte Datentabelle, sortierbare Köpfe, die Filterleiste und tabellarische Zahlen, ohne den Seitentitel zu lesen. Wenn es wie eine Consumer-Marketingseite mit großen leeren Karten aussieht, baue es als funktionale operative Ansicht neu auf.

Explizite Enterprise-Dichte-Ausnahme – Datentabellen sind erforderlich

Enterprise-spezifische Überschreibung: Der universelle Anti-Slop-Vorbehalt gegen Dashboard-Unordnung oder mehrere Metrik-Boxen DARF NICHT als Anweisung interpretiert werden, Datentabellen, Filter-Symbolleisten oder Statusindikatoren hier zu verstecken. In authentischer Enterprise-Software (Stripe, Datadog, AWS, Bloomberg) ist dichte, scanbare Daten die primäre Interface-Anforderung.

• Erlaubte Enterprise-Behandlungen: Kompakte Datentabellen (32px–40px Zeilen), mehrspaltige Metadatenraster, Filter-Symbolleisten, Suchleisten mit Tastaturkürzel-Abzeichen, Batch-Aktionsleisten und semantische Status-Pillen.
• Anti-Slop-Grenze: Erfinde niemals gefälschte Umsatzmetriken, dekorative Mini-Sparklines ohne Achsenskalierung oder animierte Kuchendiagramme, die null operative Daten vermitteln. Echte Datenfelder, leere Zustände und echte Statusindikatoren sind obligatorisch.
• Anti-Slop-Interpretation: Bewerte Enterprise-Layouts nach Scannbarkeit, Informationsdichte und Aufgabeneffizienz, nicht indem du versuchst, notwendige operative Steuerelemente zu entfernen. Tabellarische Dichte, die Arbeit beschleunigt, ist authentisches Design.

Typografie und Schriftbild

Neutrale, hochgradig lesbare UI-Sans: Inter, Source Sans 3, SF Pro oder System-Sans. Monospace für Identifikatoren und Hashes: JetBrains Mono oder System-Mono. Textkörper & Tabellenzellen: 13–14 px (Zeilenabstand 1.45); Spaltenüberschriften: 12 px Großbuchstaben (Gewicht 600, Laufweite 0.05em); Metriken: 20–28 px mit tabellarischen Zahlen.

Farbrichtung

• Hellmodus (Modern Cloud Console):
  • Canvas Basis: Weicher neutraler Schiefer (#F9FAFB).
  • Oberfläche / Tabelle: Reines Weiß (#FFFFFF).
  • Primäre Tinte / Typografie: Tiefer Schiefer (#111827).
  • Sekundärer / Gedämpfter Text: Ausgeglichener Schiefer (#6B7280).
  • Haarstrich-Ränder: #E5E7EB.
  • Hover-Zeilen-Hervorhebung: #F8FAFC.
• Dunkelmodus (Cloud Cockpit):
  • Canvas Basis: Tiefer Schiefer (#0F1117).
  • Oberfläche / Tabelle: Erhöhte Holzkohle (#161922).
  • Primäre Tinte / Typografie: Scharfer Schiefer (#F9FAFB).
  • Sekundärer / Gedämpfter Text: Ausgeglichenes Grau (#9CA3AF).
  • Haarstrich-Ränder: #232733.
  • Hover-Zeilen-Hervorhebung: #1F2430.
• Primäre Marke: Tiefes Enterprise-Blau (#2563EB hell / #3B82F6 dunkel).
• Semantische Status-Tokens (WCAG AA für beide Modi kalibriert):
  • Erfolg (Healthy): Hell: #065F46 auf #ECFDF5 (Rand #A7F3D0); Dunkel: #34D399 auf rgba(16, 185, 129, 0.15) (Rand rgba(16, 185, 129, 0.35)).
  • Warnung (Degraded): Hell: #92400E auf #FEF3C7 (Rand #FDE68A); Dunkel: #FBBF24 auf rgba(245, 158, 11, 0.15) (Rand rgba(245, 158, 11, 0.35)).
  • Fehler (Failed): Hell: #991B1B auf #FEE2E2 (Rand #FECACA); Dunkel: #F87171 auf rgba(239, 68, 68, 0.15) (Rand rgba(239, 68, 68, 0.35)).
  • Neutral (Pending / Inactive): Hell: #374151 auf #F3F4F6 (Rand #E5E7EB); Dunkel: #9CA3AF auf rgba(156, 163, 175, 0.12) (Rand rgba(156, 163, 175, 0.25)).
• Themenkopplungsregel: Canvas, Tabellen, Texttinte und semantische Badges MÜSSEN sich gemeinsam anpassen. Zeige niemals Dunkelmodus-Text auf hellen Tabellen oder Hellmodus-dunkelgrünen Text auf dunklen Konsolenhintergründen.

Layout und Geometrie

4px Basisrhythmus mit 8/12/16px Dichte-Inkrementen; subtile 4px–6px Eckradien; konsistente Tabellenzeilenhöhen (36px Standard, 32px kompakt). Master-Detail-Layouts teilen sich flexibel auf dem Desktop und stapeln sich sauber auf Mobilgeräten.

Oberflächen, Tiefe, Textur

Oberflächen sind sauber, flach und randgesteuert. Elevationsschatten sind streng für schwimmende Menüs, Tooltips und modale Dialoge reserviert (0 4px 12px rgba(0, 0, 0, 0.08)). Keine dekorativen Glas- oder Clay-Effekte auf Datenrastern.

Komponenten-Anatomie und Interaktion

• Datentabelle: Fixierte Kopfzeile, Zebra- oder Hover-Zeilen-Hervorhebung (#F8FAFC), rechtsbündige numerische Spalten, linksbündiger Text.
• Filter- & Suchleiste: Integrierter Sucheingang mit ⌘K Abzeichen, Multi-Select-Filter-Dropdowns und Datumsbereichsauswahl.
• Semantischer Status-Badge: Kompakte runde Pille mit farbigem Indikator-Punkt und zugänglichem Text.
• Paginierungsfooter: Aktueller Seitenbereich, Auswahl für Elemente pro Seite und Vor-/Zurück-Buttons.

Motion

Minimale 100–140 ms lineare Feedback-Übergänge. Priorisiere stabile, felsenfeste Stabilität und keine Motion während Datenaktualisierungen oder Tabellenfilterung.

Optionales Anime.js v4 Rezept

• Motion-Entscheidung: Subtiles Hervorheben von Zeilenblitzen bei Datenaktualisierung oder Schubladen-Übergangsanimation.
• Startdauer: 120ms (0 = sofort); an Aufgabe und Benutzerpräferenz anpassen.
• Vermeide: dekorative Seitenübergänge, hüpfende Diagramme, sich drehende Ladeanimationen bei schnellen Abfragen.
• Abhängigkeit: CSS/nativ standardmäßig. Folgen Sie der Taste Engine references/motion-engine.md wenn verfügbar; eigenständiges Skill folgt den oben genannten Prinzipien der reduzierten Bewegung und ohne dekorative Schleifen.

UI-Schreiben und Mikrotexte

Objektiv, präzise und prüfungsfreundlich. Beispiele: „1.420 Datensätze gefunden“, „Nach Status filtern“, „CSV exportieren“, „Zuletzt aktualisiert vor 2 Min.“. Vermeide vage, gesprächige KI-Slogans.

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

Token	Hellmodus Standard	Dunkelmodus Standard
--taste-ent-bg	#f9fafb	#0f1117
--taste-ent-surface	#ffffff	#161922
--taste-ent-ink	#111827	#f9fafb
--taste-ent-muted	#6b7280	#9ca3af
--taste-ent-border	1px solid #e5e7eb	1px solid #232733
--taste-ent-radius	6px	6px
--taste-ent-row-height	36px	36px
--taste-ent-accent	#2563eb	#3b82f6
--taste-ent-font-body	Inter, -apple-system, system-ui, sans-serif	Inter, -apple-system, system-ui, sans-serif
--taste-ent-motion-duration	100ms	100ms

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

Hero-Komposition (voller erster Viewport)

Wenn ein öffentlichkeitsgerichtetes Portfolio/Landing/Homepage einen Hero hat: Verwende eine einbildschirmgroße Kopf+Hero-Komposition. Basishöhe auf min-height: 100svh mit 100vh Fallback, subtrahiere den echten Kopf nur, wenn er im normalen Fluss ist; lasse den Hero für Barrierefreiheit und kurze mobile Bildschirme wachsen. Wende dies nicht auf private Dashboards oder andere Aufgabenbildschirme an; direkte Benutzerüberschreibungen gewinnen. Stilspezifische Richtung: Verankere die geöffnete Ansicht mit einer funktionierenden Cockpit-Zusammenfassung: wichtigste Filterleiste, Live-Datenübersicht und eine sofortige operative Aktion. Vermeide Consumer-Kartenaufblähung und leere Lücken. Siehe den Router references/hero-layout.md falls vorhanden. Eigenständige Verwendung folgt denselben responsiven und Anti-Slop-Prinzipien.

Stilspezifisches Qualitätstor

• Tun: Überprüfe tabellarische Zahlen (tabular-nums) und rechtsbündige Ausrichtung bei numerischen Daten; stelle sicher, dass semantische Badges WCAG-AA-Kontrast in Hell- und Dunkelmodi erfüllen; biete vollständige Paginierung und Suchfilterleisten; teste fixierte Tabellenköpfe; überprüfe Dunkel-/Hellmodus-Wechsel, sodass alle Zeilen, Ränder und Texte in synchronisierten Paaren umschalten.
• Nicht tun: Ersetze Datentabellen nicht durch Consumer-Kartenraster; vermeide uns skalierte dekorative Sparklines; erfinde keine gefälschten Metrikzahlen ohne Backend-Gegenstück; vermeide Themenkontrastkollisionen wie dunkelgrünen Text auf dunklen Hintergründen oder dunklen Text auf dunklen Tabellenzeilen.
• Bestätige Desktop- und Mobilkonsistenz; 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 Stile kombiniert werden, benenne explizit den primären Stil und die entlehnten Merkmale.

Universelles Anti-Slop-Tor (in sich geschlossen)

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

Füge keine dekorativen Karte-in-Karte Schichten hinzu: Eine verschachtelte Oberfläche muss eine eindeutige Interaktions- oder Informationsgrenze darstellen. Vermeide automatisch generierte 3-Funktionen-Raster, 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. Bevorzuge Gruppierung mit Typografie, Abständen, Ausrichtung und Trennlinien. Gleiche Elemente benötigen absichtliches visuelles Gleichgewicht.

Anti-Slop-Texten: 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 falsche Dringlichkeit, erfundene Zählungen, vage KI-Hype, unnötige Emojis und unzugängliche Großbuchstaben-Mauern. Passe die Formulierung an diesen Stil und die Sprache des Benutzers an, ohne die Wahrheit zu ändern.

Themen- und Moduskontrastintegrität: Wenn ein Benutzer den Dunkel- oder Hellmodus anfordert (oder einen Themenumschalter baut), MÜSSEN Hintergrund- und Vordergrundfarben in synchronisierten Paaren über alle Oberflächen, Texte, Ränder, Eingaben und semantischen Badges hinweg umschalten. Lasse niemals schwarzen Text auf dunklem Hintergrund, weißen Text auf weißem Hintergrund oder unlesbare kontrastarme Status-Pillen. Alle Zustände müssen WCAG-AA-Kontrast erfüllen (mindestens 4.5:1 für Textkörper/normalen Text, 3:1 für große Überschriften und interaktive Grenzen).

Responsive und Motion: Gestalte mobile bewusst, überprüfe lange Labels, Fokus-Zustände und zugänglichen Kontrast; kein Text-Clipping, um ein trendiges Layout zu passen. Statisch standardmäßig; verwende Motion für sinnvolle Interaktionen, respektiere reduced-motion-Präferenzen, vermeide Bounce/Floating/Pulsing-Dekoration ohne einen echten Zustand.

Kritische/Hohe Befunde Blockabschluss: Erfundene Status/Daten, kaputte Aktionen, unzugängliche/beschränkte Steuerelemente, irreführende Texte, Themenkontrastkollisionen oder signifikantes Mobilversagen 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 Benutzbarkeitsprüfungen bestehen. Tue nicht ...

[... abgeschnitten für Übersetzung ...]