kennedys0/taste-engine

Taste Engine — Stil-Router

Ein universeller Prozess, viele unabhängige Geschmäcker – mit Anti-Slop, bedingtem öffentlichem SEO und optionalem, stilbewusstem Motion. Taste Engine steuert wann zu fragen ist, welches ausgewählte Stilpaket geladen werden soll und wie es durchgesetzt wird. Die Engine selbst hat keine eigene Ästhetik. Stilpakete in styles/*.md enthalten die eigentlichen Designanweisungen.

Materialtreue (ausgewählte Stile) – Screenshot-Level-Vertrag

Ausgewählte visuelle Ästhetiken müssen in der gerenderten Oberfläche erkennbar sein, nicht nur in Überschriften oder CSS-Variablennamen. Wenn glassmorphism ausgewählt ist, lade styles/glassmorphism.md und wende dessen obligatorische Glas-Materialtreue-Pforte an: echte sichtbar matte/getönte Scheiben, die einen differenzierten Hintergrund filtern, lesbare Reflexionen/Kanten und einen barrierefreien Fallback. Ein flaches marineblaues Hero plus ein blauer CTA ist nicht Glassmorphism. Verwende tests/glassmorphism-visual.md für Akzeptanztests und examples/glassmorphism/frosted-surfaces.css als Ausgangsrezept. Wende diese glasspezifische Prüfung nicht auf andere Stile an; jede Ästhetik behält ihre eigenen Anforderungen.

Glassmorphismus-spezifische Verlaufsausnahme

Wenn Glassmorphismus ausgewählt ist, sind zweckdienliche CSS-Verlaufshintergründe, Umgebungslichtfelder und kontrollierte weiche Farbformen ausdrücklich erlaubt, da sie durchscheinende Mattierung und Tiefe sichtbar machen. Entferne diese nicht, um allgemeine Anti-Slop-Verlaufswarnungen zu erfüllen. Lese styles/glassmorphism.md ("Explizite Hintergrundverlaufsausnahme") und validiere, dass der erste Viewport eine echte Scheibe zeigt, die ihren differenzierten Hintergrund filtert. Diese Ausnahme gilt nur für das ausgewählte Material und überschreibt niemals Benutzerfreundlichkeit, Wahrhaftigkeit, Barrierefreiheit oder Benutzereinschränkungen.

Automatische Aktivierung: Der Null-Befehl-Vertrag

• Dies ist eine aufgabenausgelöste Fähigkeit, kein reiner Slash-Befehl-Workflow. Installierte Agenten, die autonome Agent Skills unterstützen, sollten die obigen Metadaten bei Portfolio-, Website-, App-, Dashboard-, Landing-Page- und UI-Neugestaltungsanfragen entdecken – selbst wenn der Benutzer nie "taste-engine" sagt.
• Sobald aktiviert, wende Automatic Invocation Contract an, bevor du UI-Code schreibst. Die tatsächliche Plattform entscheidet, ob die Fähigkeit aufgerufen wird; diese Datei kann keinen OS-Hook erstellen oder die Einhaltung auf jedem Host garantieren.
• Implizite Stilauswahl: "Erstelle mir eine Portfolio-Website" → stelle EINE kurze Stilfrage, beende die Runde. Frage den Benutzer niemals im selben Durchgang nach irrelevanten Details.
• Explizite Stilauswahl: "Erstelle eine Portfolio-Website im Skeumorphsm-Stil" → normalisiere den Tippfehler zu skeuomorphism, lese styles/skeuomorphism.md und baue. Führe kein Auswahlmenü aus.
• Bestehendes Projekt: Eine genehmigte Projektkonfiguration oder dokumentierte Marke/Stil hat Vorrang vor generischen Standardeinstellungen für inkrementelle Arbeiten; unterbreche nicht mit einem Menü.
• Keine Frontend-Arbeit: API-Implementierung, Debuggen von Geschäftslogik, Datenbankmigration, Infrastruktur, reine Schreibaufgaben → starte den Stilauswähler nicht.

Engineering-Begleiter – bedingt und framework-bewusst

Sobald die visuelle Stilfrage geklärt ist (oder für bestehende Systeme/nichtvisuelle Arbeiten übersprungen wird), wende Engineering Router an. Jedes Web-UI erhält die universelle Web Interface Quality-Pforte; React/Next erhält React Performance und optional React Composition nur, wenn der Stack und die Aufgabe dies rechtfertigen. React Native/Expo-Arbeiten erhalten Native Mobile, nicht Web-SEO. Navigationsmotion darf nach Kompatibilitätsprüfungen View Transitions oder optional Anime.js verwenden, wenn es wirklich nützlich ist. Dokumentations-Schreibaufgaben erhalten Docs Writing ohne visuellen Stilauswähler.

Dies sind lokale Originalintegrationen, keine importierten Vercel-Plugins. Sie fassen Engineering-Praktiken zusammen, die aus Upstream-Forschung gelernt wurden. Gehe nie davon aus, dass Upstream-Fähigkeiten installiert sind, erfordere nie React, setze nie ohne ausdrückliche Deployment-Absicht ein und lass nicht zu, dass technische Anleitungen die Ästhetik des Benutzers überschreiben. Die Kern-Preflight, Full-Screen-Hero, SEO, Anti-Slop und stilbewusste Motion bleiben unverändert. Siehe Engineering-Routing-Tests.

Full-Screen-Hero – obligatorisch, wenn relevant

Nach der Stilauswahl, für jedes neue öffentliche Portfolio, Landing Page oder Homepage mit einem Hero, lade Full-screen Hero Contract. Standardmäßig eine ein-sichtbaren-Bildschirm-Header + Hero-Komposition: verwende mobilsichere min-height: 100svh (mit 100vh Fallback) und subtrahiere die tatsächliche Normal-Flow-Header-Höhe, oder verwende ein Vollhöhen-Hero, wenn der Header darüber liegt. Wende 100vh nicht blind an: fixe Höhen können Text abschneiden und toolbar-geänderte mobile Viewports beeinträchtigen. Halte Inhalt und CTA auf schmalen/kurzen Bildschirmen nutzbar; erlaube natürliches Wachstum und Scrollen bei Zoom/großem Text. Folge der ## Hero composition (full first viewport)-Anleitung des ausgewählten Stils und den gemeinsamen Anti-Slop-Prüfungen. Erfinde keine Bilder, Abzeichen, gefälschte Statistiken oder geloopte Motion, nur um den Bildschirm zu füllen.

Diese Regel erzwingt kein Marketing-Hero in privaten Dashboards, Formularen, App-Arbeitsbereichen oder inkrementellen Bearbeitungen, die das Hero nicht erstellen/neu gestalten. Eine explizite Benutzerentscheidung für ein kompaktes Hero oder kein Hero gewinnt. Keine zusätzliche Stilauswahlfrage ist erforderlich, wenn der Stil bereits festgelegt ist.

Anime.js v4 Motion Engine – optional und stilbewusst

Für explizite UI-Mikrointeraktionsanfragen oder beim Erstellen eines ausgewählten Stils, der von zusätzlicher Motion profitiert, lade Motion Engine Adapter und die ## Motion-Anleitung des gewählten Stils. Motion wird nie zu einem neuen Ästhetik-Auswähler und erfordert nie ein zweites Interview. Eine Anfrage wie Füge Mikrointeraktion zu diesem Dashboard hinzu bewahrt den bestehenden Projektstil und funktioniert ohne Stilfrage. Wenn das Projekt keine ausgewählte Designsprache hat und der Benutzer neue UI erstellt, bleibt die ursprüngliche Ein-Fragen-Preflight obligatorisch.

Keine automatischen Abhängigkeitsinstallationen. Überprüfe zuerst den vorhandenen Stack. Bevorzuge CSS/native Browser-Funktionen für einfache Übergänge; erwäge Anime.js v4 nur, wenn es koordinierte Motion sinnvoll vereinfacht oder explizit angefordert wurde. Für React/Next verwende createScope() + Lifecycle-Bereinigung; für Benutzer, die reduzierte Motion bevorzugen, deaktiviere nicht wesentliche Effekte, während die Interaktionen funktionsfähig bleiben. Erzwinge keine Bounces, Loops oder unnötiges Staggering. Style-Mapping in styles/motion-profiles.json; React-Rezept in examples/react/anime-v4-press.jsx. Nicht-Web/native Apps sollten stattdessen ihre Plattform-Motion-APIs verwenden.

Cross-Style-SEO: automatisch und bedingt

SEO ist keine Stilwahl. Für eine neue oder wesentlich überarbeitete öffentliche Website (Portfolio, Landing Page, Blog, öffentliche Geschäftswebsite, öffentliche Dokumentation oder öffentliche Produktseiten), lade SEO Integration und, wenn nötig, SEO implementation recipes nach der visuellen Stilauswahl. Wende technisches SEO + Anti-Slop-Inhalt auf jeden gewählten Stil an, ohne als zweite Frage "Willst du SEO?" zu stellen. SEO ändert nie die ausgewählte Materialästhetik.

• Expliziter Stil: Baue ein Skeuomorphism-Portfolio → lese styles/skeuomorphism.md + references/seo.md, keine Stilfrage, dann implementieren.
• Fehlender Stil: Baue eine Portfolio-Website → stelle genau eine Stilfrage und beende die Runde. Nach der Antwort, lade Stil + SEO und implementiere. Umgehe die Preflight nicht nur, um Metadaten zu schreiben.
• Nur SEO: Auditiere die SEO meiner Website / Korrigiere kanonische URLs und die Sitemap → lese sofort das SEO-Modul, kein visuelles Stilinterview und keine unaufgeforderte Neugestaltung.
• Private/interne Anwendung: bewahre Vertraulichkeit und bestehende Indexierbarkeit; generiere keine öffentliche Sitemap oder offenbare private Routen. Native mobile/Backend-only-Aufgaben liegen außerhalb des gewöhnlichen Web-SEO-Bereichs.
• Unbekannte Domain: erfinde keine Live-URLs, Autorenschaft, strukturierte Daten, Bewertungen oder Seiteninhalte; implementiere sicher Semantik/Titel und melde, was noch aussteht.

SEO und Stil teilen sich FLOOR / REFLEX / FINISH-Pforten; Privatsphäre, wahrheitsgetreuer Inhalt, Barrierefreiheit und funktionales Verhalten haben Vorrang vor ästhetischen und Suchpräferenzen. Siehe SEO acceptance scenarios. Die optionale eigenständige taste-seo-Fähigkeit ist für SEO-only-Installationen gedacht; Router-Benutzer müssen sie nicht separat installieren.

Harte Anforderung: Preflight vor neuer visueller Implementierung

Bei Aufgaben, die visuelles UI einführen oder wesentlich überarbeiten, schreibe keinen UI-Code, generiere keine Interface-Mockups und ändere keine Design-Tokens, bis die visuelle Richtung geklärt ist.

1. Prüfe die aktuelle Benutzeranfrage, die bestehende Produktmarke/desig-System und eine explizit genehmigte Projektstilkonfiguration.
2. Wenn ein Stil bereits explizit ausgewählt ist (z.B. "Brutalistisches Dashboard"), frage nicht noch einmal. Bestätige es in einer kurzen Zeile, falls sinnvoll, und lade das entsprechende Stilpaket.
3. Wenn das bestehende Projekt einen klar etablierten Stil hat und der Benutzer inkrementelle Änderungen anfordert, behalte ihn bei; unterbreche nicht mit einer neuen Auswahl. Eine Neugestaltungsanfrage kann den etablierten Stil überschreiben.
4. Ansonsten stelle genau eine prägnante Stilauswahlfrage und beende die Runde. Biete 6 kontrastierende Optionen und "Mehr Stile / Benutzerdefiniert / Referenz senden". Wähle keinen Stil stillschweigend aus, beginne nicht mit dem Codieren, während du auf eine Antwort wartest, und stelle kein Frage-Interview.
5. Wenn der Benutzer antwortet, löse die Stil-ID über das Register auf, lese nur das/die ausgewählte(n) Paket(e), leite projektspezifische Tokens/Entscheidungen ab und führe dann aus. Ein vom Benutzer bereitgestelltes Adjektiv oder eine Referenz kann die Interpretation von Stilmerkmalen erfordern, anstatt eine Voreinstellung zu erzwingen.
6. Wenn ein Tool-Runner nicht auf Benutzereingabe pausieren kann, melde die ungelöste Auswahl und erfinde keine Zustimmung. Eine explizite Anweisung zur Verwendung eines autonomen Best-Effort-Standards kann einen vorläufigen Stil autorisieren; markiere ihn als vorläufig und umkehrbar.

Obligatorische erste Frage (Beispiel auf Deutsch)

Bevor ich mit dem Design beginne, welchen visuellen Stil möchtest du?

1. Claymorphism – weich, fühlbar, sanfte Tiefe
2. Glassmorphism – transparent, geschichtet, modern
3. Brutalismus – strenge Typografie, rohes Raster, hoher Kontrast
4. Neo-Brutalismus – kräftige Farben, Rahmen und harte Schatten
5. Minimalismus – klar, einfach, Fokus auf Inhalt
6. Swiss / Editorial – präzises Raster, dominante Typografie Oder gib andere, benutzerdefiniert ein oder sende eine Referenz.

Passe dich der Sprache des Benutzers an. Halte es bei einer einzigen Frage; beschreibe Unterschiede, ohne eine als "beste" zu bezeichnen. Bei langen Menüs präsentiere zuerst die sechs plus eine Möglichkeit, die restlichen Optionen zu sehen. Wenn der Benutzer Beispiele möchte, zeige Optionen vor der Auswahl. Wenn der Benutzer einen interaktiven Auswähler anfordert und der Agent dies unterstützt, präsentiere die gleichen Optionen als UI-Steuerelemente.

Verfügbare Stilpakete

Lese styles/registry.json zum Abgleichen von IDs, Aliassen, häufigen Rechtschreibfehlern und Beschreibungen. Normalisiere Interpunktion, Bindestriche und Groß-/Kleinschreibung; respektiere negierte Stilerwähnungen ("nicht glassmorphism") und Kontext. Wo verfügbar, kann python3 scripts/style_probe.py --prompt "..." einen deterministischen Stil-Hinweis liefern; semantische Interpretation und Projektkontext haben jedoch Vorrang. Rufe keine eigenständige Stil-Fähigkeit namentlich auf: lese die ausgewählte lokale Datei styles/<id>.md, die Teil dieses installierten Routers ist. Integrierte Pakete:

ID	Richtung	Datei zum Laden nach Auswahl
claymorphism	Skulpturiert, taktil	Stilpaket
glassmorphism	Durchscheinend, geschichtet	Stilpaket
brutalismus	Roh, strukturiert	Stilpaket
neo-brutalismus	Verspielt, mutig	Stilpaket
minimalismus	Zurückhaltende Klarheit	Stilpaket
swiss-editorial	Typografisches Raster	Stilpaket
bento	Modulare Kacheln	Stilpaket
skeuomorphismus	Physische Kontrollmetapher	Stilpaket
retro-terminal	Konsolenästhetik	Stilpaket
enterprise	Workflow-/Datenfirst	Stilpaket

Benutzerdefiniert ist erstklassig: Wenn die gewählte Ästhetik nicht im Register ist, sammle eine kurze Referenz oder Einschränkungen, erstelle dann eine vorläufige projektspezifische Stildefinition unter Verwendung derselben Dimensionen. Beschrifte den Stil niemals falsch als ein nicht vorhandenes Paket. Erfordere keinen externen Internetzugang zur Auswahl.

Router-Status

• needs-selection: Neue visuelle Arbeit; keine ausgewählte/bestätigte Richtung. Stelle eine Stilfrage und beende die Runde.
• ready: Stil oder bestehende Marke explizit festgelegt; lade relevantes Paket und implementiere.
• refine: Kleine Änderung im bestehenden UI; behalte den Stil bei, ändere nur notwendige Tokens/Komponenten.
• custom: Benutzer wählt eine Mischung, gibt Screenshots oder fordert einen nicht spezifizierten Stil an; bilde auf dieselben Designdimensionen ab und bestätige nur wesentliche Unklarheiten.
• non-visual: Backend, Tests, Dokumentation, Bugfixes ohne visuelle Entscheidung; überspringe Designauswahl vollständig.

Detailliertes Routing, Mischungen und Konfliktregeln: Stil-Router. Für autonome Entdeckung, Stil-Aliase, Host-Einschränkungen und genaue Beispieltranskripte siehe auto-invocation.

Anwenden des Stils nach der Auswahl

1. Extrahiere Anforderungen: Produkt, Zielgruppe, Gerät, Framework, bestehende Marke, explizite Vorlieben/Abneigungen, Barrierefreiheit, Leistung.
2. Lade nur ausgewähltes Paket (plus gemeinsame Referenzen nach Bedarf). Mische keine zufälligen Regeln aus nicht ausgewählten Paketen.
   • Stil ≠ Anatomie: Leite Produktfluss und Seiteninhalt aus echten Benutzerzielen ab, während das ausgewählte Paket das visuelle Material bestimmt. Vor dem Codieren...