hakushiidev/claude-skills

Dieses Skill leitet die Erstellung unverwechselbarer, produktionsreifer Frontend-Oberflächen. Implementiere echten, funktionierenden Code mit außergewöhnlicher Liebe zum ästhetischen Detail.

Beispielaufforderungen

• "Erstelle den Hero-Bereich aus dem Briefing"
• "Erstelle eine Kartenkomponente im skandinavischen Stil"
• "Ich möchte, dass sich das wie ein japanisches Magazin anfühlt. Baue das Layout."
• "Baue die Einstellungsseite. Verwende den Stil, der passt."

Bevor Du Code Schreibst

1. Erkunde die vorhandene Codebasis zuerst. Scanne speziell nach:

   • Komponentenverzeichnissen: components/, ui/, shared/ und liste jede Komponente mit Namen und ihrer Props/API auf
   • CSS-Variablen / Tokens: Dateien mit den Namen tokens.css, variables.css, theme.css oder :root-Deklarationen mit benutzerdefinierten Eigenschaften
   • Tailwind-Konfiguration: tailwind.config.js oder tailwind.config.ts, überprüfe theme.extend auf benutzerdefinierte Werte
   • UI-Framework-Designs: Material UI createTheme, Chakra extendTheme, shadcn globals.css und components.json
   • Storybook: .storybook/-Verzeichnis oder *.stories.*-Dateien, die dokumentierte Komponenten anzeigen
   • Schriftarten laden: Google Fonts-Links, @font-face-Deklarationen, Schriftimporte
   • Layout-Muster: wie bestehende Seiten mit Grid, Containern, Breakpoints und Abständen umgehen
   • Package.json UI-Abhängigkeiten: tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion, etc.
   • Wenn Komponenten existieren, die dem entsprechen, was du bauen musst, erweitere oder kombiniere sie. Erstelle keine Duplikate.

2. Verstehe den Kontext:

   • Welches Problem löst diese Oberfläche? Wer nutzt sie?
   • Was ist der beabsichtigte emotionale Ton?
   • Was sind die harten Einschränkungen (Framework, Geräte, Leistung, Barrierefreiheit)?

3. Lege eine ästhetische Richtung fest. Entweder der Benutzer nennt eine (siehe Philosophien unten) oder du wählst eine, die zum Kontext passt. Gib deine Wahl und den Grund an, bevor du Code schreibst.

Ästhetische Philosophien

Wenn der Benutzer eine Philosophie nennt oder eine Stimmung beschreibt, verwende diese als konkrete Implementierungsleitfäden. Jede Philosophie definiert Typografie, Farbe, Layout, Abstände, Animation und Detailbehandlung.

Dieter Rams (Funktionalist)

Weniger, aber besser. Jedes Element verdient seinen Platz. Nichts Dekoratives ohne Funktion.

• Typografie: Saubere serifenlose Schriften (Helvetica Neue, Suisse Intl, Akkurat). Enge Buchstabenabstände bei Überschriften. Großzügige Zeilenhöhe beim Fließtext. Eine Größenskala, streng angewendet.
• Farbe: Zurückhaltend. Monochromatisch mit einem einzigen funktionalen Akzent. Weiße oder helle graue Hintergründe. Farbe ist Information, keine Dekoration.
• Layout: Strenges Raster. Klare funktionale Hierarchie. Komponenten, die an einem räumlichen System ausgerichtet sind. Keine Asymmetrie um ihrer selbst willen.
• Abstände: Konsistente, mathematische Skala (4px/8px Basis). Großzügige Abstände. Atempausen zwischen Elementen.
• Animation: Minimal. Nur zweckmäßige Übergänge (Zustandsänderungen, Einblendungen). Keine dekorativen Animationen.
• Details: Dezente Ränder und Trennlinien statt Schatten. Präzise Ausrichtung. Abgerundete Ecken sparsam und konsistent eingesetzt.

Schweizer / Internationale Typografik

Objektivität durch Struktur. Das Raster ist heilig. Der Inhalt ist König.

• Typografie: Starke serifenlose Schriften (Neue Haas Grotesk, Univers, Aktiv Grotesk). Dramatischer Größenkontrast zwischen Überschriften und Fließtext. Versalien-Unterüberschriften mit großzügigem Buchstabenabstand.
• Farbe: Hoher Kontrast. Schwarz, Weiß und eine Primärfarbe. Kühne Farbblöcke als kompositorische Elemente.
• Layout: Starres mehrspaltiges Raster. Asymmetrisches Gleichgewicht. Text und Bild im Dialog. Ausrichtung über Elemente hinweg ist nicht verhandelbar.
• Abstände: Vom Rastermodul definiert. Rinnen sind Teil des Designs, kein nachträglicher Einfall.
• Animation: Seitenübergänge und scrollausgelöste Einblendungen, die das Raster respektieren. Kein verspieltes Hüpfen.
• Details: Linien (horizontale Linien) als strukturelle Elemente. Keine Verläufe. Keine Schatten. Flachheit ist der Punkt.

Japanischer Minimalismus (Ma)

Negativraum ist Inhalt. Zurückhaltung kommuniziert Raffinesse. Leise statt laut.

• Typografie: Dünne serifenlose oder elegante Serifenschriften (Noto Sans, Cormorant). Großzügige Zeilenhöhe (1.8-2.0). Kleine Textgröße mit großen Weißraumrändern.
• Farbe: Gedämpfte Naturtöne (warme Grautöne, Stein, Salbei, Washi). Subtile Tonverschiebungen statt harter Kontraste. Nahezu monochrom.
• Layout: Asymmetrisch, aber ausgewogen. Außermittiger Inhalt. Große leere Bereiche sind beabsichtigt. Inhalt schwebt im Raum.
• Abstände: Extrem viel Weißraum. Abstände und Ränder sind 2-3x größer als „normal". Elemente atmen.
• Animation: Langsame, sanfte Einblendungen (400-600ms). Kein Hüpfen, kein Überschwingen. Deckkraftübergänge vor Positionsverschiebungen.
• Details: Haarfeine Ränder. Subtile Textur (Papierkörnung, Leinen). Keine scharfen Schatten. Sanfte, diffuse Effekte.

Brutalistisch / Roh

Struktur ist sichtbar. Keine Politur. Anti-Ästhetik ist die Ästhetik.

• Typografie: Systemschriften, Monospace (JetBrains Mono, IBM Plex Mono, Courier) oder aggressive Auszeichnungsschriften. Gemischte Größen. Text als Textur.
• Farbe: Primär Schwarz und Weiß. Wenn Farbe, dann roh und krachend (Baustellengelb, Warnorange, Terminalgrün). Keine Verläufe.
• Layout: Sichtbare Ränder. Box-Modell ist sichtbar. Gestapelte Blöcke. Bewusste Rauheit. Inhalt zuerst, Schönheit nie.
• Abstände: Eng oder absichtlich ungleichmäßig. Abstände, die sich komprimiert anfühlen.
• Animation: Keine oder ruckartig (sofortige Zustandsänderungen, harte Schnitte). Keine Beschleunigungskurven.
• Details: Sichtbare Umrisse. Standard-Browser-Formularelemente können beabsichtigt sein. Textbasierte Oberflächen. Keine Symbole, es sei denn, sie sind funktional.

Skandinavisch

Wärme plus Zurückhaltung. Funktionale Schönheit. Von Haus aus barrierefrei.

• Typografie: Abgerundete, freundliche serifenlose Schriften (Nunito, Poppins, Circular, Cera Pro). Mittlere Strichstärken. Bequeme Lesegrößen.
• Farbe: Natürliche Palette. Warmweiß, sanftes Blau, gedämpftes Grün, Ton. Pastellakzente. Kein reines Schwarz (Holzkohle verwenden).
• Layout: Sauber und offen. Kartenbasiert. Abgerundete Ecken (8-12px). Bequeme, großzügige Layouts.
• Abstände: Großzügig, aber nicht extrem. Alles fühlt sich zugänglich und aufgeräumt an.
• Animation: Sanftes, natürliches Easing. Subtile Hover-Lift-Effekte. Inhalt, der sich an seinen Platz setzt.
• Details: Weiche Schatten (großer Weichzeichner, geringe Deckkraft). Abgerundete Elemente. Warme Untertöne in Grautönen. Illustrationsfreundlich.

Art Deco / Geometrisch

Kühne Symmetrie. Dekorative Präzision. Statement und Luxus.

• Typografie: Geometrische Auszeichnungsschriften (Futura, Poiret One, Josefin Sans). Versalien-Überschriften mit extremem Buchstabenabstand. Serifen-Fließtext für Kontrast.
• Farbe: Reich und tief. Gold/Champagner, Smaragd, Marineblau, Burgunder, Schwarz. Metallic-Akzente (Goldverläufe, Schimmereffekte).
• Layout: Symmetrisch und zentriert. Starke vertikale Achse. Dekorative Rahmen und Ränder. Geschichtete Tiefe.
• Abstände: Strukturiert und formell. Abstände sind architektonisch.
• Animation: Elegante Einblendungen. Gestaffelte Eingangsanimationen. Parallax-Tiefe.
• Details: Geometrische Muster (Chevrons, Sonnenstrahlen, Fächerformen). Zierränder. Textur (Marmor, gebürstetes Metall). Statement-Typografie im Hero-Maßstab.

Neo-Memphis

Verspieltes Chaos. Anti-Unternehmens. Formen als Charaktere.

• Typografie: Mischung aus Strichstärken und Stilen. Gegensätzliche Schriften sind beabsichtigt. Überdimensionierte Überschriften. Text in Winkeln.
• Farbe: Kühle Primärfarben und Neonfarben. Clash-Kombinationen (Pink und Gelb, Blau und Orange). Keine gedämpften Töne. Flächige Farbe, keine Verläufe.
• Layout: Gebrochenes Raster. Überlappende Elemente. Formen (Kreise, Dreiecke, Wellen) als kompositorische Elemente. Asymmetrisch mit Absicht.
• Abstände: Dicht in einigen Bereichen, leer in anderen. Der Rhythmus ist unregelmäßig.
• Animation: Hüpfend, verspielt. Übertriebene Hover-Effekte. Elemente, die wackeln, sich drehen oder platzen.
• Details: Dicke Ränder. Geometrische Formen als Dekoration. Muster (Punkte, Striche, Zickzack). Schlagschatten mit harten Kanten und hellen Farben.

Redaktionell / Magazin

Inhaltsgeführtes Design. Typografie trägt die Hauptlast. Jede Seite ist ein Spread.

• Typografie: Serifen-Auszeichnungsschrift für Überschriften (Playfair Display, Fraunces, Instrument Serif). Saubere Serifenlose für den Fließtext (DM Sans, Source Sans). Dramatischer Maßstab (Hero-Überschriften bei 72-120px). Angehobene Zitate. Initialen.
• Farbe: Minimal. Schwarz und Weiß mit einem Akzent. Farbe wird redaktionell eingesetzt (um hervorzuheben, nicht zu dekorieren).
• Layout: Starkes Spaltenraster (3-5 Spalten). Randlos laufende Bilder. Textumbruch. Gemischte Spaltenbreiten. Vertikaler Rhythmus.
• Abstände: Großzügige Ränder. Enger Zeilenabstand bei Überschriften, offen beim Fließtext. Weißraum als kompositorisches Werkzeug.
• Animation: Scrollausgelöste Einblendungen. Parallax bei Bildern. Sanfte Seitenübergänge.
• Details: Dünne Linien als Trennlinien. Beschriftungstypografie. Ausgaben-/Datumsmetadaten. Vom Druck inspirierte Details (Kolumnentitel, lebende Kolumnentitel).

Implementierungsrichtlinien

• Typografie: Wähle unverwechselbare Schriftarten, die über Google Fonts oder CDN geladen werden. Vermeide generische Standardschriften (Inter, Roboto, Arial, Systemschriften). Kombiniere eine Auszeichnungsschrift mit einer Textschrift.
• Farbe: Verwende CSS-Variablen für Konsistenz. Dominante Farbe mit scharfen Akzenten ist leistungsfähiger als sichere, gleichmäßig verteilte Paletten.
• Animation: CSS-Übergänge für HTML. Framer Motion / Motion-Bibliothek für React. Fokussiere auf wirkungsvolle Momente (Einblendungen beim Seitenladen, Zustandsänderungen) statt auf verstreute Mikrointeraktionen.
• Räumliche Komposition: Unerwartete Layouts erregen Aufmerksamkeit. Asymmetrie, Überlappung, diagonaler Fluss, rasterbrechende Elemente. Oder, wenn die Philosophie es verlangt, strenge Raster mit Präzision ausgeführt.
• Hintergründe und Tiefe: Erzeuge Atmosphäre. Verlaufsnetze, Rauschtexturen, geometrische Muster, geschichtete Transparenzen, Kornüberlagerungen. Passe sie der gewählten Philosophie an.

Erzeuge NIEMALS generische KI-Ästhetik: lila Verläufe auf Weiß, Inter-Schrift, vorhersagbare Kartenraster, Standard-Komponentenlayouts. Jede Ausgabe sollte sich für ihren spezifischen Kontext entworfen anfühlen.

Passe die Implementierungskomplexität der ästhetischen Vision an. Eine Dieter-Rams-Oberfläche besteht aus 50 Zeilen präzisem CSS. Eine Neo-Memphis-Oberfläche aus 300 Zeilen kreativem Chaos. Beide sind richtig.

Mobile-First

Erstelle zuerst das mobile Layout und skaliere dann nach oben. Das ist nicht verhandelbar.

• Beginne mit einem einspaltigen Layout bei 375px Breite.
• Füge bei jedem Breakpoint Komplexität hinzu (min-width Media Queries, nicht max-width).
• Berührungsziele müssen auf Mobilgeräten mindestens 44x44px groß sein.
• Fließtext muss auf Mobilgeräten mindestens 16px groß sein (verhindert iOS-Zoom bei Eingabefokus).
• Die Navigation muss ein mobilspezifisches Muster haben (Hamburger, untere Tabs oder Drawer). Verlasse dich nicht auf horizontale Navigationsleisten, die überlaufen.
• Teste, dass die Zeilenlängen bei jedem Breakpoint angenehm bleiben (45-75 Zeichen).

Dunkelmodus

Wenn eine Design-Token-Datei existiert (aus /design-tokens), verwende deren Dunkelmodus-Palette. Wenn nicht, generiere die Dunkelmodus-Unterstützung zusammen mit dem hellen Design.

• Verwende CSS-benutzerdefinierte Eigenschaften, sodass ein Wechsel des Designs bedeutet, die Variablenwerte zu ändern, nicht die Komponenten neu zu schreiben.
• Unterstütze sowohl die prefers-color-scheme Media Query (Systemeinstellung) als auch ein [data-theme="dark"] Attribut (manueller Schalter).
• Kehre Farben nicht einfach um. Dunkle Hintergründe sollten warm oder kühl sein, um zur Philosophie zu passen (warme Holzkohle für skandinavisch, kühler Schiefer für schweizerisch, beinahe schwarz für brutalistisch).
• Reduziere reinen weißen Text auf gebrochenes Weiß (z. B. #E5E5E5 oder rgba(255,255,255,0.87)) um die Augen zu schonen.
• Schatten im Dunkelmodus sollten dunkler und transparenter sein, nicht die gleichen Werte wie im Hellen Modus.
• Akzentfarben müssen möglicherweise in der Helligkeit angepasst werden, um WCAG-Kontrastverhältnisse gegenüber dunklen Hintergründen zu erhalten.
• Füge eine prefers-reduced-motion Media Query für Benutzer hinzu, die sie benötigen. Deaktiviere oder vereinfache alle Animationen und Übergänge innerhalb dieser Query.