moulkefta/Claude-Skills

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/Datenvoll)

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 seinen expliziten Anforderungen in den Chat-Prompts an. Verwenden Sie diese Baseline (oder 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 nicht explizit einen anderen Stack angibt, halten Sie sich zur Wahrung der Konsistenz an diese strukturellen Einschränkungen:

• ABHÄNGIGKEITSÜBERPRÜFUNG [OBLIGATORISCH]: Bevor Sie EINE Drittanbieter-Bibliothek importieren (z.B. framer-motion, lucide-react, zustand), MÜSSEN Sie package.json überprüfen. Falls 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 Server-Komponenten (RSC).
  • RSC-SICHERHEIT: Globaler Status funktioniert NUR in Client-Komponenten. In Next.js umschließen Sie Provider mit einer "use client"-Komponente.
  • INTERAKTIVITÄTS-ISOLIERUNG: 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-Komponenten dürfen ausschließlich statische Layouts rendern.
• State-Verwaltung: Verwenden Sie lokales useState/useReducer für isolierte UI. Verwenden Sie globalen Status streng zur Vermeidung von tiefem Prop Drilling.
• Styling-Richtlinie: Verwenden Sie Tailwind CSS (v3/v4) für 90% des Stylings.
  • TAILWIND VERSION LOCK: Überprüfen Sie zuerst package.json. Verwenden Sie in v3-Projekten keine v4-Syntax.
  • T4 KONFIGURATIONS-SCHUTZ: Verwenden Sie für v4 NICHT das tailwindcss-Plugin in postcss.config.js. Verwenden Sie @tailwindcss/postcss oder das Vite-Plugin.
• ANTI-EMOJI-POLITIK [KRITISCH]: Verwenden Sie NIEMALS Emojis in Code, Markup, Textinhalten oder Alt-Text. 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 full-height 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-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 (installierte Version prüfen). Standardisieren Sie strokeWidth global (z.B. ausschließlich 1.5 oder 2.0).

3. DESIGN-ENGINEERING-RICHTLINIEN (Voreingenommenheitskorrektur)

LLMs haben statistische Voreingenommenheiten gegenüber bestimmten UI-Klischee-Mustern. Erstellen 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-SLOP: Vermeiden 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 streng VERBOTEN. Verwenden Sie 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 streng 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: Halten Sie sich für die gesamte Ausgabe an eine 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 streng 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 streng VERBOTEN. Verwenden Sie logische Gruppierung via border-t, divide-y oder rein negativen Raum. Datenmetriken sollten atmen, ohne eingerahmt zu sein, es sei denn, eine Erhöhung (z-index) ist funktional erforderlich.
• Ausführung: Verwenden Sie Karten NUR, wenn Erhöhung Hierarchie vermittelt. Wenn ein Schatten verwendet wird, tönen Sie ihn dem Hintergrundton an.

Regel 5: Interaktive UI-Zustände

• Pflichtgenerierung: LLMs generieren natürlicherweise "statische" Erfolgszustände. Sie MÜSSEN vollständige Interaktionszyklen implementieren:
  • Laden: Skelett-Ladegeräte, die den Layout-Größen entsprechen (vermeiden Sie 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).
  • Taktiles 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- & Formularmuster

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

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

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

• "Flüssigglas"-Refraktion: Wenn Glasfluss 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 physikalische Kantenbrechung zu simulieren.
• Magnetische Mikrophysik (Wenn MOTION_INTENSITY > 5): Implementieren Sie Buttons, die sich leicht in Richtung des Mauszeigers bewegen. KRITISCH: Verwenden Sie NIEMALS React useState für magnetischen Hover oder kontinuierliche Animationen. Verwenden Sie AUSSCHLIESSLICH Framer Motions useMotionValue und useTransform außerhalb des React-Render-Zyklus, um Leistungseinbrüche auf Mobilgeräten zu verhindern.
• Dauerhafte Mikro-Interaktionen: Wenn MOTION_INTENSITY > 5, betten Sie kontinuierliche, unendliche Mikroanimationen (Puls, Schreibmaschine, Float, Schimmer, Karussell) in Standardkomponenten (Avatare, Statuspunkte, Hintergründe) ein. Wenden Sie Premium-Feder-Physik (type: "spring", stiffness: 100, damping: 20) auf alle interaktiven Elemente an – kein lineares Easing.
• Layout-Übergänge: Nutzen Sie immer die layout- und layoutId-Props von Framer Motion für sanfte Neuordnungen, Größenänderungen und gemeinsame Elementübergänge bei Zustandsänderungen.
• Gestaffelte Orchestrierung: Mounten Sie Listen oder Grids nicht sofort. Verwenden Sie staggerChildren (Framer) oder CSS-Kaskade (animation-delay: calc(var(--index) * 100ms)), um sequenzielle Wasserfall-Enthüllungen zu erstellen. KRITISCH: Für staggerChildren MÜSSEN das Elternelement (variants) und die Kinder im identischen Client-Komponentenbaum residieren. Wenn Daten asynchron abgerufen werden, übergeben Sie die Daten als Props an einen zentralisierten Parent Motion-Wrapper.

5. LEISTUNGSSCHUTZ

• DOM-Kosten: Wenden Sie Körnungs-/Rauschfilter ausschließlich auf fixierte, pointer-event-none-Pseudoelemente an (z.B. fixed inset-0 z-50 pointer-events-none) und NIEMALS auf scrollende Container, um kontinuierliche GPU-Neuzeichnungen und Leistungsverschlechterung 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ürliches 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 Grids, gleiche Abstände.
• 4-7 (Versetzt): Verwenden Sie margin-top: -2rem überlappend, variierende Bildseitenverhältnisse (z.B. 4:3 neben 16:9), linksbündige Überschriften über zentrierten Daten.
• 8-10 (Asymmetrisch): Masonry-Layouts, CSS Grid mit Brucheinheiten (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: auf Viewports < 768px aggressiv auf ein strenges, einspaltiges Layout zurückfallen (w-full, px-4, py-8), 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): 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 Parallax. 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): Kleine Abstände. Keine Kartenboxen; nur 1px Linien zur Datentrennung. Alles ist dicht gepackt. Obligatorisch: Verwenden Sie nichtproportionale Schrift (font-mono) für alle Zahlen.

7. KI-VERRÄTER (Verbotene Muster)

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

Visuell & CSS

• KEINE Neon-/äußeren Glüheffekte: Verwenden Sie keine standardmäßigen box-shadow-Glüheffekte oder automatischen Glüheffekte. Verwenden Sie innere Ränder oder subtile 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 Textfüllverläufe für große Überschriften.
• KEINE benutzerdefinierten Mauszeiger: Sie sind veraltet und beeinträchtigen Leistung/Barrierefreiheit.

Typografie

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

Layout & Abstände

• Perfekt ausrichten & Abstände: Stellen Sie sicher, dass Abstände und Ränder mathematisch perfekt sind. Vermeiden Sie schwebende Elemente mit ungünstigen Lücken.
• KEINE 3-Spalten-Kartenlayouts: Die generische "3 gleiche Karten horizontal"-Feature-Reihe ist VERBOTEN. Verwenden Sie stattdessen einen 2-spaltigen Zickzack, ein asymmetrisches Grid oder einen horizontalen Scrollansatz.

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 NICHT die standardmäßigen SVG-"Ei"- oder Lucide-Benutzersymbole für Avatare. Verwenden Sie kreative, glaubwürdige Foto-Platzhalter oder spezifisches Styling.
• KEINE erfundenen Zahlen: Vermeiden Sie vorhersehbare Ausgaben wie 99,99%, 50% oder grundlegende Telefonnummern (1234567). Verwenden Sie organische, unordentliche Daten (47,2%, +1 (312) 847-1928).
• KEINE Startup-Slop-Namen: "Acme", "Nexus", "SmartFlow". Erfinden Sie hochwertige, kontextbezogene Markennamen.
• KEINE Füllwörter: Vermeiden Sie KI-Text-Klischees wie "Elevieren", "Nahtlos", "Entfesseln" 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 Avatars.
• 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 hochwertige Projektästhetik anpassen.
• Produktionsreife Sauberkeit: Code muss extrem sauber, visuell beeindruckend, einprägsam und in jedem Detail sorgfältig verfeinert sein.

8. DAS KREATIVE ARSENAL (Hochwertige Inspiration)

Kehren Sie nicht zu generischer UI zurück. Schöpfen Sie aus dieser Bibliothek fortschrittlicher Konzepte, um sicherzustellen, dass die Ausgabe visuell beeindruckend und einprägsam ist. Nutzen Sie bei Bedarf GSAP (ScrollTrigger/Parallax) für komplexes Scrolltelling oder ThreeJS/WebGL für 3D/Canvas-Animationen, anstatt grundlegender CSS-Bewegung. 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 AUSSCHLIESSLICH für isoliertes, seitenfüllendes Scrolltelling oder Canvas-Hintergründe, eingewickelt in strikte useEffect-Bereinigungsblö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 (abdunkeln oder aufhellen elegant in die Hintergrundfarbe, je nach Hell- oder Dunkelmodus) 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 bewegen.
• Klebriges Menü: Unterelemente lösen sich wie eine zähflüssige Flüssigkeit vom Hauptbutton.
• Dynamische Insel: Eine pillenförmige UI-Komponente, die sich verformt, um Status/Alarme anzuzeigen.
• Kontextuelles Radialmenü: Ein kreisförmiges Menü, das sich genau an den Klickkoordinaten ausdehnt.
• Schwebender Speed-Dial: Ein FAB, der zu einer gekrümmten Linie sekundärer Aktionen herausfedert.
• Mega-Menü-Enthüllung: Vollbild-Dropdowns, die komplexe Inhalte gestaffelt einblenden.

Layout & Grids

• Bento Grid: Asymmetrische, kachelbasierte Gruppierung (z.B. Apple Control Center).
• Masonry-Layout: Gestaffeltes Grid ohne feste Zeilenhöhen (z.B. Pinterest).
• Chroma Grid: Grid-Ränder oder Kacheln, die subtile, kontinuierliche …

[abgeschnitten für Übersetzung]