leonxlnx/taste-skill

tasteskill: Anti-Slop Frontend-Skill

Landing Pages, Portfolios und Redesigns. Keine Dashboards, keine Datentabellen, keine mehrstufige Produkt-UI. Jede Regel unten ist kontextabhängig. Nichts wird automatisch ausgelöst. Lies zuerst das Briefing, dann ziehe nur das heran, was passt.

---

0. BRIEF-INTERPRETATION (Lies den Raum, bevor irgendetwas anderes passiert)

Bevor du Code anfasst oder an Parametern drehst, interpretiere, was der Benutzer eigentlich will. Das meiste LLM-Design ist schlecht, weil das Modell zu einer Standard-Ästhetik springt, anstatt den Raum zu lesen.

0.A Lies zuerst diese Signale

1. Seitentyp – Landing (SaaS / Consumer / Agentur / Event), Portfolio (Entwickler / Designer / Kreativstudio), Redesign (bewahren vs. überarbeiten), Redaktionell / Blog.
2. Vibe-Wörter, die der Benutzer verwendet hat – „minimalistisch“, „ruhig“, „Linear-Stil“, „Awwwards“, „brutalistisch“, „Premium-Consumer“, „Apple-ähnlich“, „verspielt“, „seriös B2B“, „redaktionell“, „Agentur-ähnlich“, „gläsern“, „Dark Tech“.
3. Referenzsignale – URLs, die sie verlinkt haben, Screenshots, die sie eingefügt haben, Produkte, die sie genannt haben, Marken, mit denen sie konkurrieren.
4. Zielgruppe – B2B-Beschaffungsgremium vs. designbewusster Verbraucher vs. Personalvermittler, der ein Portfolio scannt. Die Zielgruppe bestimmt die Ästhetik, nicht dein Geschmack.
5. Bestehende Markenassets – Logo, Farbe, Schriftart, Fotografie. Bei Redesigns sind dies Ausgangsmaterial, keine optionale Eingabe (siehe Abschnitt 11).
6. Leise Einschränkungen – Barrierefreiheit-orientierte Zielgruppen, öffentlicher Sektor, regulierte Branchen, vertrauensbasierter Handel, Kinderprodukte. Diese Einschränkungen ÜBERSCHREIBEN die ästhetische Präferenz.

0.B Gib einen einzeiligen „Design Read“ aus, bevor du generierst

Bevor irgendein Code entsteht, gib in einer Zeile an: „Lese dies als: für , mit einer -Sprache, tendierend zu <Designsystem oder Ästhetikfamilie>.“

Beispiel-Reads:

• „Lese dies als: B2B SaaS Landing für technische Entscheider, mit einer Linear-Stil-minimalistischen Sprache, tendierend zu Tailwind Utilities + Geist + zurückhaltender Bewegung.“
• „Lese dies als: Solo-Designer-Portfolio für Personalentscheider, mit einer redaktionellen / kinetischen Typografie-Sprache, tendierend zu nativem CSS + scrollgesteuerter Animation + benutzerdefinierter Typografie.“
• „Lese dies als: Redesign einer öffentlichen Dienstleistungsseite, mit einer vertrauensbasierten Sprache, tendierend zu GOV.UK Frontend oder USWDS.“

0.C Wenn das Briefing mehrdeutig ist, stelle EINE Frage, rate nicht

Stelle genau eine klärende Frage – niemals eine Frageflut – und nur, wenn der Design-Read wirklich auseinandergeht. Beispiel: „Sollte sich das eher wie Linear-sauber oder Awwwards-experimentell anfühlen?“

Wenn du aus dem Kontext sicher ableiten kannst, frage nicht. Erkläre einfach den Design-Read und fahre fort.

0.D Anti-Standard-Disziplin

Vermeide standardmäßig: KI-lila Farbverläufe, zentrierter Hero über dunklem Mesh, drei gleiche Feature-Karten, generischer Glas-Morphismus überall, Endlosschleifen-Mikroanimationen überall, Inter + slate-900. Das sind die KI-Standards. Greife bewusst tiefer, basierend auf dem Design-Read.

---

1. DREI DREHREGLER (Kernkonfiguration)

Nach dem Design-Read stelle drei Drehregler ein. Jede Layout-, Bewegungs- und Dichte-Entscheidung unten wird durch diese gesteuert.

• DESIGN_VARIANCE: 8 – 1 = Perfekte Symmetrie, 10 = Künstlerisches Chaos
• MOTION_INTENSITY: 6 – 1 = Statisch, 10 = Kinematisch / Physik
• VISUAL_DENSITY: 4 – 1 = Kunstgalerie / Luftig, 10 = Cockpit / Datengepackt

Basislinie: 8 / 6 / 4. Verwende diese, es sei denn, der Design-Read überschreibt sie. Bitte den Benutzer nicht, diese Datei zu bearbeiten – Überschreibungen erfolgen im Gespräch.

1.A Drehregler-Interpretation (Design-Read → Drehregler-Werte)

Signal	VARIANCE	MOTION	DENSITY
„minimalistisch / sauber / ruhig / redaktionell / Linear-Stil“	5-6	3-4	2-3
„Premium-Consumer / Apple-ähnlich / Luxus / Marke“	7-8	5-7	3-4
„verspielt / wild / Dribbble / Awwwards / experimentell / Agentur“	9-10	8-10	3-4
„Landing Page / Portfolio / Marketing-Website (Standard)“	7-9	6-8	3-5
„vertrauensbasiert / öffentlicher Sektor / reguliert / Barrierefreiheit-kritisch“	3-4	2-3	4-5
„Redesign – bewahren“	entspricht vorhandenem	+1	entspricht vorhandenem
„Redesign – überarbeiten“	+2	+2	entspricht vorhandenem

1.B Anwendungsfall-Voreinstellungen

Anwendungsfall	VARIANCE	MOTION	DENSITY
Landing (SaaS, Mainstream)	7	6	4
Landing (Agentur / kreativ)	9	8	3
Landing (Premium Consumer)	7	6	3
Portfolio (Designer / Studio)	8	7	3
Portfolio (Entwickler)	6	5	4
Redaktionell / Blog	6	4	3
Öffentlicher Sektor Dienstleistung	3	2	5
Redesign – bewahren	entspricht	entspricht+1	entspricht
Redesign – überarbeiten	+2	+2	entspricht

1.C Wie die Drehregler die Ausgabe steuern

Verwende diese (oder vom Benutzer überschriebenen Werte) als globale Variablen. Querverweise in diesem Dokument beziehen sich auf diese genauen Variablennamen – erfinde niemals Aliase wie LAYOUT_VARIANCE oder ANIM_LEVEL.

---

2. BRIEF → DESIGN-SYSTEM-KARTE

Sobald du den Design-Read (Abschnitt 0) und die Drehregler (Abschnitt 1) hast, wähle die richtige Grundlage. Erfinde kein CSS für Dinge, die ein offizielles Paket haben. Tue nicht so, als ob ein ästhetischer Trend ein offizielles System wäre.

2.A Wann man zu einem echten Designsystem greift (offizielle Pakete verwenden)

Brief liest sich als…	Greife zu	Warum
Microsoft / Enterprise SaaS / Dashboards	@fluentui/react-components oder @fluentui/web-components	Offizielles Fluent UI, Microsoft-Token, Barrierefreiheit erledigt
Google-ähnliche UI, Material-ähnliches Produkt	@material/web + Material 3 Token	Offiziell, thematisierbar via Material Theming
IBM-Stil B2B / Enterprise Analytics	@carbon/react + @carbon/styles	Offizielles Carbon, ausgereifte Daten-Dichte-Muster
Shopify App-Oberflächen	polaris.js Webkomponenten / Polaris React	Erforderlich für Shopify Admin UI
Atlassian / Jira-Stil Produkt	@atlaskit/* + @atlaskit/tokens	Offizielles Atlassian DS
GitHub-Stil Devtool / Community-Seite	@primer/css oder @primer/react-brand	Offizielles Primer; Brand-Variante für Marketing
Öffentlicher Sektor UK Dienstleistung	govuk-frontend	Gesetzlich / regulatorisch erwartet
US-öffentlicher Sektor / vertrauensbasiert	uswds	Gleich
Schnelles lokales Geschäft / Agentur MVP	Bootstrap 5.3	Langweilig, schnell, funktioniert
Moderne barrierefreie React-Grundlage	@radix-ui/themes	Primitive + poliertes Theme
Modernes SaaS, bei dem du die Komponenten besitzt	shadcn/ui (npx shadcn@latest add ...)	Du besitzt den Code, einfach anzupassen; nie den Standardzustand ausliefern
Tailwind-basiertes modernes SaaS / KI-Marketing	Tailwind v4 Utilities + dark: Variante	Standard für Indie + kleine Team-Builds

Ehrlichkeitsregel: Wenn das Briefing als eines der obigen Systeme gelesen wird, installiere und verwende das offizielle Paket. Baue sein CSS nicht von Hand nach. Importiere keine Token eines Systems, um dann 90 % davon zu überschreiben.

Ein System pro Projekt. Mische nicht Fluent React mit Carbon im selben Baum. Importiere keine shadcn/ui-Komponenten in eine Material 3 App.

2.B Wenn das Briefing eine Ästhetik ist, kein System

Für diese Richtungen gibt es kein einziges offizielles Paket. Baue mit nativem CSS + Tailwind + einer gepflegten Komponentenbibliothek. Sei ehrlich in Code-Kommentaren darüber, was geliehene Inspiration vs. offizielles Material ist.

Ästhetik	Ehrliche Implementierung
Glas-Morphismus / „Milchglas“	backdrop-filter, geschichtete Rahmen, Highlight-Overlays. Biete Vollfarb-Fallback für prefers-reduced-transparency.
Bento (Apple-Stil Kachelraster)	CSS Grid mit gemischten Zellgrößen. Keine einzelne Bibliothek besitzt dies.
Brutalismus	Natives CSS, Monospace, rohe Rahmen. Keine Bibliothek.
Redaktionell / Magazin	Serifenschrift, asymmetrisches Raster, großzügiger Weißraum. Keine Bibliothek.
Dark Tech / Hacker	Mono + Akzent Neon, Terminal-Motive. Keine Bibliothek.
Aurora / Mesh-Verläufe	SVG oder geschichtete radiale Verläufe. Keine Bibliothek.
Kinetische Typografie	Native CSS-Animationen, scrollgesteuerte Animationen, GSAP für Übernahmen. Keine Bibliothek.
Apple Liquid Glass	Apple dokumentiert dies nur für Apple-Plattformen. Es gibt kein offizielles liquid-glass.css. Web-Implementierungen sind Annäherungen mit backdrop-filter + geschichteten Rahmen + Highlights. Klar als Annäherung kennzeichnen.

---

3. STANDARD-ARCHITEKTUR & KONVENTIONEN

Sofern der Design-Read kein echtes Designsystem auswählt (Abschnitt 2.A), sind dies die Standardeinstellungen:

3.A Stack

• Framework: React oder Next.js. Standardmäßig Server-Komponenten (RSC).
  • RSC-SICHERHEIT: Globaler Status funktioniert NUR in Client-Komponenten. In Next.js, wrappe Provider in eine "use client"-Komponente.
  • INTERAKTIVITÄTSISOLATION: Jede Komponente, die Motion, Scroll-Listener oder Pointer-Physik verwendet, MUSS ein isoliertes Blatt mit 'use client' oben sein. Server-Komponenten rendern nur statische Layouts.
• Styling: Tailwind v4 (Standard). Tailwind v3 nur, wenn das bestehende Projekt es erfordert.
  • Für v4: Verwende NICHT das tailwindcss-Plugin in postcss.config.js. Verwende @tailwindcss/postcss oder das Vite-Plugin.
• Animation: Motion (die ehemals als Framer Motion bekannte Bibliothek). Importiere aus motion/react (import { motion } from "motion/react"). Das framer-motion-Paket funktioniert noch als Legacy-Alias – bevorzuge motion/react in neuem Code.
• Schriftarten: Verwende immer next/font (Next.js) oder selbst gehostet mit @font-face + font-display: swap. Verlinke Google Fonts in der Produktion niemals über <link>.

3.B Status

• Lokales useState / useReducer für isolierte UI.
• Globaler Status NUR zur Vermeidung von tiefem Prop-Drilling – Zustand, Jotai oder React-Kontext.
• NIE useState verwenden, um kontinuierliche, durch Benutzereingaben gesteuerte Werte zu verfolgen (Mausposition, Scroll-Fortschritt, Zeiger-Physik, magnetisches Hover). Verwende Motions useMotionValue / useTransform / useScroll. useState rendert den React-Baum bei jeder Änderung neu und bricht auf Mobilgeräten zusammen.

3.C Icons

• Erlaubte Bibliotheken (Prioritätsreihenfolge): @phosphor-icons/react, hugeicons-react, @radix-ui/react-icons, @tabler/icons-react.
• Nicht empfohlen: lucide-react. Nur akzeptabel, wenn der Benutzer explizit danach fragt oder das Projekt bereits davon abhängt.
• NIEMALS SVG-Icons von Hand bauen. Fehlt ein Glyph, installiere eine zweite Bibliothek oder setze aus Primitiven zusammen – zeichne keine Icon-Pfade von Grund auf neu.
• Eine Familie pro Projekt. Mische Phosphor nicht mit Lucide im selben Komponentenbaum.
• Standardisiere strokeWidth global (z.B. 1.5 oder 2.0).

3.D Emoji-Richtlinie

Standardmäßig nicht empfohlen in Code, Markup und sichtbarem Text. Ersetze Symbole durch Icons aus der Icons-Bibliothek. Überschreibung: Erlaube Emojis nur, wenn der Benutzer explizit nach einem verspielten / Chat-artigen / sozialen Vibe fragt – und selbst dann verwende sie sparsam und mit Absicht.

3.E Responsivität & Layout-Mechanik

• Standardisiere Breakpoints (sm 640, md 768, lg 1024, xl 1280, 2xl 1536).
• Begrenze Seitenlayouts mit max-w-[1400px] mx-auto oder max-w-7xl.
• Viewport-Stabilität: Verwende NIE h-screen für Hero-Abschnitte in voller Höhe. Verwende IMMER min-h-[100dvh], um Layout-Sprünge auf Mobilgeräten zu verhindern (iOS Safari Adressleiste).
• Grid statt Flex-Mathe: Verwende NIE komplexe Flexbox-Prozentrechnung (w-[calc(33%-1rem)]). Verwende IMMER CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6).

3.F Abhängigkeitsprüfung (obligatorisch)

Bevor du EINE Drittanbieter-Bibliothek importierst, überprüfe package.json. Fehlt das Paket, gib zuerst den Installationsbefehl aus. Niemals annehmen, dass eine Bibliothek existiert.

---

4. DESIGN ENGINEERING RICHTLINIEN (Verzerrungskorrektur)

KIs standardisieren auf Klischees. Überschreibe diese Standards proaktiv. Jede Regel hat einen kontextbewussten Überschreibungspfad.

4.1 Typografie

• Display / Überschriften: Standard text-4xl md:text-6xl tracking-tighter leading-none.

• Fließtext / Absätze: Standard text-base text-gray-600 leading-relaxed max-w-[65ch].

• Sans-Schriftart-Wahl:

  • Nicht empfohlen als Standard: Inter. Wähle zuerst Geist, Outfit, Cabinet Grotesk, Satoshi oder eine markenpassende Serifenschrift.
  • Überschreibung: Inter ist akzeptabel, wenn der Benutzer explizit nach einem neutralen / standardmäßigen / Linear-Stil-Gefühl fragt oder wenn das Briefing eine Website des öffentlichen Sektors / mit Schwerpunkt Barrierefreiheit ist.

• Kombinationen, die man kennen sollte: Geist + Geist Mono, Satoshi + JetBrains Mono, Cabinet Grotesk + Inter Tight, GT America + IBM Plex Mono.

• SERIFEN-DISZIPLIN (SEHR NICHT EMPFOHLEN ALS STANDARD):

  • Serifen sind als Standardschriftart für jedes Projekt sehr nicht empfohlen. „Es fühlt sich kreativ / hochwertig / redaktionell an“ ist KEIN Grund, zu Serifen zu greifen. Das standardmäßige mentale Modell des Agenten, dass „kreatives Briefing = Serife“ das am häufigsten getestete KI-Merkmal in Produktionsrunden ist.
  • Serifen sind nur akzeptabel, wenn EINES davon explizit zutrifft:
    • Das Marken-Briefing nennt buchstäblich eine Serifenschrift, ODER
    • Die ästhetische Familie ist wirklich redaktionell / Luxus / Publikation / Manuskript / Erbe / Vintage UND du kannst artikulieren, warum diese spezifische Serife zu dieser spezifischen Marke passt
  • Für alles andere (Kreativagentur, Designstudio, moderne Marke, Premium-Consumer, Portfolio, Lifestyle), Standard-Sans-Serif-Display (Geist Display, ABC Diatype, Söhne Breit, Cabinet Grotesk Display, Migra Sans, GT Walsheim, Inter Display, PP Neue Montreal). Sans-Display-Schriftarten sind nicht „langweilig“ – sie sind der Standard aus dem gleichen Grund, aus dem Schwarz der Standard in der Mode ist.
  • BETONUNGSREGEL (verwandt): Wenn du ein Wort in einer Überschrift betonen willst (die kinetische „und räumliche Design“-Bewegung), verwende kursiv oder fett der GLEICHEN Schriftart. Füge KEIN zufälliges Serifen-Wort in eine Sans-Überschrift ein (oder umgekehrt), nur um visuelles Interesse zu wecken. Gemischte Familien-Betonung ist amateurhaft. Kursiv-/Fett-Betonung in derselben Familie ist der richtige Schritt.
  • Speziell VERBOTEN als Standard: Fraunces und Instrument_Serif (die beiden KI-Lieblings-Display-Serifen).
  • Wenn eine Serife gerechtfertigt ist (selten, gemäß obiger Regel), rotiere aus diesem Pool, verwende NICHT dieselbe Serife über aufeinanderfolgende Projekte hinweg: PP Editorial New, GT Sectra Display, Cardinal Grotesque, Reckless Neue, Tiempos Headline, Recoleta, Cormorant Garamond, Playfair Display, EB Garamond, IvyPresto, Migra, Editorial Old, Saol Display, Söhne Breit Kursiv, Domaine Display, Canela, Schnyder, Tobias, NB Architekt...

• Schriftgrößen-Kaskade (vereinheitlicht):

  Token	Größe	Zeilenhöhe	Buchstabenabstand	Verwendung
  text-display-xl	clamp(3.5rem, 8vw, 7rem)	0.95	-0.04em	Hero-Überschrift, 1x pro Seite
  text-display-lg	clamp(2.5rem, 5vw, 4.5rem)	1.05	-0.03em	Abschnittsüberschriften
  text-display	clamp(2rem, 4vw, 3.5rem)	1.1	-0.02em	Unterüberschriften, Feature-Titel
  text-heading	clamp(1.25rem, 2vw, 1.75rem)	1.2	-0.01em	Kartenüberschriften, Modale
  text-body-lg	1.125rem	1.6	normal	Hauptfließtext, Hervorhebungen
  text-body	1rem	1.6	normal	Fließtext
  text-body-sm	0.875rem	1.5	0.01em	Beschriftungen, Metadaten
  text-caption	0.75rem	1.4	0.02em	Kleingedrucktes, UI-Beschriftungen

  Implementierung: Definiere diese als Tailwind-Komponenten (@layer components) oder CSS-Klassen. Wende sie überall an, nicht standardmäßige Größen sind die Ausnahme.

4.2 Farbe & Kontrast

• Standard-Light-Palette:

  Rolle	Farbe	Tailwind
  Hintergrund	weiß	bg-white
  Oberfläche	leichtgrau	bg-gray-50
  Primär	Blau/Schwarz (markenabhängig)	sky-600 oder neutral-900
  Text (hoher Kontrast)	fast-schwarz	text-gray-900
  Text (mittel)	gedämpft	text-gray-600
  Text (niedriger Kontrast)	subtil	text-gray-400
  Ränder / Trennlinien	leicht	border-gray-200
  Fokus-Ringe	Blau (Barrierefreiheit)	ring-blue-500

• Standard-Dark-Palette: Spiegele die Rollen. Verwende Tailwinks dark:-Variante. Basis-Dark: bg-neutral-950 Text: gray-100.
• NIE reinen schwarzen Text auf rein weißem Hintergrund (#000 auf #fff). Verwende gray-900 / neutral-900 auf white. Reiner Schwarz/Weiß-Kontrast verursacht Augenbelastung.
• Aufgabenorientierte Akzentfarben: Verwende Grün (success) / Rot (error) / Gelb (warning) / Blau (info) NUR für ihren funktionalen Zweck. Dekorative Akzente sollten aus der Primär- oder Sekundärpalette der Marke stammen, nicht aus Aufgabenfarben.
• Barrierefreiheit:
  • Text auf Hintergrund: mindestens 4.5:1 Kontrastverhältnis (AA).
  • Großer Text (18px+ fett / 24px+ normal): mindestens 3:1.
  • Interaktive Elemente (Ränder, Symbole): mindestens 3:1 gegen benachbarte Farben.
  • Verwende immer prefers-contrast: more Medienabfragen, um den Kontrast für benutzerdefinierte Einstellungen zu erhöhen.
  • Verlasse dich niemals ausschließlich auf Farbe, um Informationen zu vermitteln – füge Symbole, Muster oder Textbeschriftungen hinzu.

4.3 Abstände

• Standardisiere einen Abstands-Skala: space-y-4 (Inhaltsabschnitt), space-y-8 (Abschnittstrennungen), space-y-16 (große Abschnitte / Seitenwechsel). Verwende konsistente Abstände über ähnliche Komponenten hinweg.
• NIE feste Pixel-Abstände innerhalb von Layout-Rastern. Verwende relative Einheiten (gap-4, gap-6, gap-8).
• Weißraum ist ein Feature, kein Fehler. Zu wenig Abstand zwischen Abschnitten ist ein häufiger KI-Fehler. Standardisiere auf py-16 md:py-24 lg:py-32 als Standard-Abschnittsabstand.

4.4 Layout & Raster

• Sektionen-Layout definieren: Jeder Hauptabschnitt (Hero, Features, Testimonials, CTA, Footer) bekommt ein konsistentes Start-/End-Raster.
• Standard-Rastervariationen:
  • grid-cols-1 (Mobil), md:grid-cols-2 (Tablet), lg:grid-cols-3 (Desktop) – Feature-Karten
  • grid-cols-1 (Mobil), lg:grid-cols-2 – Inhalt + Bild (Text neben Medien)
  • grid-cols-1 (Mobil), md:grid-cols-3, lg:grid-cols-4 – Testimonials / Team-Raster
  • NIE starre 3-Spalten-Layouts, die auf kleineren Bildschirmen nicht brechen. Verwende immer responsive Spalten.
• Hero-Layout nach Design-Read:
  • Zentriert: flex flex-col items-center text-center (Standard, breite Botschaft)
  • Geteilt / Split: grid grid-cols-1 lg:grid-cols-2 (Inhalt links + visuell rechts – gut für Produkt-Demos)
  • Asymmetrisch: Große Überschrift + kleineres Unterelement (z.B. max-w-3xl Überschrift + max-w-md Fließtext + versetztes visuelles Element)

4.5 Animation

• Bewegung ist nicht optional – sie ist Teil des Designs. Standardisiere auf sanfte, zielgerichtete Bewegung.
• Easing: Standardisiere auf cubic-bezier(0.16, 1, 0.3, 1) (Motion-Exit). Vermeide Standard-Easings wie ease-in-out oder linear, es sei denn, ein bestimmter Effekt verlangt danach.
• Dauer: Standard duration-500 für Eintritts-/Exit-Animationen, duration-300 für Hover-/Fokus-Zustände. Vermeide schnelle Animationen (<100ms), die Benutzer desorientieren.
• Mikro-Interaktionen: Fokus-Ringe, Button-Press-Effekte, sanfte Hover-Farbübergänge – standardmäßig vorhanden, nicht dekorativ.
• Scroll-gesteuerte Animationen (SDA): Verwende @keyframes + animation-timeline: scroll() für parallax-artige Effekte. ERZEUGE sie in CSS, nicht in JavaScript. JS-Scroll-Listener sind teuer.
  • Fallback: Wenn SDA nicht unterstützt wird (Firefox < 121, Safari < 18), falle auf eine einfache IntersectionObserver-Implementierung (oder die vorhandene scroll-gesteuerte Logik der Animationsbibliothek) zurück. Verlasse dich nicht darauf.
• Hover auf Touch-Geräten: Verwende @media (hover: hover), um Hover-Effekte auf Geräte mit Zeiger zu beschränken. Auf Mobilgeräten werden Hover-Effekte zu Taps – vermeide mehrdeutige Interaktionen.
• Präferenz für reduzierte Bewegung: Respektiere prefers-reduced-motion. Reduziere Animationen auf wesentliche Übergänge (keine Parallaxe, keine Scroll-Effekte, keine automatischen Karussells).

4.6 Bilder & Medien

• NIE zufällige Stock-Fotos auswählen oder generieren. Wenn der Benutzer keine Bilder bereitstellt:
  • Verwende Platzhalter: https://placehold.co/800x600?text=Your+Image+Here oder ähnliches.
  • Gib im Code-Kommentar an: „Ersetze dieses Platzhalter-Bild durch eine echte Marken- oder Produktaufnahme.“.
• Optimierung: Verwende Next.js next/image (oder @astrojs/image) für automatische Optimierung. Gib width / height / sizes an. Vermeide das direkte Setzen von src auf rohe URLs.
• Laden: loading="lazy" als Standard. NUR Above-the-Fold-Bilder erhalten loading="eager".
• Fallbacks: Verwende onError-Handler, um ausgefallene Bilder durch einen Platzhalter zu ersetzen. Verwende immer Alt-Texte für Screenreader.

---

[Anmerkung: Der Rest des ursprünglichen Dokuments war abgeschnitten. Alle vorhandenen Abschnitte wurden übersetzt.]