rn8mwsb6pf-alt/tim-studio

High-Agency Frontend Skill

1. AKTIVE BASELINE-KONFIGURATION

• DESIGN_VARIANCE: 8 (1=Perfekte Symmetrie, 10=Artsy Chaos)
• MOTION_INTENSITY: 6 (1=Statisch/Keine Bewegung, 10=Kinematografisch/Magische Physik)
• VISUAL_DENSITY: 4 (1=Kunstgalerie/Luftig, 10=Piloten-Cockpit/Dichte Daten)

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

2. STANDARDARCHITEKTUR & KONVENTIONEN

Sofern der Benutzer keinen explizit anderen Stack angibt, befolge diese strukturellen Einschränkungen, um Konsistenz zu wahren:

• ABHÄNGIGKEITSÜBERPRÜFUNG [VERPFLICHTEND]: Bevor du IRGENDEINE Drittanbieter-Bibliothek (z. B. framer-motion, lucide-react, zustand) importierst, MUSST du package.json prüfen. Wenn das Paket fehlt, MUSST du den Installationsbefehl (z. B. npm install package-name) ausgeben, bevor du den Code bereitstellst. Gehe niemals davon aus, dass eine Bibliothek existiert.
• Framework & Interaktivität: React oder Next.js. Standardmäßig Server Components (RSC).
  • RSC-SICHERHEIT: Globaler Zustand funktioniert NUR in Client Components. In Next.js wickele Anbieter in eine "use client"-Komponente.
  • INTERAKTIVITÄTSISOLIERUNG: Wenn Abschnitt 4 oder 7 (Motion/Liquid Glass) aktiv sind, MUSS die spezifische interaktive UI-Komponente als isolierte Blatt-Komponente mit 'use client' ganz oben extrahiert werden. Server Components müssen ausschließlich statische Layouts rendern.
• Zustandsverwaltung: Verwende lokales useState/useReducer für isolierte UI. Verwende globalen Zustand ausschließlich zur Vermeidung tiefer Prop-Drilling.
• Styling-Richtlinie: Verwende Tailwind CSS (v3/v4) für 90% des Stylings.
  • TAILWIND-VERSIONSSPERRE: Prüfe zuerst package.json. Verwende keine v4-Syntax in v3-Projekten.
  • V4-KONFIGURATIONS-SCHUTZ: Für v4 verwende NICHT das tailwindcss-Plugin in postcss.config.js. Verwende @tailwindcss/postcss oder das Vite-Plugin.
• ANTI-EMOJI-RICHTLINIE [KRITISCH]: Verwende NIEMALS Emojis in Code, Markup, Textinhalten oder Alt-Text. Ersetze Symbole durch hochwertige Icons (Radix, Phosphor) oder saubere SVG-Primitive. Emojis sind VERBOTEN.
• Responsivität & Abstände:
  • Standardisiere Breakpoints (sm, md, lg, xl).
  • Beginne Seitenlayouts mit max-w-[1400px] mx-auto oder max-w-7xl.
  • Viewport-Stabilität [KRITISCH]: Verwende NIEMALS h-screen für full-height Hero-Bereiche. Verwende IMMER min-h-[100dvh], um katastrophale Layout-Sprünge auf mobilen Browsern (iOS Safari) zu verhindern.
  • Grid statt Flex-Mathe: Verwende NIEMALS komplexe Flexbox-Prozentrechnung (w-[calc(33%-1rem)]). Verwende IMMER CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) für zuverlässige Strukturen.
• Icons: Du MUSST genau die Importpfade @phosphor-icons/react oder @radix-ui/react-icons verwenden (prüfe die installierte Version). Standardisiere strokeWidth global (z. B. ausschließlich 1.5 oder 2.0 verwenden).

3. DESIGN-ENGINEERING-VORGABEN (Verzerrungskorrektur)

LLMs haben statistische Verzerrungen hin zu bestimmten UI-Klischeemustern. Erstelle proaktiv hochwertige Interfaces mit diesen konstruierten Regeln:

Regel 1: Deterministische Typografie

• Display/Überschriften: Standardmäßig text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-SCHLUPF: Rate von Inter für „Premium"- oder „Kreativ"-Vibes ab. Erzwinge einzigartigen Charakter mit Geist, Outfit, Cabinet Grotesk oder Satoshi.
  • TECHNISCHE UI-REGEL: Serifen-Schriftarten sind für Dashboard/Software-UIs STRENGSTENS VERBOTEN. Verwende in diesen Kontexten ausschließlich hochwertige serifenlose Paarungen (Geist + Geist Mono oder Satoshi + JetBrains Mono).
• Textkörper/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 violetten Button-Schimmer, keine Neon-Verläufe. Verwende absolute neutrale Basen (Zinc/Slate) mit kontrastreichen, singulären Akzenten (z. B. Emerald, Electric Blue oder Deep Rose).
• FARBKONSISTENZ: Bleibe für die gesamte Ausgabe bei einer Palette. Fluktuiere nicht zwischen warmen und kühlen Grautönen innerhalb desselben Projekts.

Regel 3: Layout-Diversifizierung

• ANTI-ZENTRIERUNGSVERZERRUNG: Zentrierte Hero/H1-Bereiche sind STRENGSTENS VERBOTEN, wenn DESIGN_VARIANCE > 4. Erzwinge „Split Screen" (50/50), „Linksbündiger Inhalt/Rechtsbündiges Asset" oder „Asymmetrische Weißraum"-Strukturen.

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

• DASHBOARD-HÄRTUNG: Für VISUAL_DENSITY > 7 sind generische Karten-Container STRENGSTENS VERBOTEN. Verwende Logik-Gruppierung über border-t, divide-y oder rein negativen Raum. Datenmetriken sollten atmen, ohne in Kästchen eingesperrt zu sein, es sei denn, Tiefe (z-index) ist funktional erforderlich.
• Umsetzung: Verwende Karten NUR, wenn Tiefe Hierarchie vermittelt. Wenn ein Schatten verwendet wird, färbe ihn auf den Hintergrundfarbton ein.

Regel 5: Interaktive UI-Zustände

• Obligatorische Generierung: LLMs generieren natürlich „statische" erfolgreiche Zustände. Du MUSST vollständige Interaktionszyklen implementieren:
  • Laden: Skelett-Ladeelemente, die den Layoutgrößen entsprechen (vermeide generische kreisförmige Spinner).
  • Leere Zustände: Schön komponierte leere Zustände, die anzeigen, wie Daten befüllt werden.
  • Fehlerzustände: Klare, inline-Fehlerberichterstattung (z. B. Formulare).
  • Haptisches Feedback: Bei :active verwende -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. Verwende einen Standard-gap-2 für Eingabeblöcke.

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

Um generische KI-Designs aktiv zu bekämpfen, implementiere diese hochwertigen Codierungskonzepte systematisch als deine Baseline:

• „Liquid Glass"-Refraktion: Wenn Glasphorie benötigt wird, gehe über backdrop-blur hinaus. Füge einen 1px-Innenrand (border-white/10) und einen subtilen Innenschatten (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) hinzu, um physische Kantenbrechung zu simulieren.
• Magnetische Mikro-Physik (Wenn MOTION_INTENSITY > 5): Implementiere Buttons, die sich leicht in Richtung Mauszeiger ziehen. KRITISCH: Verwende NIEMALS React useState für magnetische Hover- oder kontinuierliche Animationen. Verwende AUSSCHLIESSLICH Framer Motions useMotionValue und useTransform außerhalb des React-Renderzyklus, um Leistungseinbrüche auf mobilen Geräten zu verhindern.
• Ständige Mikro-Interaktionen: Wenn MOTION_INTENSITY > 5, bette kontinuierliche, unendliche Mikro-Animationen (Puls, Typewriter, Float, Shimmer, Carousel) in Standardkomponenten (Avatare, Statuspunkte, Hintergründe) ein. Wende Premium-Spring-Physik (type: "spring", stiffness: 100, damping: 20) auf alle interaktiven Elemente an – kein lineares Easing.
• Layout-Übergänge: Nutze immer Framer Motions layout- und layoutId-Props für sanfte Neuanordnungen, Größenänderungen und Shared-Element-Übergänge bei Zustandsänderungen.
• Gestaffelte Orchestrierung: Liste oder Raster nicht sofort mounten. Verwende staggerChildren (Framer) oder CSS-Kaskade (animation-delay: calc(var(--index) * 100ms)), um sequenzielle Wasserfall-Enthüllungen zu erzeugen. KRITISCH: Für staggerChildren MÜSSEN das Eltern-Element (variants) und die Kind-Elemente im identischen Client-Component-Baum residieren. Wenn Daten asynchron abgerufen werden, übergib die Daten als Props an einen zentralisierten Eltern-Motion-Wrapper.

5. PERFORMANCE-SCHUTZVORKEHRUNGEN

• DOM-Kosten: Wende Korn-/Rauschfilter ausschließlich auf fixierte, pointer-event-none-Pseudo-Elemente an (z. B. fixed inset-0 z-50 pointer-events-none) und NIEMALS auf scrollende Container, um kontinuierliche GPU-Neuberechnungen und Leistungseinbußen auf mobilen Geräten zu verhindern.
• Hardware-Beschleunigung: Animiere niemals top, left, width oder height. Animiere ausschließlich über transform und opacity.
• Z-Index-Zurückhaltung: Spamme NIEMALS unaufgefordert z-50 oder z-10. Verwende Z-Indizes ausschließlich für systemische Ebenenkontexte (Sticky Navbars, Modals, Overlays).

6. TECHNISCHE REFERENZ (Dial-Definitionen)

DESIGN_VARIANCE (Stufe 1-10)

• 1-3 (Vorhersagbar): Flexbox justify-center, strenge 12-spaltige symmetrische Raster, gleiche Abstände.
• 4-7 (Versetzt): Verwende margin-top: -2rem Überlappungen, variierte Bildseitenverhältnisse (z. B. 4:3 neben 16:9), linksbündige Kopfzeilen über zentrierten Daten.
• 8-10 (Asymmetrisch): Masonry-Layouts, CSS Grid mit Bruchteil-Einheiten (z. B. grid-template-columns: 2fr 1fr 1fr), große leere Zonen (padding-left: 20vw).
• MOBIL-ÜBERSCHREIBUNG: Für Stufen 4-10 MUSS jedes asymmetrische Layout oberhalb von md: Aggressiv auf ein striktes, einspaltiges Layout zurückfallen (w-full, px-4, py-8) bei Viewports < 768px, 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 (Fluid CSS): Verwende transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Verwende animation-delay-Kaskaden für Ladevorgänge. Konzentriere dich streng auf transform und opacity. Verwende will-change: transform sparsam.
• 8-10 (Fortgeschrittene Choreografie): Komplexe scroll-ausgelöste Enthüllungen oder Parallaxe. Verwende Framer Motion Hooks. Verwende NIEMALS window.addEventListener('scroll').

VISUAL_DENSITY (Stufe 1-10)

• 1-3 (Kunstgalerie-Modus): Viel Weißraum. Große Bereichsabstä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 Abstände. Keine Karten-Boxen; nur 1px-Linien, um Daten zu trennen. Alles ist gepackt. Obligatorisch: Verwende Monospace (font-mono) für alle Zahlen.

7. KI-VERRÄTER (Verbotene Muster)

Um eine hochwertige, nicht-generische Ausgabe zu gewährleisten, MUSST du diese häufigen KI-Design-Signaturen strengstens vermeiden, sofern nicht explizit angefordert:

Visuell & CSS

• KEINE Neon-/Außenschimmer: Verwende keine Standard-box-shadow-Schimmer oder automatischen Schimmer. Verwende Innenränder oder subtile getönte Schatten.
• KEIN Reines Schwarz: Verwende niemals #000000. Verwende Off-Black, Zinc-950 oder Charcoal.
• KEINE Übersättigte Akzente: Entsättige Akzente, um elegant mit Neutraltönen zu verschmelzen.
• KEIN Übermäßiger Gradient-Text: Verwende keine Text-Fill-Verläufe für große Kopfzeilen.
• KEINE Benutzerdefinierten Mauszeiger: Sie sind veraltet und beeinträchtigen Leistung/Barrierefreiheit.

Typografie

• KEINE Inter-Schriftart: Verboten. Verwende Geist, Outfit, Cabinet Grotesk oder Satoshi.
• KEINE Überdimensionierte H1s: Die erste Überschrift sollte nicht schreien. Kontrolliere Hierarchie mit Gewicht und Farbe, nicht nur mit massiver Größe.
• Serifen-Einschränkungen: Verwende Serifen-Schriftarten NUR für kreative/editoriale Designs. Verwende NIEMALS Serifen auf sauberen Dashboards.

Layout & Abstände

• Perfekt Ausrichten & Abstände: Stelle sicher, dass Polsterung und Ränder mathematisch perfekt sind. Vermeide schwebende Elemente mit ungeschickten Lücken.
• KEIN 3-Spaltiges Karten-Layout: Die generische „3 gleiche Karten horizontal"-Feature-Reihe ist VERBOTEN. Verwende stattdessen einen 2-spaltigen Zickzack, 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. Verwende hochkreative, realistisch klingende Namen.
• KEINE Generischen Avatare: Verwende KEINE standardmäßigen SVG-„Ei"- oder Lucide-Benutzer-Icons für Avatare. Verwende kreative, glaubwürdige Foto-Platzhalter oder spezifisches Styling.
• KEINE Falschen Zahlen: Vermeide vorhersehbare Ausgaben wie 99.99%, 50% oder grundlegende Telefonnummern (1234567). Verwende organische, unordentliche Daten (47.2%, +1 (312) 847-1928).
• KEINE Startup-Schlupf-Namen: „Acme", „Nexus", „SmartFlow". Erfinde hochwertige, kontextbezogene Markennamen.
• KEINE Füllwörter: Vermeide KI-Text-Klischees wie „Elevate", „Seamless", „Unleash" oder „Next-Gen". Verwende konkrete Verben.

Externe Ressourcen & Komponenten

• KEINE Defekten Unsplash-Links: Verwende kein Unsplash. Verwende absolute, zuverlässige Platzhalter wie https://picsum.photos/seed/{random_string}/800/600 oder SVG-UI-Avatare.
• shadcn/ui Anpassung: Du darfst shadcn/ui verwenden, aber NIEMALS in seinem generischen Standardzustand. Du MUSST Radien, Farben und Schatten an die hochwertige Projektästhetik anpassen.
• Produktionsreife Sauberkeit: Der Code muss extrem sauber, visuell auffällig, einprägsam und in jedem Detail sorgfältig verfeinert sein.

8. DAS KREATIVE ARSENAL (Hochwertige Inspiration)

Wähle nicht standardmäßig generische UI. Greife auf diese Bibliothek fortschrittlicher Konzepte zurück, um sicherzustellen, dass die Ausgabe visuell auffällig und einprägsam ist. Nutze gegebenenfalls GSAP (ScrollTrigger/Parallax) für komplexes Scrolltelling oder ThreeJS/WebGL für 3D/Canvas-Animationen, anstatt einfacher CSS-Bewegung. KRITISCH: Mische niemals GSAP/ThreeJS mit Framer Motion im selben Komponentenbaum. Verwende standardmäßig Framer Motion für UI/Bento-Interaktionen. Verwende GSAP/ThreeJS AUSSCHLIESSLICH für isoliertes Full-Page-Scrolltelling oder Canvas-Hintergründe, eingewickelt in strikte useEffect-Cleanup-Blöcke.

Das Standard-Hero-Paradigma

• Höre auf, zentrierten Text über einem dunklen Bild zu machen. Probiere asymmetrische Hero-Bereiche aus: Text sauber links oder rechts ausgerichtet. Der Hintergrund sollte ein hochwertiges, relevantes Bild mit einem subtilen stilistischen Verblassen enthalten (abdunkeln oder sanft aufhellen in die Hintergrundfarbe, je nachdem, ob es sich um den Hell- oder Dunkelmodus handelt).

Navigation & Menüs

• Mac OS Dock-Vergrößerung: Navbar am Rand; Icons skalieren beim Hover fließend.
• Magnetischer Button: Buttons, die sich physisch zum Cursor hinziehen.
• Klebriges Menü: Unterelemente lösen sich wie eine zähe Flüssigkeit vom Haupt-Button.
• Dynamic Island: Ein pillenförmiges UI-Element, das sich verformt, um Status/Alarme anzuzeigen.
• Kontextuelles Radialmenü: Ein kreisförmiges Menü, das sich genau an den Klickkoordinaten ausbreitet.
• Floating Speed Dial: Ein FAB, das zu einer gebogenen Linie sekundärer Aktionen hervorfedert.
• Mega-Menü-Enthüllung: Vollbild-Dropdowns, die komplexe Inhalte gestaffelt einblenden.

Layout & Raster

• Bento Grid: Asymmetrische, kachelbasierte Gruppierung (z. B. Apple Control Center).
• Masonry Layout: Gestaffeltes Raster ohne feste Zeilenhöhen (z. B. Pinterest).
• Chroma Grid: Ränder oder Kacheln des Rasters zeigen subtile, kontinuierlich ...

… [für die Übersetzung gekürzt]