High-Agency Frontend Skill

Was macht 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=Piloten cockpit/Datenreich)

KI-Anweisung: Die Standard-Baseline für alle Generierungen ist strikt auf diese Werte (8, 6, 4) festgelegt. Fordere den Benutzer nicht auf, diese Datei zu bearbeiten. Höre ansonsten 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.

SPRACHERHALT [KRITISCH]: Du MUSST die Originalsprache des Benutzerprojekts bewahren. Wenn die vorhandene Codebasis Chinesisch (中文) für UI-Texte, Labels, Überschriften, Beschreibungen oder andere benutzerorientierte Inhalte verwendet, MUSST du alle Inhalte auf Chinesisch belassen. Ersetze oder übersetze NIEMALS vorhandene chinesische Texte ins Englische. Diese Regel gilt für den gesamten generierten Code, einschließlich neuer Komponenten, Seiten und Änderungen an vorhandenen Dateien.

2. STANDARD-ARCHITEKTUR & KONVENTIONEN

Sofern der Benutzer nicht explizit einen anderen Stack angibt, halte dich an diese strukturellen Einschränkungen, um Konsistenz zu wahren:

• ABHÄNGIGKEITSÜBERPRÜFUNG [OBLIGATORISCH]: Bevor du EINE DRITTBIBLIOTHEK (z. B. framer-motion, lucide-react, zustand) importierst, MUSST du package.json überprüfen. Wenn das Paket fehlt, MUSST du den Installationsbefehl ausgeben (z. B. npm install package-name), 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 Status funktioniert NUR in Client Components. Wickle in Next.js Provider in eine "use client"-Komponente ein.
  • INTERAKTIVITÄTSISOLIERUNG: Wenn die Abschnitte 4 oder 7 (Motion/Liquid Glass) aktiv sind, MUSS die spezifische interaktive UI-Komponente als isolierte Leaf-Komponente mit 'use client' ganz oben extrahiert werden. Server Components müssen ausschließlich statische Layouts rendern.
• State Management: Verwende lokales useState/useReducer für isolierte UI. Verwende globalen Status streng zur Vermeidung von tiefem Prop Drilling.
• Styling-Richtlinie: Verwende Tailwind CSS (v3/v4) für 90% des Stylings.
  • TAILWIND VERSION LOCK: Überprüfe zuerst package.json. Verwende in v3-Projekten keine v4-Syntax.
  • T4 KONFIGURATIONSGUARD: Verwende für v4 das tailwindcss-Plugin NICHT 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).
  • Begrenze Seitenlayouts mit max-w-[1400px] mx-auto oder max-w-7xl.
  • Ansichtsfenstestabilität [KRITISCH]: Verwende NIEMALS h-screen für Hero-Bereiche in voller Höhe. 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-Prozentrechnungen (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 (überprüfe die installierte Version). Standardisiere strokeWidth global (z. B. ausschließlich 1.5 oder 2.0).

3. DESIGN ENGINEERING RICHTLINIEN (Bias-Korrektur)

LLMs haben statistische Verzerrungen hin zu bestimmten UI-Klischeemustern. Proaktive Konstruktion von Premium-Oberflächen unter Verwendung dieser technischen Regeln:

Regel 1: Deterministische Typografie

• Display/Überschriften: Standardmäßig text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-SCHLUDER: 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 für diese Kontexte 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%.
• DER LILA-BAN: Die "KI-Lila/Blau"-Ästhetik ist strengstens VERBOTEN. Keine lila Button-Glows, keine Neon-Verläufe. Verwende absolute neutrale Basen (Zinc/Slate) mit hochkontrastreichen, 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-ZENTRIER-BIAS: Zentrierte Hero/H1-Abschnitte sind strengstens VERBOTEN, wenn LAYOUT_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-Overuse"

• DASHBOARD-HÄRTUNG: Für VISUAL_DENSITY > 7 sind generische Card-Container strengstens VERBOTEN. Verwende Logik-Gruppierung mittels border-t, divide-y oder reinem Negativraum. Datenmetriken sollten atmen, ohne eingeengt zu sein, es sei denn, ein Höhenversatz (z-index) ist funktional erforderlich.
• Ausführung: Verwende Cards NUR, wenn Höhenversatz Hierarchie kommuniziert. Wenn ein Schatten verwendet wird, töne ihn an den Hintergrundfarbton an.

Regel 5: Interaktive UI-Zustände

• Obligatorische Generierung: LLMs generieren natürlicherweise "statische" Erfolgszustände. Du MUSST vollständige Interaktionszyklen implementieren:
  • Laden: Skeleton-Ladebildschirme, die den Layoutgrößen entsprechen (vermeide generische kreisförmige Spinner).
  • Leere Zustände: Schön gestaltete leere Zustände, die anzeigen, wie Daten befüllt werden.
  • Fehlerzustände: Klare, inline Fehlermeldungen (z. B. Formulare).
  • Haptisches Feedback: Verwende bei :active -translate-y-[1px] oder scale-[0.98], um einen physischen Tastendruck zu simulieren, der Erfolg/Aktion anzeigt.

Regel 6: Daten- & Formularmuster

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

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

Um generischen KI-Designs aktiv entgegenzuwirken, implementiere diese High-End-Coding-Konzepte systematisch als deine Basis:

• "Liquid Glass"-Refraktion: Wenn Glasform benötigt wird, gehe über backdrop-blur hinaus. Füge einen 1px inneren Rahmen (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 Mikro-Physik (Wenn MOTION_INTENSITY > 5): Implementiere Buttons, die sich leicht zum Mauszeiger hin ziehen. KRITISCH: Verwende NIEMALS React useState für magnetisches Hover oder kontinuierliche Animationen. Verwende AUSSCHLIESSLICH Framer Motions useMotionValue und useTransform außerhalb des React-Render-Zyklus, um Leistungseinbrüche auf mobilen Geräten zu verhindern.
• Perpetuelle Mikro-Interaktionen: Wenn MOTION_INTENSITY > 5, bette kontinuierliche, unendliche Mikro-Animationen (Pulsieren, Typewriter, Schweben, Schimmern, Karussell) in Standardkomponenten (Avatare, Statuspunkte, Hintergründe) ein. Wende Premium Spring Physics (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 gemeinsame Elementübergänge bei Zustandsänderungen.
• Gestaffelte Orchestrierung: Mounte Listen oder Grids nicht sofort. 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 Parent (variants) und die Children im identischen Client Component-Baum residieren. Wenn Daten asynchron abgerufen werden, übergib die Daten als Props an einen zentralisierten Parent Motion Wrapper.

5. LEISTUNGS-SCHUTZBARRIEREN

• DOM-Kosten: Wende Korn-/Rauschfilter ausschließlich auf feste, 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 mobilen Geräten zu verhindern.
• Hardwarebeschleunigung: Animiere niemals top, left, width oder height. Animiere ausschließlich über transform und opacity.
• Z-Index-Zurückhaltung: Sprenge NIEMALS unaufgefordert willkürliche z-50 oder z-10. Verwende Z-Indizes streng für systemische Ebenenkontexte (Sticky Navbars, Modals, Overlays).

6. TECHNISCHE REFERENZ (Wählscheiben-Definitionen)

DESIGN_VARIANCE (Stufe 1-10)

• 1-3 (Vorhersehbar): Flexbox justify-center, strenge 12-spaltige symmetrische Grids, gleiche Abstände.
• 4-7 (Versetzt): Verwende margin-top: -2rem überlappend, variierte Bildseitenverhältnisse (z. B. 4:3 neben 16:9), linksbündige Header über zentrierten Daten.
• 8-10 (Asymmetrisch): Masonry-Layouts, CSS Grid mit Bruchteileinheiten (z. B. grid-template-columns: 2fr 1fr 1fr), massive leere Zonen (padding-left: 20vw).
• MOBILE ÜBERSCHREIBUNG: Für die Stufen 4-10 MUSS jedes asymmetrische Layout oberhalb von md: auf Ansichtsfenstern < 768px aggressiv auf ein strenges, einspaltiges Layout (w-full, px-4, py-8) 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): Verwende transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Verwende animation-delay-Kaskaden für Lade-Effekte. Konzentriere dich streng auf transform und opacity. Verwende will-change: transform sparsam.
• 8-10 (Fortgeschrittene Choreographie): Komplexe scroll-getriggerte 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. 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 Abstände. Keine Card-Boxen; nur 1px Linien zur Datentrennung. Alles ist dicht gepackt. Obligatorisch: Verwende Monospace (font-mono) für alle Zahlen.

7. DIE 100 KI-ANZEICHEN (Verbotene Muster)

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

Visuell & CSS

• KEINE Neon-/Außenglows: Verwende keine standardmäßigen box-shadow-Glows oder Auto-Glows. Verwende innere Rahmen oder dezente getönte Schatten.
• KEIN Reines Schwarz: Verwende niemals #000000. Verwende Off-Black, Zinc-950 oder Charcoal.
• KEINE Übersättigten Akzente: Entsättige Akzente, um elegant mit Neutraltönen zu verschmelzen.
• KEINE Übermäßigen Gradiententexte: Verwende keine Textfüll-Verläufe für große Header.
• KEINE Benutzerdefinierten Mauszeiger: Sie sind veraltet und beeinträchtigen Leistung/Barrierefreiheit.

Typografie

• KEIN Inter Font: Verboten. Verwende Geist, Outfit, Cabinet Grotesk oder Satoshi.
• KEINE Überdimensionalen 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/redaktionelle Designs. NIEMALS Serifen in sauberen Dashboards verwenden.

Layout & Abstände

• Perfekt Ausrichten & Abstände: Stelle sicher, dass Abstände und Ränder mathematisch perfekt sind. Vermeide schwebende Elemente mit unpassenden Lücken.
• KEINE 3-Spaltigen Card-Layouts: Die generische "3 gleiche Cards horizontal" Feature-Zeile ist VERBOTEN. Verwende stattdessen einen 2-spaltigen Zick-Zack, ein asymmetrisches Grid 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-Benutzersymbole für Avatare. Verwende kreative, glaubwürdige Foto-Platzhalter oder spezifisches Styling.
• KEINE Gefälschten Zahlen: Vermeide vorhersehbare Ausgaben wie 99,99%, 50% oder grundlegende Telefonnummern (1234567). Verwende organische, unordentliche Daten (47,2%, +1 (312) 847-1928).
• KEINE Start-up-Slop-Namen: "Acme", "Nexus", "SmartFlow". Erfinde hochwertige, kontextbezogene Markennamen.
• KEINE Füllwörter: Vermeide KI-Text-Klischees wie "Elevieren", "Nahtlos", "Entfesseln" 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: Code muss extrem sauber, visuell auffällig, einprägsam und in jedem Detail sorgfältig verfeinert sein.

8. DAS KREATIVE ARSENAL (High-End-Inspiration)

Verwende nicht standardmäßige generische UI. Schöpfe aus dieser Bibliothek fortschrittlicher Konzepte, um sicherzustellen, dass die Ausgabe visuell auffällig und einprägsam ist. Nutze bei Bedarf GSAP (ScrollTrigger/Parallaxe) für komplexes Scroll-Telling oder ThreeJS/WebGL für 3D/Canvas-Animationen, anstatt grundlegender CSS-Bewegung. KRITISCH: Mische GSAP/ThreeJS NIEMALS mit Framer Motion im selben Komponentenbaum. Verwende standardmäßig Framer Motion für UI-/Bento-Interaktionen. Verwende GSAP/ThreeJS AUSSCHLIESSLICH für isoliertes, ganzseitiges Scroll-Telling oder Canvas-Hintergründe, verpackt in strikten useEffect-Aufräumblöcken.

Das Standard-Hero-Paradigma

• Höre auf, zentrierten Text über einem dunklen Bild zu platzieren. Probiere asymmetrische Hero-Abschnitte: Text sauber links oder rechts ausgerichtet. Der Hintergrund sollte ein qualitativ hochwertiges, relevantes Bild mit einer dezenten stilistischen Überblendung (Verdunkelung oder Aufhellung, die anmutig in die Hintergrundfarbe übergeht, je nachdem, ob es sich um den Hell- oder Dunkelmodus handelt) aufweisen.

Navigation & Menüs

• Mac OS Dock Vergrößerung: Navigationsleiste am Rand; Symbole skalieren fließend beim Hover.
• Magnetischer Button: Buttons, die sich physisch zum Cursor hin ziehen.
• Klebriges Menü: Unterelemente lösen sich wie eine zähflüssige Flüssigkeit vom Haupt-Button.
• Dynamic Island: Eine pillenförmige UI-Komponente, die ihre Form ändert, um Status/Alarme anzuzeigen.
• Kontextuelles Radialmenü: Ein kreisförmiges Menü, das sich genau an der Klickposition ausdehnt

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