leonxlnx/taste-skill

Frontend-Skill für hohe Eigenverantwortung

1. AKTIVE GRUNDKONFIGURATION

• DESIGN_VARIANCE: 8 (1=Perfekte Symmetrie, 10=Künstlerisches Chaos)
• MOTION_INTENSITY: 6 (1=Statisch/Keine Bewegung, 10=Kinematisch/Magische Physik)
• VISUAL_DENSITY: 4 (1=Kunstgalerie/Luftig, 10=Pilotencockpit/Datenüberfluss)

KI-Anweisung: Die Standard-Baseline für alle Generierungen ist strikt auf diese Werte (8, 6, 4) festgelegt. Bitten Sie den Benutzer nicht, diese Datei zu bearbeiten. Ansonsten HÖREN SIE IMMER auf den Benutzer: Passen Sie diese Werte dynamisch basierend auf dem an, was er in seinen Chat-Prompts explizit anfordert. Verwenden Sie diese Baseline (oder vom Benutzer überschriebenen) Werte als globale Variablen, um die spezifische Logik in den Abschnitten 3 bis 7 zu steuern.

2. STANDARD-ARCHITEKTUR & KONVENTIONEN

Sofern der Benutzer keinen anderen Stack explizit angibt, halten Sie sich an diese strukturellen Einschränkungen, um Konsistenz zu wahren:

• ABHÄNGIGKEITSÜBERPRÜFUNG [VERPFLICHTEND]: Bevor Sie IRGENDEINE Drittanbieter-Bibliothek importieren (z. B. framer-motion, lucide-react, zustand), MÜSSEN Sie package.json überprüfen. Wenn das Paket fehlt, MÜSSEN Sie den Installationsbefehl ausgeben (z. B. npm install package-name), bevor Sie den Code bereitstellen. Gehen Sie niemals davon aus, dass eine Bibliothek existiert.
• Framework & Interaktivität: React oder Next.js. Standardmäßig werden Server-Komponenten (RSC) verwendet.
  • RSC-SICHERHEIT: Globaler Status funktioniert NUR in Client-Komponenten. In Next.js umschließen Sie Provider in einer "use client"-Komponente.
  • INTERAKTIVITÄTSISOLATION: Wenn Abschnitt 4 oder 7 (Bewegung/Flüssigglas) aktiv sind, MUSS die spezifische interaktive UI-Komponente als isolierte Blattkomponente mit 'use client' ganz oben extrahiert werden. Server-Komponenten dürfen ausschließlich statische Layouts rendern.
• Zustandsverwaltung: Verwenden Sie lokales useState/useReducer für isolierte UI. Verwenden Sie globalen Status ausschließlich zur Vermeidung von tiefem Prop-Drilling.
• Styling-Richtlinie: Verwenden Sie Tailwind CSS (v3/v4) für 90% des Stylings.
  • TAILWIND-VERSIONSSPERRE: Überprüfen Sie zuerst package.json. Verwenden Sie in v3-Projekten keine v4-Syntax.
  • T4-KONFIGURATIONS-SCHUTZ: Verwenden Sie für v4 NICHT das Plugin tailwindcss in postcss.config.js. Verwenden Sie @tailwindcss/postcss oder das Vite-Plugin.
• ANTI-EMOJI-RICHTLINIE [KRITISCH]: Verwenden Sie NIEMALS Emojis in Code, Auszeichnungssprache, Textinhalten oder Alt-Text. Ersetzen Sie Symbole durch qualitativ hochwertige Icons (Radix, Phosphor) oder saubere SVG-Primitive. Emojis sind VERBOTEN.
• Responsivität & Abstände:
  • Standardisieren Sie Breakpoints (sm, md, lg, xl).
  • Begrenzen Sie Seitenlayouts mit max-w-[1400px] mx-auto oder max-w-7xl.
  • Ansichtsfenstergröße [KRITISCH]: Verwenden Sie NIEMALS h-screen für vollhohe Hero-Abschnitte. Verwenden Sie IMMER min-h-[100dvh], um katastrophale Layout-Sprünge auf mobilen Browsern (iOS Safari) zu verhindern.
  • Grid statt Flex-Mathe: Verwenden Sie NIEMALS komplexe Flexbox-Prozentrechnungen (w-[calc(33%-1rem)]). Verwenden Sie IMMER CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) für zuverlässige Strukturen.
• Icons: Sie MÜSSEN genau die Importpfade @phosphor-icons/react oder @radix-ui/react-icons verwenden (installierte Version prüfen). Standardisieren Sie strokeWidth global (z. B. ausschließlich 1.5 oder 2.0).

3. DESIGN-TECHNIK-RICHTLINIEN (Verzerrungskorrektur)

LLMs haben statistische Verzerrungen hin zu bestimmten UI-Klischee-Mustern. Konstruieren Sie proaktiv erstklassige Oberflächen mit diesen konstruierten Regeln:

Regel 1: Deterministische Typografie

• Anzeige/Überschriften: Standardmäßig text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-SCHLAMPIGKEIT: Empfehlen Sie Inter nicht für "Premium"- oder "Kreativ"-Vibes. Erzwingen Sie einen einzigartigen Charakter durch die Verwendung von Geist, Outfit, Cabinet Grotesk oder Satoshi.
  • TECHNISCHE UI-REGEL: Serifenschriften sind für Dashboard-/Software-UIs strengstens VERBOTEN. Verwenden Sie in diesen Kontexten ausschließlich hochwertige serifenlose Paarungen (Geist + Geist Mono oder Satoshi + JetBrains Mono).
• Fließtext/Absätze: Standardmäßig text-base text-gray-600 leading-relaxed max-w-[65ch].

Regel 2: Farbkalibrierung

• Einschränkung: Maximal 1 Akzentfarbe. Sättigung < 80%.
• DAS LILA-VERBOT: Die "KI-Lila/Blau"-Ästhetik ist strengstens VERBOTEN. Keine lila Button-Glows, keine Neon-Verläufe. Verwenden Sie absolute neutrale Basen (Zinc/Slate) mit kontrastreichen, singulären Akzenten (z. B. Emerald, Electric Blue oder Deep Rose).
• FARBKONSISTENZ: Bleiben Sie für die gesamte Ausgabe bei einer Palette. Wechseln Sie nicht zwischen warmen und kühlen Grautönen innerhalb desselben Projekts.

Regel 3: Layout-Diversifizierung

• ANTI-ZENTRIERUNGS-VERZERRUNG: Zentrierte Hero/H1-Abschnitte sind strengstens VERBOTEN, wenn DESIGN_VARIANCE > 4. Erzwingen Sie "Split Screen" (50/50), "Linksbündiger Inhalt/Rechtsbündiges Asset" oder "Asymmetrische Weißraum"-Strukturen.

Regel 4: Materialität, Schatten und "Anti-Karten-Übernutzung"

• DASHBOARD-HÄRTUNG: Für VISUAL_DENSITY > 7 sind generische Kartencontainer strengstens VERBOTEN. Verwenden Sie Logik-Gruppierung via border-t, divide-y oder reinem negativem Raum. Datenmetriken sollten atmen, ohne eingerahmt zu sein, es sei denn, ein Verstärkungseffekt (z-index) ist funktional erforderlich.
• Ausführung: Verwenden Sie Karten NUR, wenn die Verstärkung eine Hierarchie vermittelt. Wenn ein Schatten verwendet wird, tönen Sie ihn an den Hintergrundfarbton an.

Regel 5: Interaktive UI-Zustände

• Obligatorische Generierung: LLMs generieren natürlicherweise "statische" erfolgreiche Zustände. Sie MÜSSEN vollständige Interaktionszyklen implementieren:
  • Laden: Skelett-Lade-Placeholder, die den Layout-Größen entsprechen (vermeiden Sie generische runde Spinner).
  • Leere Zustände: Schön gestaltete leere Zustände, die anzeigen, wie Daten befüllt werden.
  • Fehlerzustände: Klare, inline-Fehlerberichterstattung (z. B. Formulare).
  • Haptisches Feedback: Bei :active verwenden Sie -translate-y-[1px] oder scale-[0.98], um einen physischen Druck zu simulieren, der Erfolg/Aktion anzeigt.

Regel 6: Daten- und Formularmuster

• Formulare: Das Label MUSS über dem Eingabefeld stehen. Hilfstext ist optional, sollte aber im Markup vorhanden sein. Fehlertext unterhalb des Eingabefelds. Verwenden Sie einen Standard-gap-2 für Eingabeblöcke.

4. KREATIVE PROAKTIVITÄT (Anti-Schlampigkeits-Implementierung)

Um generische KI-Designs aktiv zu bekämpfen, implementieren Sie diese hochwertigen Codierungskonzepte systematisch als Ihre Baseline:

• "Flüssigglas"-Refraktion: Wenn Glasform benötigt wird, gehen Sie über backdrop-blur hinaus. Fügen Sie einen 1px inneren Rand (border-white/10) und einen subtilen inneren Schatten (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) hinzu, um eine physikalische Kantenbrechung zu simulieren.
• Magnetische Mikro-Physik (Wenn MOTION_INTENSITY > 5): Implementieren Sie Schaltflächen, die sich leicht in Richtung des Mauszeigers bewegen. KRITISCH: Verwenden Sie NIEMALS React useState für magnetische Hover- oder kontinuierliche Animationen. Verwenden Sie AUSSCHLIEẞLICH die Framer Motion useMotionValue und useTransform außerhalb des React-Render-Zyklus, um Leistungseinbrüche auf Mobilgeräten zu verhindern.
• Permanente Mikro-Interaktionen: Wenn MOTION_INTENSITY > 5, betten Sie kontinuierliche, unendliche Mikro-Animationen (Puls, Schreibmaschine, Float, Schimmer, Karussell) in Standardkomponenten ein (Avatare, Statuspunkte, Hintergründe). Wenden Sie erstklassige Spring-Physik (type: "spring", stiffness: 100, damping: 20) auf alle interaktiven Elemente an – kein lineares Easing.
• Layout-Übergänge: Nutzen Sie immer Framer Motions layout- und layoutId-Props für reibungslose Neuanordnungen, Größenänderungen und gemeinsame Elementübergänge bei Zustandsänderungen.
• Gestaffelte Orchestrierung: Hängen Sie Listen oder Raster nicht sofort ein. Verwenden Sie staggerChildren (Framer) oder CSS-Kaskadierung (animation-delay: calc(var(--index) * 100ms)), um sequentielle Wasserfall-Enthüllungen zu erzeugen. KRITISCH: Für staggerChildren MÜSSEN das Eltern-Element (variants) und die Kinder-Elemente im identischen Client-Komponentenbaum liegen. Wenn Daten asynchron abgerufen werden, übergeben Sie die Daten als Props an einen zentralisierten Eltern-Motion-Wrapper.

5. LEISTUNGS-SCHUTZVORKEHRUNGEN

• DOM-Kosten: Wenden Sie Körnungs-/Rauschfilter ausschließlich auf feste, zeigerereignislose Pseudo-Elemente an (z. B. fixed inset-0 z-50 pointer-events-none) und NIEMALS auf scrollende Container, um kontinuierliche GPU-Neuanstriche und Leistungseinbußen auf Mobilgeräten zu verhindern.
• Hardware-Beschleunigung: Animieren Sie niemals top, left, width oder height. Animieren Sie ausschließlich über transform und opacity.
• Z-Index-Zurückhaltung: Verwenden Sie NIEMALS unaufgefordert willkürliches z-50 oder z-10. Verwenden Sie Z-Indexes streng für systemische Ebenenkontexte (Sticky-Navbars, Modals, Overlays).

6. TECHNISCHES REFERENZ (Einstellungsdefinitionen)

DESIGN_VARIANCE (Stufe 1-10)

• 1-3 (Vorhersagbar): Flexbox justify-center, strenge 12-spaltige symmetrische Raster, gleiche Innenabstände.
• 4-7 (Versetzt): Verwenden Sie margin-top: -2rem Überlappungen, unterschiedliche Bildseitenverhältnisse (z. B. 4:3 neben 16:9), linksbündige Überschriften über zentrierten Daten.
• 8-10 (Asymmetrisch): Masonry-Layouts, CSS Grid mit Bruchteilen (z. B. grid-template-columns: 2fr 1fr 1fr), große leere Zonen (padding-left: 20vw).
• MOBILE ÜBERSTEUERUNG: Für Stufen 4-10 MUSS jedes asymmetrische Layout über md: aggressiv auf ein strenges, einspaltiges Layout (w-full, px-4, py-8) bei Viewports < 768px zurückfallen, um horizontales Scrollen und Layout-Brüche zu verhindern.

MOTION_INTENSITY (Stufe 1-10)

• 1-3 (Statisch): Keine automatischen Animationen. Nur CSS :hover- und :active-Zustände.
• 4-7 (Flüssiges CSS): Verwenden Sie transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Verwenden Sie animation-delay-Kaskaden für Ladeeinblendungen. Konzentrieren Sie sich strikt auf transform und opacity. Verwenden Sie will-change: transform sparsam.
• 8-10 (Fortgeschrittene Choreographie): Komplexe scrollausgelöste Enthüllungen oder Parallaxe. Verwenden Sie Framer Motion Hooks. Verwenden Sie NIEMALS window.addEventListener('scroll').

VISUAL_DENSITY (Stufe 1-10)

• 1-3 (Kunstgalerie-Modus): Viel Weißraum. Große Abschnittsabstände. Alles wirkt sehr teuer und sauber.
• 4-7 (Täglicher App-Modus): Normale Abstände für Standard-Web-Apps.
• 8-10 (Cockpit-Modus): Winzige Innenabstände. Keine Kartenboxen; nur 1px Linien zur Datentrennung. Alles ist dicht gepackt. Obligatorisch: Verwenden Sie Monospace (font-mono) für alle Zahlen.

7. KI-KENNZEICHEN (Verbotene Muster)

Um eine erstklassige, nicht-generische Ausgabe zu gewährleisten, MÜSSEN Sie diese häufigen KI-Design-Signaturen strikt vermeiden, sofern nicht explizit angefordert:

Visuelles & CSS

• KEINE Neon/Außen-Glows: Verwenden Sie keine Standard-box-shadow-Glows oder Auto-Glows. Verwenden Sie innere Ränder oder subtile getönte Schatten.
• KEIN reines Schwarz: Verwenden Sie niemals #000000. Verwenden Sie Off-Black, Zinc-950 oder Anthrazit.
• KEINE übersättigten Akzente: Entsättigen Sie Akzente, um sich elegant in Neutrale einzufügen.
• KEINE übermäßigen Textverläufe: Verwenden Sie keine Textfüll-Verläufe für große Überschriften.
• KEINE benutzerdefinierten Mauszeiger: Sie sind veraltet und beeinträchtigen Leistung/Barrierefreiheit.

Typografie

• KEINE Inter-Schrift: Verboten. Verwenden Sie Geist, Outfit, Cabinet Grotesk oder Satoshi.
• KEINE überdimensionierten H1s: Die erste Überschrift sollte nicht schreien. Kontrollieren Sie die Hierarchie mit Gewicht und Farbe, nicht nur mit massiver Größe.
• Serifen-Einschränkungen: Verwenden Sie Serifenschriften NUR für kreative/redaktionelle Designs. NIEMALS Serifen auf sauberen Dashboards verwenden.

Layout & Abstände

• Perfekt ausrichten und Abstände setzen: Stellen Sie sicher, dass Innenabstände und Ränder mathematisch perfekt sind. Vermeiden Sie schwebende Elemente mit unangenehmen Lücken.
• KEIN 3-Spalten-Karten-Layout: Die generische "3 gleiche Karten horizontal"-Feature-Reihe ist VERBOTEN. Verwenden Sie stattdessen ein 2-spaltiges Zickzack-Muster, ein asymmetrisches Raster oder einen horizontalen Scroll-Ansatz.

Inhalt & Daten (Der "Jane Doe"-Effekt)

• KEINE generischen Namen: "John Doe", "Sarah Chan" oder "Jack Su" sind verboten. Verwenden Sie hochkreative, realistisch klingende Namen.
• KEINE generischen Avatare: Verwenden Sie KEINE Standard-SVG-"Ei"- oder Lucide-Benutzer-Icons für Avatare. Verwenden Sie kreative, glaubwürdige Foto-Platzhalter oder spezifisches Styling.
• KEINE falschen Zahlen: Vermeiden Sie vorhersagbare Ausgaben wie 99,99%, 50% oder einfache Telefonnummern (1234567). Verwenden Sie organische, unordentliche Daten (47,2%, +1 (312) 847-1928).
• KEINE Startup-Schlampen-Namen: "Acme", "Nexus", "SmartFlow". Erfinden Sie erstklassige, kontextbezogene Markennamen.
• KEINE Füllwörter: Vermeiden Sie KI-Text-Klischees wie "Elevate", "Seamless", "Unleash" oder "Next-Gen". Verwenden Sie konkrete Verben.

Externe Ressourcen & Komponenten

• KEINE defekten Unsplash-Links: Verwenden Sie kein Unsplash. Verwenden Sie absolute, zuverlässige Platzhalter wie https://picsum.photos/seed/{zufalls_string}/800/600 oder SVG-UI-Avatare.
• shadcn/ui-Anpassung: Sie dürfen shadcn/ui verwenden, aber NIEMALS in seinem generischen Standardzustand. Sie MÜSSEN die Radien, Farben und Schatten an die erstklassige Projektästhetik anpassen.
• Produktionsreife Sauberkeit: Code muss extrem sauber, visuell auffällig, einprägsam und in jedem Detail sorgfältig verfeinert sein.

8. DAS KREATIVE ARSENAL (Hochwertige Inspiration)

Standardmäßig nicht auf generische UI zurückgreifen. Schöpfen Sie aus dieser Bibliothek fortgeschrittener Konzepte, um sicherzustellen, dass die Ausgabe visuell auffällig und einprägsam ist. Nutzen Sie gegebenenfalls GSAP (ScrollTrigger/Parallax) für komplexes Scrolltelling oder ThreeJS/WebGL für 3D/Canvas-Animationen anstelle von einfachen CSS-Bewegungen. KRITISCH: Mischen Sie niemals GSAP/ThreeJS mit Framer Motion im selben Komponentenbaum. Standardmäßig Framer Motion für UI/Bento-Interaktionen verwenden. Verwenden Sie GSAP/ThreeJS AUSSCHLIEẞLICH für isoliertes, vollseitiges Scrolltelling oder Canvas-Hintergründe, eingebettet in strenge useEffect-Cleanup-Blöcke.

Das Standard-Hero-Paradigma

• Hören Sie auf, zentrierten Text über einem dunklen Bild zu platzieren. Versuchen Sie asymmetrische Hero-Abschnitte: Text sauber links oder rechts ausgerichtet. Der Hintergrund sollte ein hochwertiges, relevantes Bild mit einem subtilen stilistischen Verblassen aufweisen (Abdunkeln oder Aufhellen, das anmutig in die Hintergrundfarbe übergeht, je nachdem, ob es sich um den Licht- oder Dunkelmodus handelt).

Navigation & Menüs

• Mac OS Dock-Vergrößerung: Nav-Leiste am Rand; Symbole skalieren fließend beim Hover.
• Magnetischer Button: Schaltflächen, die sich physisch in Richtung des Cursors bewegen.
• Gooey-Menü: Unterelemente lösen sich wie eine zähflüssige Flüssigkeit vom Hauptbutton.
• Dynamic Island: Eine pillenförmige UI-Komponente, die sich verformt, um Status/Alarme anzuzeigen.
• Kontextuelles Radialmenü: Ein kreisförmiges Menü, das genau an den Klickkoordinaten erscheint.
• Floating Speed Dial: Ein FAB, der zu einer gekrümmten Linie sekundärer Aktionen hervorschnellt.
• Mega-Menü-Enthüllung: Vollbild-Dropdowns, die komplexe Inhalte gestaffelt einblenden.

Layout & Raster

• Bento-Raster: Asymmetrische, kachelbasierte Gruppierung (z. B. Apple Kontrollzentrum).
• Masonry-Layout: Gestaffeltes Raster ohne feste Zeilenhöhen (z. B. Pinterest).
• Chroma-Raster: Rasterränder oder Kacheln, die subtile, kontinuierlich...