joniii4k/main1

High-Agency Frontend Skill

1. AKTIVE BASELINE-KONFIGURATION

• 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überflutung)

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. Hören Sie ansonsten 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 Ihre globalen Variablen, um die spezifische Logik in den Abschnitten 3 bis 7 zu steuern.

2. STANDARD-ARCHITEKTUR & KONVENTIONEN

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

• ABHÄNGIGKEITSÜBERPRÜFUNG [PFLICHT]: Bevor Sie EINE Drittanbieter-Bibliothek (z. B. framer-motion, lucide-react, zustand) importieren, MÜSSEN Sie package.json überprüfen. Wenn das Paket fehlt, MÜSSEN Sie den Installationsbefehl (z. B. npm install package-name) ausgeben, bevor Sie den Code bereitstellen. Gehen Sie niemals davon aus, dass eine Bibliothek existiert.
• Framework & Interaktivität: React oder Next.js. Standardmäßig Server Components (RSC).
  • RSC-SICHERHEIT: Globaler Status funktioniert NUR in Client Components. In Next.js umschließen Sie Provider in einer "use client"-Komponente.
  • INTERAKTIVITÄTSISOLATION: Wenn die Abschnitte 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 Components müssen ausschließlich statische Layouts rendern.
• Zustandsverwaltung: Verwenden Sie lokales useState/useReducer für isolierte UI. Verwenden Sie globalen Zustand nur, um tiefes Prop-Drilling zu vermeiden.
• Styling-Richtlinie: Verwenden Sie Tailwind CSS (v3/v4) für 90% des Stylings.
  • TAILWIND-VERSIONSSPERRE: Überprüfen Sie zuerst package.json. Verwenden Sie keine v4-Syntax in v3-Projekten.
  • T4-KONFIG-SCHUTZ: Für v4 verwenden Sie NICHT das tailwindcss-Plugin in postcss.config.js. Verwenden Sie @tailwindcss/postcss oder das Vite-Plugin.
• ANTI-EMOJI-RICHTLINIE [KRITISCH]: Verwenden Sie NIEMALS Emojis in Code, Markup, Textinhalten oder Alt-Texten. Ersetzen Sie Symbole durch 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.
  • Viewport-Stabilität [KRITISCH]: Verwenden Sie NIEMALS h-screen für Hero-Abschnitte in voller Höhe. 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-Prozentrechnung (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 @phosphor-icons/react oder @radix-ui/react-icons als Importpfade verwenden (überprüfen Sie die installierte Version). Standardisieren Sie strokeWidth global (z. B., ausschließlich 1.5 oder 2.0 verwenden).

3. DESIGN-ENGINEERING-ANWEISUNGEN (Bias-Korrektur)

LLMs haben statistische Verzerrungen hin zu bestimmten UI-Klischeemustern. Bauen Sie proaktiv Premium-Oberflächen mit diesen konstruierten Regeln:

Regel 1: Deterministische Typografie

• Display/Überschriften: Standardmäßig text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-SCHLUDER: Verwenden Sie Inter für "Premium"- oder "Kreativ"-Vibes. Erzwingen Sie einzigartigen Charakter mit 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 gehobene 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%.
• DER LILA-BAN: Die "KI-Lila/Blau"-Ästhetik ist strengstens VERBOTEN. Keine lila Button-Leuchteffekte, keine Neonverläufe. Verwenden Sie absolute neutrale Basen (Zinc/Slate) mit kontrastreichen, singulären Akzenten (z. B. Smaragd, Elektrisches Blau oder Tiefes Rosa).
• FARBKONSISTENZ: Bleiben Sie für die gesamte Ausgabe bei einer Palette. Schwanken Sie nicht zwischen warmen und kühlen Grautönen innerhalb desselben Projekts.

Regel 3: Layout-Diversifizierung

• ANTI-ZENTRIERUNGS-BIAS: Zentrierte Hero/H1-Abschnitte sind strengstens VERBOTEN, wenn DESIGN_VARIANCE > 4. Erzwingen Sie "Split Screen" (50/50), "Linksbündiger Inhalt/Rechtsbündige Darstellung" 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-Gruppierungen via border-t, divide-y oder rein negativen Raum. Datenmetriken sollten atmen können, ohne eingeengt zu sein, es sei denn, eine Erhöhung (z-index) ist funktional erforderlich.
• Ausführung: Verwenden Sie Karten NUR, wenn die Erhöhung Hierarchie kommuniziert. Wenn ein Schatten verwendet wird, färben Sie ihn in den Hintergrundton.

Regel 5: Interaktive UI-Zustände

• Obligatorische Generierung: LLMs generieren natürlicherweise "statische" Erfolgszustände. Sie MÜSSEN vollständige Interaktionszyklen implementieren:
  • Laden: Skelett-Ladeanimationen, die den Layoutgrößen entsprechen (vermeiden Sie generische kreisförmige Spinner).
  • Leerzustände: Schön gestaltete Leerzustände, die darauf hinweisen, wie Daten befüllt werden können.
  • Fehlerzustände: Klare, inline Fehlerberichte (z. B., Formulare).
  • Taktiles Feedback: Verwenden Sie bei :active -translate-y-[1px] oder scale-[0.98], um einen physischen Druck zu simulieren, der Erfolg/Aktion anzeigt.

Regel 6: Daten- & Formularmuster

• Formulare: Das Label MUSS über dem Eingabefeld sitzen. Hilfstext ist optional, sollte aber im Markup vorhanden sein. Fehlertext unterhalb der Eingabe. Verwenden Sie einen standardmäßigen gap-2-Abstand für Eingabeblöcke.

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

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

• "Flüssigglas"-Refraktion: Wenn Glasphismus benötigt wird, gehen Sie über backdrop-blur hinaus. Fügen Sie einen 1px inneren Rand (border-white/10) und einen dezenten inneren Schatten (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) hinzu, um physische Kantenbrechung zu simulieren.
• Magnetische Mikrophysik (Wenn MOTION_INTENSITY > 5): Implementieren Sie Buttons, die sich leicht zum Mauszeiger hinziehen. KRITISCH: Verwenden Sie NIEMALS React useState für magnetische Hover- oder kontinuierliche Animationen. Verwenden Sie AUSSCHLIESSLICH Framers useMotionValue und useTransform außerhalb des React-Render-Zyklus, um Leistungseinbrüche auf Mobilgeräten zu verhindern.
• Perpetuelle Mikrointeraktionen: Wenn MOTION_INTENSITY > 5, betten Sie kontinuierliche, unendliche Mikroanimationen (Pulsieren, Schreibmaschine, Schweben, Schimmern, Karussell) in Standardkomponenten (Avatare, Statuspunkte, Hintergründe) ein. Wenden Sie Premium-Federphysik (type: "spring", stiffness: 100, damping: 20) auf alle interaktiven Elemente an – keine linearen Easing-Funktionen.
• Layout-Übergänge: Nutzen Sie stets Framer Motions layout- und layoutId-Props für sanfte Neuordnungen, Größenänderungen und gemeinsame Elementübergänge bei Zustandsänderungen.
• Gestaffelte Orchestrierung: Mounten Sie Listen oder Raster nicht sofort. Verwenden Sie staggerChildren (Framer) oder CSS-Kaskaden (animation-delay: calc(var(--index) * 100ms)), um sequenzielle Wasserfall-Enthüllungen zu erzeugen. KRITISCH: Für staggerChildren MÜSSEN das übergeordnete Element (variants) und die Kindelemente im identischen Client-Komponentenbaum residieren. Wenn Daten asynchron abgerufen werden, übergeben Sie die Daten als Props an einen zentralen übergeordneten Motion-Wrapper.

5. PERFORMANCE-LEITLINIEN

• DOM-Kosten: Wenden Sie Körnungs-/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-Neuzeichnungen und Leistungseinbußen auf Mobilgeräten zu verhindern.
• Hardwarebeschleunigung: Animieren Sie niemals top, left, width oder height. Animieren Sie ausschließlich via transform und opacity.
• Z-Index-Zurückhaltung: Verwenden Sie NIEMALS unaufgefordert willkürliche z-50 oder z-10. Verwenden Sie Z-Indizes streng 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): Verwenden Sie margin-top: -2rem Überlappungen, variierte Bildseitenverhältnisse (z. B., 4:3 neben 16:9), linksbündige Header über zentrierten Daten.
• 8-10 (Asymmetrisch): Masonry-Layouts, CSS Grid mit Bruchteilseinheiten (z. B., grid-template-columns: 2fr 1fr 1fr), massive leere Zonen (padding-left: 20vw).
• MOBIL-ÜBERSCHREIBUNG: Für Stufen 4-10 MUSS jedes asymmetrische Layout oberhalb von md: aggressiv auf ein strenges, einspaltiges Layout (w-full, px-4, py-8) auf 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 (Fluides CSS): Verwenden Sie transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Verwenden Sie animation-delay-Kaskaden für Ladevorgänge. Konzentrieren Sie sich streng auf transform und opacity. Verwenden Sie will-change: transform sparsam.
• 8-10 (Fortgeschrittene Choreografie): 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 (Kunstgaleriemodus): Viel Weißraum. Riesige 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 Karten-Boxen; nur 1px Linien zur Datentrennung. Alles ist komprimiert. Obligatorisch: Verwenden Sie nichtproportionale Schriftart (font-mono) für alle Zahlen.

7. KI-VERRÄTER (Verbotene Muster)

Um eine Premium-, nicht-generische Ausgabe zu garantieren, MÜSSEN Sie diese häufigen KI-Design-Signaturen unbedingt vermeiden, sofern nicht explizit angefordert:

Visuell & CSS

• KEINE Neon-/Außenglow-Effekte: Verwenden Sie keine standardmäßigen box-shadow-Glow- oder Auto-Glow-Effekte. Verwenden Sie innere Ränder oder dezent getönte Schatten.
• KEIN Reines Schwarz: Verwenden Sie niemals #000000. Verwenden Sie Off-Black, Zinc-950 oder Holzkohle.
• KEINE Übersättigten Akzente: Entsättigen Sie Akzente, um elegant mit Neutraltönen zu harmonieren.
• KEIN Übermäßiger Gradiententext: Verwenden Sie keine Text-Fill-Verläufe für große Header.
• KEINE Benutzerdefinierten Mauszeiger: Sie sind veraltet und beeinträchtigen Leistung/Barrierefreiheit.

Typografie

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

Layout & Abstände

• Perfekt ausrichten & abstimmen: Stellen Sie sicher, dass Innen- und Außenabstände mathematisch perfekt sind. Vermeiden Sie schwebende Elemente mit ungeraden Abständen.
• KEIN 3-Spaltiges Kartenlayout: Die generische "3 gleiche Karten horizontal"-Feature-Reihe ist VERBOTEN. Verwenden Sie 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. Verwenden Sie höchst kreative, realistisch klingende Namen.
• KEINE Generischen Avatare: Verwenden Sie KEINE Standard-SVG-"Eier" oder Lucide-Benutzersymbole für Avatare. Verwenden Sie kreative, glaubwürdige Fotoplatzhalter oder spezifisches Styling.
• KEINE Gefälschten Zahlen: Vermeiden Sie vorhersagbare Ausgaben wie 99.99%, 50% oder grundlegende Telefonnummern (1234567). Verwenden Sie organische, unordentliche Daten (47.2%, +1 (312) 847-1928).
• KEINE Startup-Schludernamen: "Acme", "Nexus", "SmartFlow". Erfinden Sie Premium-, kontextuelle 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/{random_string}/800/600 oder SVG-UI-Avatare.
• shadcn/ui-Anpassung: Sie dürfen shadcn/ui verwenden, aber NIEMALS im generischen Standardzustand. Sie MÜSSEN Radien, Farben und Schatten anpassen, um der hochwertigen Projektästhetik zu entsprechen.
• Produktionsreife Sauberkeit: Der Code muss extrem sauber, optisch auffällig, einprägsam und in jedem Detail sorgfältig verfeinert sein.

8. DIE KREATIVE WAFFENKAMMER (High-End-Inspiration)

Standardisieren Sie nicht auf generische UI. Greifen Sie auf diese Bibliothek fortschrittlicher Konzepte zurück, um sicherzustellen, dass die Ausgabe optisch auffällig und einprägsam ist. Nutzen Sie gegebenenfalls GSAP (ScrollTrigger/Parallax) für komplexe Scroll-Telling-Animationen oder ThreeJS/WebGL für 3D/Canvas-Animationen, anstelle von einfachen CSS-Bewegungen. KRITISCH: Mischen Sie GSAP/ThreeJS niemals mit Framer Motion im selben Komponentenbaum. Standardisieren Sie auf Framer Motion für UI-/Bento-Interaktionen. Verwenden Sie GSAP/ThreeJS AUSSCHLIESSLICH für isolierte, vollseitige Scroll-Telling- oder Canvas-Hintergründe, eingebettet in strikte useEffect-Bereinigungsblöcke.

Das Standard-Hero-Paradigma

• Hören Sie auf, zentrierten Text über einem dunklen Bild zu platzieren. Versuchen Sie es mit asymmetrischen Hero-Abschnitten: Text sauber links oder rechts ausgerichtet. Der Hintergrund sollte ein hochwertiges, relevantes Bild mit einem dezenten stilistischen Verblassen enthalten (das Bild abdunkelnd oder aufhellend, je nachdem, ob es sich um den Hell- oder Dunkelmodus handelt).

Navigation & Menüs

• Mac OS Dock-Vergrößerung: Nav-Leiste am Rand; Symbole skalieren fließend bei Hover.
• Magnetischer Button: Buttons, die sich physisch zum Cursor hinziehen.
• Gooey Menü: Unterelemente lösen sich wie eine zähflüssige Flüssigkeit vom Hauptbutton.
• Dynamic Island: Eine pillenförmige UI-Komponente, die ihre Form ändert, um Status/Alarme anzuzeigen.
• Kontextuelles Radialmenü: Ein kreisförmiges Menü, das genau an den Klickkoordinaten erscheint.
• Floating Speed Dial: Ein FAB, das in einer geschwungenen Linie von Sekundäraktionen hervorspringt.
• Mega Menu Reveal: Vollbild-Dropdowns, die komplexe Inhalte gestaffelt einblenden.

Layout & Raster

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

[Aus Platzgründen abgeschnitten]