kennedys0/taste-style-bento

Verwende dieses Skill nur, nachdem ein Benutzer es explizit gewählt hat oder eine bestätigte Projektkonfiguration es vorgibt. Für unerklärte neue UI-Anfragen verwende stattdessen einen Stilauswähler wie <style-selector />, um nicht eigenmächtig den Geschmack des Benutzers zu entscheiden. Bestehende Marken-, Barrierefreiheits- und Benutzeranpassungen haben Vorrang vor allen untenstehenden Beispielen. Die folgende Stilrichtlinie ist keine Erlaubnis, mit der UI-Programmierung vor der Stilauswahl zu beginnen.

Style-Paket: Bento Grid

ID: bento Signatur: Asymmetrische modulare Kartenkomposition mit strenger visueller Gewichtungshierarchie, vielfältigen internen Kachelanatomien und einheitlichem räumlichem Rhythmus.

Dies ist ein Style-Paket, kein verbindlicher Standard. Lade es nur nach expliziter Auswahl oder bestätigtem anwendbarem Projektstil. Projektanweisungen können einzelne Entscheidungen überschreiben. Bewahre Barrierefreiheit, Nutzen und Markeneinschränkungen. Schriftarten sind Vorschläge, keine erforderlichen Abhängigkeiten. Ein einheitliches 3×2-Raster identischer Feature-Karten qualifiziert sich nicht als Bento Grid.

Gute Passung / Kompromisse

• Funktioniert gut für: Produktübersichten, Portfolio-Landingpages, Entwickler-Feature-Entdeckungen, Dashboard-Zusammenfassungen und Hardware/Software-Ökosystem-Präsentationen.
• Vorsicht bei: Hochvolumigen linearen Tabellendaten oder schrittweisen Transaktionsabläufen, bei denen die Rasterasymmetrie von der sequentiellen Fortschrittsanzeige ablenkt.
• Referenzrichtungen:
  • Modernes Mattes Dunkles Bento: Obsidian-Schiefer-Hintergrund (#0B0D10) mit subtil erhöhten Graphitkarten (#15191E), 1px durchscheinenden Rändern (rgba(255, 255, 255, 0.08)) und einer lebhaften Akzentfarbe.
  • Sauberes Architektonisches Helles Bento: Knackiger gebrochener weißer Hintergrund (#F8F9FA) mit reinweißen Porzellanfliesen, feinen Trennlinien (rgba(0, 0, 0, 0.06)) und tiefschwarzer Typografie.

Bento-Grid-Treueprüfung — obligatorisch

Bevor du eine Bento-Grid-Seite als vollständig bezeichnest, muss der anfängliche Viewport visuell als kuratierte, asymmetrische modulare Komposition erkennbar sein. Wenn ein Benutzer diesen Stil gewählt hat, ist ein einheitliches Raster identischer Karten (Icon + Titel + Absatz) ein direkter FEHLER, da es generische Vorlagen-Schluderei darstellt.

Eine erfolgreiche Bento-Grid-Implementierung zeigt alle der folgenden Merkmale:

1. Klar ersichtliches asymmetrisches visuelles Gewicht: Das Raster hat eine deutliche Hierarchie: genau 1 dominierende Hero-Kachel (über 2×2 oder 2×1 Spalten), die die Hauptbotschaft vermittelt, 1–2 mittlere sekundäre Kacheln und 2–3 kompakte tertiäre Kacheln.
2. Vielfältige interne Kachellayouts: Jede Kachel hat ein einzigartiges internes Layout, das auf ihren spezifischen Inhalt zugeschnitten ist. Kachel 1 könnte einen interaktiven Codeblock enthalten; Kachel 2 ein aktives Umschalt-Widget; Kachel 3 eine visuelle Vorschau oder ein Diagramm; Kachel 4 eine Live-Metrik-Anzeige. Sich wiederholende identische Layouts über Kacheln hinweg sind ein Fehler.
3. Einheitlicher räumlicher Rhythmus und Ausrichtung der Abstände: Die Kachelränder sind streng entlang eines konsistenten CSS-Grids (z. B. 3 oder 4 Spalten) mit gleichmäßigen Abständen (16px–24px) und passender Eck-Krümmung (20px–28px) ausgerichtet.
4. Durchdachte mobile Restrukturierung: Auf mobilen Viewports bricht das mehrspaltige Bento in eine logische, inhaltspriorisierte Einzelspalte zusammen, ohne Inhalte abzuschneiden oder unbeholfene horizontale Überläufe zu verursachen.
5. Lesbare interne Hierarchie: Jede Kachel hat eine klare, prägnante Überschrift (18px–24px) und kontrastreichen Inhalt, der Textwände vermeidet, die in kleine Boxen gequetscht werden.

First-Viewport-Test: Identifiziere in einem Desktop-Screenshot die dominierende Hero-Kachel, die unterschiedlichen internen Kacheldarstellungen und die einheitliche Rasterausrichtung, ohne den Seitentitel zu lesen. Wenn alle Kacheln identisch aussehen, gestalte die Rasterhierarchie neu.

Explizite Bento-Layout-Ausnahme — asymmetrische Kacheln sind erwünscht

Bento-spezifische Überschreibung: Die universelle Warnung vor übermäßigen Karten oder Dashboard-Unordnung DARF NICHT als Verbot von Multi-Kachel-Layouts hier interpretiert werden. Ein authentisches Bento-Grid ist grundlegend modular und unterteilt und funktioniert wie eine japanische Bento-Box, in der jedes Fach ein eigenständiges Gericht enthält.

• Erlaubte Layout-Behandlungen: Asymmetrische Rasterspalten-/zeilen-Spannen (grid-column: span 2; grid-row: span 2;), subtile Karten-Hover-Erhöhungen, eingebettete interaktive Mini-Steuerelemente (Umschalter, Code-Tabs) und sanfte Randbeleuchtungen auf aktiven Kacheln.
• Schluderei-Grenze: Keine Karten-in-Karten-Verschachtelung innerhalb einer Bento-Kachel. Eine Kachel ist bereits ein Informationscontainer; verwende typografische Hierarchie, Trennlinien und Abstände für die innere Struktur, anstatt eine weitere Karte darin zu verschachteln.
• Schluderei-Interpretation: Bewerte Bento-Layouts nach Inhaltsvielfalt, Informationsdichte und Lesestruktur, nicht nach der Anzahl der gezählten Karten. Einheitliche Feature-Raster sind Schluderei; kuratierte asymmetrische Bento-Kompositionen sind authentisches Design.

Typografie und Schriftart

Zeitgenössische, verfeinerte serifenlose Schriftarten: DM Sans, Manrope, Inter oder System-Serifenlos. Primäre Hero-Überschriften: 28–44 px (Gewicht 700); Kacheltitel: 18–22 px (Gewicht 600); Fließtext: 14–15 px; Beschriftungen/Tags: 12–13 px. Halte den Fließtext kurz und gut lesbar.

Farbrichtung

• Dunkler Modus (Standard Modern Matt):
  • Hintergrund: Obsidian-Tiefschiefer (#0B0D10).
  • Kachelhintergrund: Erhöhter Schiefer (#15191E).
  • Primäre Typografie: Knackiges Porzellan (#F4F4F6).
  • Sekundärer / Gedämpfter Text: Ausgeglichenes Kaltgrau (#9CA3AF — erfüllt WCAG AA 4,5:1).
  • Feine Rahmenlinie: Durchscheinender weißer Strich (rgba(255, 255, 255, 0.08)).
• Heller Modus (Sauber Architektonisch):
  • Hintergrund: Knackiges gebrochenes Weiß (#F8F9FA).
  • Kachelhintergrund: Reines weißes Porzellan (#FFFFFF).
  • Primäre Typografie: Tiefschwarze Tinte (#111827).
  • Sekundärer / Gedämpfter Text: Schiefergrau (#6B7280 — erfüllt WCAG AA 4,5:1).
  • Feine Rahmenlinie: Durchscheinender dunkler Strich (rgba(0, 0, 0, 0.08)).
• Markenakzent: Hochkontrastige Signaturfarbe (z. B. Elektrisches Violett #8B5CF6, Cyan #06B6D4 oder Smaragd #10B981), die einen Mindestkontrast von 3:1 sowohl gegen dunkle als auch helle Kachelfüllungen erfüllt.
• Theme-Kopplung & Anti-Kollisions-Regel: Hintergrund, Kacheloberflächen, Typografie und Ränder MÜSSEN in synchronisierten Paaren wechseln. Beim Wechsel in den Dunkelmodus muss Text hell werden; beim Wechsel in den Hellmodus muss Text dunkel werden. Erlaube niemals dunklen Text (#111827) auf dunklen Kacheln oder weißen Text (#FFFFFF) auf hellen Kacheln.

Layout und Geometrie

CSS Grid: grid-template-columns: repeat(3, 1fr) oder repeat(4, 1fr); Abstände: 16px–24px. Kachelradien: 20px–28px. Alle Kachelränder müssen bündig entlang horizontaler und vertikaler Rasterspuren ausgerichtet sein.

Oberflächen, Tiefe, Textur

• Bento-Kachel: Fester Hintergrund mit subtilem feinen Strich (1px solid var(--taste-bento-border)) und weichem Umgebungs-Schlagschatten (0 8px 24px rgba(0, 0, 0, 0.12)).
• Hover-Interaktion: Subtile Erhöhung (transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18)).

Komponenten-Anatomie und Interaktion

• Hero-Kachel (2×2 oder 2×1): Primäres Wertversprechen, reichhaltige visuelle oder Live-Code-Vorschau, prominenter CTA.
• Interaktive Aktionskachel: Integrierter Umschalter, Schnellfilter oder kopierbarer Befehlsblock.
• Metrik-/Status-Kachel: Saubere tabellarische Zahl mit konkreter Beschriftung und echten Daten.
• Showcase-Kachel: Hochauflösender Screenshot, Asset-Vorschau oder Architekturdiagramm.

Animation

140–220 ms sanftes Ease-Out. Zurückhaltendes Anheben der Kachel beim Hover. Keine ablenkenden konkurrierenden Animationen über mehrere Kacheln gleichzeitig.

Optionales Anime.js v4 Rezept

• Animationsentscheidung: Gestaffelter subtiler Kacheleintritt oder sanfte Hover-Erhöhung.
• Startdauer: 180 ms (0 = sofort); an die Aufgabe und Benutzerpräferenz anpassen.
• Vermeiden: Kachel-Drehen, unregelmäßige Skalierung, schwebende Schleifen-Ablenkungen.
• Abhängigkeit: Standardmäßig CSS/Native. Verwende Anime.js v4 nur, wenn die angeforderte Interaktion es rechtfertigt. Folge der Taste Engine references/motion-engine.md, wenn verfügbar; das eigenständige Skill folgt den obigen Prinzipien der reduzierten Bewegung und der dekorationslosen Schleifen.

UI-Texte und Mikro-Kopien

Direkt, prägnant und informativ. Beispiele: „Sofortige Bereitstellung“, „Null Konfiguration“, „48 ms Latenz“. Vermeide vage Schlagwörter wie „Next-Gen-Synergie".

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

Token	Standard Dunkelmodus	Standard Hellmodus
--taste-bento-bg	#0b0d10	#f8f9fa
--taste-bento-surface	#15191e	#ffffff
--taste-bento-text	#f4f4f6	#111827
--taste-bento-text-muted	#9ca3af	#6b7280
--taste-bento-border	1px solid rgba(255, 255, 255, 0.08)	1px solid rgba(0, 0, 0, 0.08)
--taste-bento-radius	24px	24px
--taste-bento-gap	20px	20px
--taste-bento-shadow	0 8px 24px rgba(0, 0, 0, 0.25)	0 8px 24px rgba(0, 0, 0, 0.06)
--taste-bento-accent	#8b5cf6	#7c3aed
--taste-bento-font-body	DM Sans, Manrope, system-ui, sans-serif	DM Sans, Manrope, system-ui, sans-serif
--taste-bento-motion-duration	180ms	180ms

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

Hero-Komposition (voller erster Viewport)

Wenn ein öffentlichkeitswirksames Portfolio/Landing/Homepage einen Hero hat: Verwende eine einansichtige Header+Hero-Komposition. Basis-Höhe auf min-height: 100svh mit 100vh Fallback, abzüglich des echten Headers nur, wenn dieser im normalen Fluss ist; lass den Hero für Zugänglichkeit und kurze mobile Bildschirme expandieren. Wende dies nicht auf private Dashboards oder andere Aufgabenbildschirme an; direkte Benutzeranpassungen gewinnen. Stilspezifische Richtung: Gestalte den oberen Bereich als Hero-Bento-Grid, in dem die Hauptproduktgeschichte die primäre 2×2-Kachel einnimmt und stützende Nachweise sie umgeben. Zwinge keine 8 winzigen Karten in den ersten Viewport, nur um die Höhe zu füllen. Siehe Router references/hero-layout.md, wenn vorhanden. Eigenständige Verwendung folgt denselben reaktionsfähigen und anti-schludrigen Prinzipien.

Stilspezifische Qualitätssicherung

• Tun: Stelle sicher, dass die Hero-Kachel klar visuell dominiert; stelle sicher, dass jede Kachel ein eigenständiges internes Layout hat; überprüfe das Zusammenbrechen des Rasters auf Mobilgeräten; halte konsistente Abstände ein; überprüfe den Dunkel-/Hellmodus-Kontrastwechsel: Stelle sicher, dass Hintergrund, Kacheloberflächen, Typografie und Ränder in gekoppelten Paaren wechseln und WCAG AA (mindestens 4,5:1) bestehen.
• Nicht tun: Keine identischen sich wiederholenden 3- oder 4-Kachel-Vorlagen generieren; keine verschachtelten Karten in Kacheln; keine unlesbaren Miniaturdiagramme oder gefälschten Metrik-Beschriftungen; keine Theme-Kollisionen wie dunkler Text auf dunklen Kacheln, weißer Text auf weißen Kacheln oder unsichtbare Ränder zulassen.
• Bestätige Desktop- und Mobilkonsistenz; sichtbaren Tastaturfokus (:focus-visible); Lade-, Leer-, Deaktiviert-, Fehler- und Erfolgszustände; reduziertes Bewegungsverhalten (prefers-reduced-motion).
• Füge keine stilspezifischen Annahmen in unzusammenhängende Projekte ein. Wenn Stile kombiniert werden, nenne explizit den primären Stil und die entliehenen Merkmale.

Universelles Anti-Schluderei-Tor (selbstständig)

Jedes Element muss seinen Platz verdienen. Inhalt vor Dekoration. Dekoriere keine Unsicherheit. Erfinde keine Bilanzen, Metriken, Testimonials, Benutzer, Logos, Genehmigungen, verifizierte/live/online-Status, falsche Aktivitäten oder Erfolgsbestätigungen; verwende stattdessen ehrliche Leer-/Lade-/Fehlerzustände. Demo-Daten sind nur akzeptabel, wenn angefordert und sichtbar gekennzeichnet.

Füge keine dekorativen Karten-in-Karten-Schichten hinzu: Eine verschachtelte Oberfläche muss eine eigene Interaktions- oder Informationsgrenze darstellen. Vermeide automatisch generierte 3-Funktionen-Raster, 4-Stat-Dashboards, gefälschte Hero-Behauptungen, zwecklose Diagramme, Badge/Chip/Icon-Spam, unzusammenhängende 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 bewusste visuelle Balance.

Anti-Schluderei-Textverfassung: Kein generisches „Entfalte dein Potenzial“, „Erlebe die Zukunft“, „Beschleunige deinen Workflow", „nahtlos"-Behauptungen oder übersetzte Äquivalente. Überschriften müssen tatsächliche Inhalte vermitteln, 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 durchgehende Großbuchstaben. Passe den Wortlaut an diesen Stil und die Sprache des Benutzers an, ohne die Wahrheit zu ändern.

Theme- und Modus-Kontrastintegrität: Wenn ein Benutzer den Dunkel- oder Hellmodus anfordert (oder einen Theme-Umschalter baut), MÜSSEN Hintergrund- und Vordergrundfarben in synchronisierten Paaren über alle Oberflächen, Texte, Ränder, Eingaben und semantischen Badges hinweg wechseln. Lasse niemals schwarzen Text auf dunklem Hintergrund, weißen Text auf weißem Hintergrund oder unlesbare niedrigkontrastige Status-Pillen zurück. Alle Zustände müssen 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).

Reaktionsschnell und Animation: Gestalte mobil bewusst, überprüfe lange Beschriftungen, Fokuszustände und zugänglichen Kontrast; kein Textbeschneiden, um ein trendiges Layout zu erzwingen. Standardmäßig statisch; verwende Animation für sinnvolle Interaktion, respektiere reduzierte-Bewegung-Präferenz, vermeide Bounce/Floating/Pulsing-Dekoration ohne echten Zustand.

Kritische/hohe Befunde blockieren die Fertigstellung: Erfundene Status/Daten, defekte Aktionen, unzugängliche/beschnittene Steuerelemente, irreführende Texte, Theme-Kontrast-Kollisionen oder schwerwiegende Mobilfehler 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 bewusste Teile der gewählten Ästhetik sind und die Benutzerfreundlichkeitsprüfungen bestehen. Erzwinge nicht stillschweigend Minimalismus.

Anti-Schluderei: stilspezifisch

Kuratierte Komposition, kein automatisch generiertes Kartenraster.

• Ablehnen: Uniforme Raster identischer Karten, verschachtelte Karten in Karten, gefälschte Metriken ohne Einheiten, Platzhalter-Icons ohne klare Bedeutung, leere Kacheln, die nur hinzugefügt wurden, um ein CSS-Raster auszugleichen, und Dunkel-/Hellmodus-Farbkollisionen, bei denen Text auf der Kacheloberfläche unleserlich bleibt.
• Stattdessen: Gestalte jede Kachel um tatsächliche, unterschiedliche Funktionen oder Benutzeraktionen mit asymmetrischen Gewichten und gut lesbaren Überschriften.
• Kopie-Check: Jede Kachelüberschrift muss eine echte funktionale Bedeutung haben. Kein generischer Text.

Anti-Schluderei: stilspezifische Animationen und Interaktionen

Füge keine verschachtelten Kartenanimationen hinzu, die die Aufmerksamkeit auf Kosten des Inhalts stehlen. Verwende Animation, um den Inhalt hervorzuheben, nicht als Dekoration.

Erwartete Zustandskomponenten

• Ladezustand: Skelett-Screens mit schimmernden Platzhaltern, die die endgültige Kachellayoutstruktur respektieren.
• Leerzustand: Zentrierte informative Nachricht mit einer einzelnen Aktion (z. B. „Erste Funktion hinzufügen").
• Fehlerzustand: Erkennbare Fehlerbeschreibung mit Wiederholungsaktion, nicht unterbrochen durch dekorative Elemente.
• Edge-Case-Zustand: Lange Feature-Namen ohne Überlauf oder Zeilenumbruch (CSS word-break).

Beispiel für eine erfolgreiche Bento-Grid-Implementierung

<div class="bento-grid">
  <div class="bento-tile hero-tile">
    <h2>Moderne CI/CD-Pipelines</h2>
    <p>Automatisiere Builds, Tests und Bereitstellungen mit einer einzigen Konfigurationsdatei.</p>
    <button>Pipeline einrichten</button>
  </div>
  <div class="bento-tile interactive-tile">
    <label class="toggle">
      <span>Aktiviere Live-Logs</span>
      <input type="checkbox" />
    </label>
  </div>
  <div class="bento-tile metric-tile">
    <span class="metric">2.3s</span>
    <span class="label">Durchschnittliche Build-Zeit</span>
  </div>
  <div class="bento-tile showcase-tile">
    <img src="pipeline-diagram.svg" alt="CI/CD-Ablaufdiagramm" />
  </div>
</div>

CSS-Grundlage

.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

.bento-tile {
  background: var(--taste-bento-surface);
  border: var(--taste-bento-border);
  border-radius: var(--taste-bento-radius);
  padding: 24px;
  box-shadow: var(--taste-bento-shadow);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.bento-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.hero-tile {
  grid-column: span 2;
  grid-row: span 2;
}

Abschließende Warnung

Dieses Skill setzt voraus, dass der Benutzer den Bento-Grid-Stil explizit gewählt hat. Verwende es nicht für allgemeine UI-Anfragen ohne Stilauswahl. Respektiere Benutzerpräferenzen für reduziert Bewegung und Barrierefreiheit.

Stilauswahl vor UI-Code.