@flitzrrr/frontend-design-skills 1.0.0

package/spec/domains/18-visual-direction.md

@@ -0,0 +1,166 @@
+# Domain: Visual-Direction
+
+> Aktuelle visuelle Richtung: Farbpaletten, Schriftpaarungen, Layout-Kompositionen und Bildsprache. Abgeleitet aus Dribbble-Trending, Behance-Top-Projekte, Land-book-Kuratierung und Godly-Featured Sites (Q1/Q2 2026).
+
+## Prinzipien
+
+1. **Farbe kommuniziert Marke, nicht Trend** -- Paletten muessen aus der Markenidentitaet abgeleitet werden, nicht aus Dribbble-Trends. Trends informieren den Rahmen, die Marke bestimmt die Ausfuehrung.
+2. **Typografie erzeugt Stimmung** -- Die Wahl der Schrift definiert den emotionalen Ton staerker als jedes andere visuelle Element. Eine Grotesk sagt "Modern", eine Serif sagt "Vertrauen", eine Display-Schrift sagt "Kreativ".
+3. **Weissraum ist Gestaltung** -- Leerer Raum ist nicht verschwendeter Raum. Er lenkt den Blick, schafft Hierarchie und signalisiert Premium-Qualitaet.
+4. **Konsistenz schlaegt Kreativitaet** -- Ein durchgaengiges visuelles System wirkt professioneller als punktuelle Brillanz. Jedes Element muss zum System passen.
+5. **Kontrast treibt Hierarchie** -- Visueller Kontrast (Groesse, Farbe, Gewicht, Raum) ist das primaere Werkzeug fuer Informationshierarchie.
+
+## Regeln
+
+### Farbpaletten
+
+- **MACHE** eine strukturierte Palette mit klaren Rollen:
+  - **Primaer**: Markenfarbe, sparsam eingesetzt (CTAs, aktive Zustaende)
+  - **Neutral**: Grauabstufungen fuer Text, Hintergruende, Borders (mindestens 5 Stufen)
+  - **Semantisch**: Erfolg (Gruen), Warnung (Gelb/Orange), Fehler (Rot), Info (Blau)
+  - **Akzent**: Optional, fuer Hervorhebungen und Illustrationen
+- **MACHE** Deep Darks als Hintergrund fuer Tech/SaaS: Nicht #000000, sondern #0A0A0A bis #1A1A1A. Behance-Trend: Pure Black wirkt billig, Deep Dark wirkt premium.
+- **MACHE** Warm Neutrals fuer Lifestyle/Brand: Off-Whites (#FAFAF5 bis #F5F0EB) statt reinem Weiss. Land-book zeigt dies bei Ecommerce, Fashion und Food.
+- **MACHE** monochrome Akzente: Eine starke Farbe genuegt. Godly-Featured Sites wie Amie (Violett), Vercel (Weiss/Schwarz-Akzent), Reflect (Blau) zeigen Einfarben-Systeme.
+- **VERMEIDE** mehr als 2 chromatische Farben in der Hauptpalette. Neutrale zaehlen nicht.
+- **VERMEIDE** gesaettigte Farben auf grossen Flaechen. Hohe Saettigung fuer kleine Akzente, reduzierte Saettigung fuer Hintergruende.
+- **VERMEIDE** Farbkombinationen mit Kontrastverhaeeltnis unter 4.5:1 fuer Text (WCAG AA).
+
+#### Aktuelle Paletten-Archetypen (2026)
+
+**Tech Minimal**: #0A0A0A (bg) / #FAFAFA (text) / #3B82F6 (accent) / #27272A (surface)
+Referenz: Godly-Sites wie Status, Reflect, Height.
+
+**Warm Premium**: #F5F0EB (bg) / #1A1A1A (text) / #C4956A (accent) / #E8E0D5 (surface)
+Referenz: Land-book Ecommerce und Fashion-Kategorien, CSSDA-Gewinner wie Springs.
+
+**Bold Creative**: #1A1A2E (bg) / #FFFFFF (text) / #FF6B35 (accent) / #16213E (surface)
+Referenz: Awwwards-Portfolios, Godly Creative Sites wie KidSuper World, UNVEIL.
+
+**Clean SaaS**: #FFFFFF (bg) / #111827 (text) / #6366F1 (accent) / #F9FAFB (surface)
+Referenz: Dribbble SaaS-Designs, Behance lifeOS, SmileCare.
+
+**Nature/Wellness**: #F7F5F0 (bg) / #2D3436 (text) / #00B894 (accent) / #EBE5DA (surface)
+Referenz: CSSDA-Gewinner Springs (Wellness), Land-book Lifestyle-Kategorie.
+
+### Schriftpaarungen
+
+- **MACHE** maximal 2 Schriftfamilien pro Projekt:
+  - **Option A**: Geometrische Grotesk (Display) + Humanistische Sans (Text). Beispiel: Inter + DM Sans.
+  - **Option B**: Moderne Serif (Display) + Neutrale Sans (Text). Beispiel: Fraunces + Inter.
+  - **Option C**: Monospace (Display/Code) + Sans (Text). Fuer Developer-Tools. Beispiel: JetBrains Mono + Inter.
+- **MACHE** starken Groessenkontrast: Display mindestens 3x groesser als Body-Text. Dribbble-Trending zeigt: 72-120px Headlines bei 16-18px Body.
+- **MACHE** Variable Fonts wo moeglich. Ein Font-File, viele Gewichte. Performance-Vorteil und fliessende Gewichtsuebergaenge.
+- **VERMEIDE** Schriften mit aehnlichem Charakter zu paaren. Kontrast ist noetig: Serif + Sans, nicht Sans + Sans (es sei denn, bewusst minimalistisch).
+- **VERMEIDE** mehr als 4 Gewichtsstufen pro Schrift im Einsatz. Regular, Medium, Semibold, Bold reichen.
+- **VERMEIDE** Schriftgroessen unter 16px fuer Body-Text auf Screens. 16-18px ist Standard 2026.
+
+#### Aktuelle Typografie-Trends (2026)
+
+1. **Editorial Serif Renaissance**: Display-Serifen erleben Comeback. Playfair Display, Fraunces, Newsreader in Hero-Bereichen. Behance Top-Projekte nutzen dies fuer Premium-Wirkung.
+2. **Mono als Design-Statement**: JetBrains Mono, Geist Mono, Berkeley Mono nicht nur fuer Code, sondern als Design-Element in CTAs und Labels. Godly: Vercel, Linear.
+3. **Ultra-Condensed Headlines**: Enge Laufweiten in grossen Groessen. Beispiel: Aeonik Condensed, Instrument Sans Condensed. CSS Winner SOTD-Gewinner zeigen diesen Trend.
+4. **Handschrift-Akzente**: Vereinzelte handschriftliche Elemente als Kontrast zu sauberer Typografie. Nicht ganze Bloecke, sondern einzelne Woerter oder Annotationen.
+
+### Layout-Komposition
+
+- **MACHE** asymmetrische Balance: Nicht alles zentriert. Visuelles Gewicht gleichmaessig verteilen, aber nicht spiegelsymmetrisch.
+- **MACHE** grosszuegige vertikale Rhythmen: Sektionsabstaende von 120-200px auf Desktop. Behance und Dribbble Top-Designs zeigen: Mehr Raum = mehr Wertigkeit.
+- **MACHE** ein 12- oder 16-Spalten-Grid als Basis, dann bewusst brechen. CSSDA-WOTD wie Champion For Good (8.57) nutzen Grid-Brueche als Stilmittel.
+- **MACHE** volle Breite fuer Bilder/Visuals, eingeengte Breite (max 720px) fuer Text. Lesbarkeit bei 65-75 Zeichen pro Zeile.
+- **VERMEIDE** gleichmaessige Spalten ohne jede Variation. 50/50-Splits wirken statisch.
+- **VERMEIDE** mehr als 3 verschiedene Container-Breiten pro Seite. Maximal: schmal (Text), mittel (Content), breit (Full-Bleed).
+
+#### Aktuelle Layout-Archetypen (2026)
+
+**Bento Grid**: Ungleichmaessig grosse Karten in Grid-Formation. Grosse Karte links, kleinere rechts. Vercel Ship, Notion und Apple nutzen dies. Godly-Liebling.
+
+**Stacked Sections**: Volle Breite, vertikal gestapelt, jede Sektion eigenes Farbschema. Klare Trennung durch Farbe/Spacing. Dominantes Pattern auf Land-book.
+
+**Split Panel**: 50/50 oder 60/40 horizontale Teilung. Bild + Text oder zwei Contentbloecke. CSSDA-Portfolios wie Carles Faus, Artem Shcherban.
+
+**Masonry Flow**: Pinterest-artiges Layout mit variablen Hoehen. Fuer Galerien und Portfolio-Grids. SiteInspire zeigt dies in der Portfolio-Kategorie.
+
+### Bildsprache und Visuals
+
+- **MACHE** konsistente Bild-Behandlung innerhalb eines Projekts: Gleiche Filter, gleiche Perspektive, gleicher Stil.
+- **MACHE** 3D-Elemente gezielt: Abstrakte 3D-Formen als Dekoration, nicht als Ersatz fuer Inhalt. Behance zeigt: Glasmorphe und 3D-Orbs sind weiterhin praesent, aber subtiler geworden.
+- **MACHE** Illustrationen markenspezifisch. Generische Illustrations-Libraries (unDraw etc.) wirken 2026 veraltet.
+- **MACHE** Fotografie mit authentischem Charakter. Lifestyle-Shots mit natuerlichem Licht, keine ueberbelichteten Stock-Fotos.
+- **VERMEIDE** KI-generierte Bilder als Hauptvisuals. Sie sind erkennbar und untergraben Authentizitaet.
+- **VERMEIDE** unkomprimierte Bilder. WebP/AVIF mit Lazy Loading ist Standard.
+- **VERMEIDE** Bilder ohne alt-Text. Barrierefreiheit und SEO erfordern beschreibende Alternativtexte.
+
+#### Aktuelle Visual-Trends (2026)
+
+1. **Gradient Mesh als Hintergrund**: Weiche, mehrfarbige Gradienten mit Mesh-Effekt. Subtiler als flaechige Gradienten. Dribbble-Top-Designs nutzen dies extensiv.
+2. **Glasmorphismus 2.0**: Weiterentwicklung mit subtileren Effekten. backdrop-filter: blur(8-16px) mit niedriger Opazitaet. Nicht mehr plakativ, sondern als Tiefenebene.
+3. **Grain/Noise-Texturen**: Feines Rauschen (2-5% Opazitaet) auf Hintergruenden fuer haptische Qualitaet. CSSDA-Gewinner nutzen dies in Dark-Theme-Designs.
+4. **Duotone-Fotografie**: Zweifarbige Bildbehandlung fuer konsistente Bildsprache. Starker Markeneffekt.
+5. **Abstract Blobs**: Organische, amorphe Formen als Hintergrund-Dekoration. Weicher als geometrische Shapes.
+
+## Patterns
+
+### Dark Mode First
+**Wann:** Tech-Produkte, Developer Tools, Premium Brands.
+**Was:** Design beginnt mit Dark Mode. Heller Modus wird davon abgeleitet. Godly-Analyse zeigt: 70%+ der Featured Sites sind Dark-Mode-First. Farbsystem mit CSS Custom Properties aufbauen, Theme-Switch ueber class oder data-attribute.
+
+### Typographic Hero
+**Wann:** Statement-Landing-Pages, Agency-Sites, Portfolios.
+**Was:** Kein Bild im Hero, nur Typografie. Uebergrosse Headline (100px+), kontrastierende Subline. Negative Space als Design-Element. CSSDA-WOTD Sirnik (8.13), Artem Shcherban (8.26).
+
+### Visual Rhythm Section
+**Wann:** Lange Landing-Pages mit mehreren Sektionen.
+**Was:** Alternierende Hintergrundfarben: Dunkel > Hell > Dunkel oder Surface > Background > Surface. Jede Sektion hat eigene Farbtemperatur, aber gleiche Palette.
+
+### Monochrome + Accent
+**Wann:** Minimalistische Produkte, Luxury Brands.
+**Was:** Gesamtes Design in Schwarzweiss/Graustufen, eine einzige Akzentfarbe fuer CTAs und Highlights. Godly: Reflect (Blau-Akzent), Status (Gruen-Akzent).
+
+### Oversized Typography Grid
+**Wann:** Portfolios, Kreativ-Agenturen, Editorial.
+**Was:** Grosse Typografie als Grid-Element. Buchstaben brechen Spalten, Text wird zum visuellen Muster. Awwwards und CSSDA Portfolio-Gewinner.
+
+## Anti-Patterns
+
+1. **Trend-Collage** -- Glassmorphismus + Neubrutalism + Neumorphism auf einer Seite. Ein visueller Stil pro Projekt.
+2. **Uebersaettigte Gradienten** -- Der lila-pink-orange Gradient von 2023 wirkt 2026 generisch. Subtile, monochrome Gradienten bevorzugen.
+3. **Stock-Foto-Mix** -- Bilder von verschiedenen Stock-Quellen mit unterschiedlicher Aesthetik. Konsistenz erfordert einheitliche Bildsprache.
+4. **Schrift-Overload** -- 4+ verschiedene Schriftfamilien. Wirkt chaotisch statt kreativ.
+5. **Icon-Inkonsistenz** -- Verschiedene Icon-Sets (Outlined + Filled + Duotone) gemischt. Ein Stil, ein Set.
+6. **Shadow-Overkill** -- Zu viele Schattenstufen und -richtungen. Ein konsistentes Schatten-System mit 3-5 Stufen genuegt.
+7. **Rein dekorative Elemente** -- Shapes und Linien, die keinen Zweck haben. Jedes visuelle Element muss Hierarchie, Gruppierung oder Stimmung unterstuetzen.
+8. **Kontrast-Armut** -- Text auf Bildern ohne Overlay, helle Farben auf hellem Grund. Automatisierte Kontrast-Pruefung einsetzen.
+
+## Checkliste
+
+- [ ] Farbpalette hat definierte Rollen: Primaer, Neutral (5+ Stufen), Semantisch, Akzent
+- [ ] Alle Text-Hintergrund-Kombinationen erfuellen WCAG AA (4.5:1)
+- [ ] Maximal 2 Schriftfamilien im gesamten Projekt
+- [ ] Body-Text ist mindestens 16px
+- [ ] Display-Text ist mindestens 3x groesser als Body
+- [ ] Sektionsabstaende sind konsistent (z.B. 120px Desktop, 64px Mobil)
+- [ ] Bilder haben konsistente Behandlung (Filter, Perspektive, Stil)
+- [ ] Alle Bilder sind als WebP/AVIF mit Lazy Loading eingebunden
+- [ ] Icon-Set ist stilistisch einheitlich (ein Stil: Outlined ODER Filled)
+- [ ] Schatten-System hat maximal 5 definierte Stufen
+- [ ] Dark Mode ist implementiert oder als Primaer-Theme gewaehlt
+- [ ] Weissraum ist bewusst gestaltet, nicht zufaellig
+- [ ] Farbsystem nutzt CSS Custom Properties fuer Theme-Switching
+- [ ] Gradient oder Textur ist subtil (< 5% Noise-Opazitaet)
+- [ ] Kein Stock-Foto in Hero oder Feature-Bereichen
+
+## Querverweise
+
+- `16-design-trends.md` -- Uebergeordnete Trends, die diese visuelle Richtung praegen
+- `17-ui-patterns.md` -- Patterns, die mit dieser visuellen Richtung gestaltet werden
+- `03-typography.md` -- Typografie-System und Skalierung (falls vorhanden)
+- `02-color.md` -- Farbsystem und Token-Struktur (falls vorhanden)
+
+## Quellen
+
+- **Dribbble** (dribbble.com) -- Trending Shots April 2026: Email Marketing Platform UI (Fahema Yesmin), Restaurant Management Dashboard (Josim), Dashboard for Education Product Filko (HALO LAB), Luxury Furniture E-Commerce. Analyse von Farbpaletten, Typografie und Layout-Komposition.
+- **Behance** (behance.net) -- Top-Projekte nach Anerkennungen: lifeOS AI Agents App UX/UI, SmileCare Web Platform (243 Anerkennungen), Lifestyle App Design (177), Charging Stations App (176), Qupid Protocol (276). Deutsche Lokalisierung ("Meiste Anerkennungen").
+- **Land-book** (land-book.com) -- Kuratierte Galerie mit Filtern: Industry (Ecommerce, Fashion, Finance, Food, Design), Style (Minimal, Colorful, Dark). Desktop- und Mobile-Ansichten. Featured Studios wie Flowfye (Webflow-spezialisiert).
+- **Godly** (godly.website) -- Style-Tags-Analyse: Clean, Dark, Minimal, Colorful, Brutalist, Black & White. Featured Sites: Amie, Reflect, Status, Vercel Ship, Notion, Lusion, Phantom, Metalab. View-Counts als Popularitaets-Indikator.
+- **CSSDA** (cssdesignawards.com) -- Feature-Tags der WOTD-Gewinner: animated, parallax, colorful, minimal, typographic, scroll, photographic, grid, fullscreen, one page, responsive.

package/spec/domains/19-component-architecture.md

@@ -0,0 +1,183 @@
+# Domain: Component-Architecture
+
+> Moderne UI-Komponentenmuster fuer Agent-basierte Anwendungen. Abgeleitet aus 21st.dev Agent SDK Dokumentation, deren Template-Bibliothek und preisgekroenten Produkten auf Godly/Dribbble/Behance.
+
+## Prinzipien
+
+1. **Komposition ueber Vererbung** -- Komponenten werden durch Zusammenstecken kleiner, spezialisierter Teile gebaut, nicht durch Erweiterung grosser Basisklassen. Props fuer Konfiguration, Children fuer Inhalt, Slots fuer Variation.
+2. **Server-First, Client wo noetig** -- Server Components als Standard. Client Components nur fuer Interaktivitaet (State, Event Handlers, Browser APIs). 21st.dev SDK nutzt Next.js mit dieser Trennung.
+3. **Agent-Ready Design** -- Komponenten muessen Streaming-Inhalte, Tool-Aufrufe und asynchrone Zustandswechsel nativ unterstuetzen. Chat-UIs sind nicht optional, sondern Kern-Pattern.
+4. **Token-basiertes Theming** -- Design Tokens (CSS Custom Properties) steuern alle visuellen Aspekte. Kein Hardcoding von Farben, Abstaenden oder Schriftgroessen in Komponenten.
+5. **Barrierefreiheit als Architektur** -- ARIA-Rollen, Keyboard-Navigation und Focus-Management sind Teil der Komponentendefinition, nicht nachtraegliche Ergaenzung.
+6. **Composable Primitives** -- Basis-Primitiven (Button, Input, Text, Box) sind unstyled und maximal flexibel. Design-System-Komponenten bauen darauf auf.
+
+## Regeln
+
+### Komponentenstruktur
+
+- **MACHE** jede Komponente als einzelne Datei mit klarem Export. Eine Komponente = eine Verantwortung.
+- **MACHE** Props-Interface explizit typisieren. TypeScript-Interfaces fuer alle oeffentlichen Props. Zod-Schemas fuer validierte Inputs (21st.dev Muster).
+- **MACHE** Compound Components fuer komplexe UI-Elemente:
+  ```
+  <Card>
+    <Card.Header />
+    <Card.Body />
+    <Card.Footer />
+  </Card>
+  ```
+- **MACHE** Variants mit class-variance-authority (cva) oder aehnlichen Bibliotheken statt bedingter Klassen.
+- **VERMEIDE** Komponenten mit mehr als 10 Props. Zu viele Props = zu viele Verantwortungen. Aufteilen.
+- **VERMEIDE** CSS-in-JS zur Laufzeit. Tailwind CSS oder CSS Modules fuer statische Styles. 21st.dev und Godly-Featured Produkte nutzen Tailwind.
+- **VERMEIDE** div-Suppe. Semantische HTML-Elemente (section, article, nav, header, footer, main) verwenden.
+
+### Chat-UI-Architektur
+
+- **MACHE** eine dreispaltige Chat-Architektur nach 21st.dev-Muster:
+  - **Thread-Sidebar**: Liste vergangener Konversationen. Scrollbar, mit Suchfunktion.
+  - **Chat-Panel**: Nachrichten-Stream mit Eingabefeld. Hauptinteraktionsbereich.
+  - **Kontext-Panel**: Optional, fuer Ergebnisse, Previews, Formulare.
+- **MACHE** Message-Komponenten nach Rolle differenzieren:
+  - **User Message**: Rechtsbuendig, Akzentfarbe, kompaktes Layout.
+  - **Assistant Message**: Linksbuendig, neutral, erweiterbar fuer Tool-Ergebnisse.
+  - **System Message**: Zentriert, dezent, informativ.
+  - **Tool Call**: Visuell abgesetzt mit Status-Indikator (ausfuehrend/erfolgreich/fehlgeschlagen).
+- **MACHE** Streaming-Rendering: Text zeichenweise oder wortweise einblenden. Cursor-Indikator waehrend Generierung. 21st.dev nutzt SSE-Streaming mit AI SDK.
+- **MACHE** Message-History lazy laden. Nur die letzten N Nachrichten initial rendern, aeltere bei Scroll nach oben nachladen.
+- **VERMEIDE** gesamte Nachrichtenhistorie im Client-State. Server-seitige Persistenz nutzen, Client zeigt nur aktive Ansicht.
+- **VERMEIDE** blockierendes Rendering waehrend Tool-Ausfuehrung. Progress-Indikatoren zeigen, dass das System arbeitet.
+
+### Agent-Tool-Visualisierung
+
+- **MACHE** Tool-Aufrufe visuell im Chat-Verlauf darstellen:
+  - **Tool-Name**: Als Label/Badge vor dem Ergebnis.
+  - **Input-Parameter**: Collapsible, fuer Power-User einsehbar.
+  - **Ergebnis**: Formatiert je nach Tool-Typ (Text, Tabelle, Code, Bild).
+  - **Status**: Loading-Spinner > Erfolg-Haekchen > Fehler-Icon.
+- **MACHE** Tool-Ergebnisse als eingebettete Karten im Nachrichtenstrom. Nicht als separate Ansicht.
+- **MACHE** Fehler-Zustaende fuer Tools explizit: Was ging schief, was kann der Nutzer tun.
+- **VERMEIDE** Tool-Aufrufe ohne visuelles Feedback. Der Nutzer muss jederzeit wissen, was das System tut.
+- **VERMEIDE** rohe JSON-Ausgabe fuer Tool-Ergebnisse. Immer formatiert und menschenlesbar.
+
+### Sandbox-UI-Patterns
+
+- **MACHE** Sandbox-Zustand visuell kommunizieren (nach 21st.dev Modell):
+  - **Erstellt**: Visueller Indikator, dass Umgebung bereit ist.
+  - **Aktiv**: Gruener Status-Punkt oder -Balken.
+  - **Ausfuehrend**: Animierter Zustand mit Fortschrittsindikation.
+  - **Beendet**: Finaler Zustand mit Ergebnis-Zusammenfassung.
+- **MACHE** File-Trees fuer Sandbox-Inhalte als interaktive Baumstruktur. Klick oeffnet Datei-Vorschau.
+- **VERMEIDE** Sandbox-Details in der Standard-Ansicht. Progressive Disclosure: Details nur auf Nachfrage.
+
+### Theming und Design Tokens
+
+- **MACHE** ein dreistufiges Token-System:
+  - **Globale Tokens**: Roh-Werte (colors.blue.500, spacing.4, radius.md).
+  - **Semantische Tokens**: Zweckgebunden (color.primary, color.surface, spacing.section).
+  - **Komponenten-Tokens**: Spezifisch (button.bg, card.padding, input.border).
+- **MACHE** Theme-Switching ueber CSS Custom Properties mit data-Attribut oder Klasse auf html/body.
+- **MACHE** Tokens in einer zentralen Datei definieren und von dort importieren. Keine verteilten Magic Numbers.
+- **MACHE** Dark/Light als Minimum, optional: High Contrast, Markenspezifische Themes.
+- **VERMEIDE** Inline-Styles fuer thembare Werte. Immer Tokens referenzieren.
+- **VERMEIDE** Token-Namen, die Farben beschreiben (--blue-500). Semantische Namen (--color-primary).
+
+### Formular-Komponenten
+
+- **MACHE** Formulare nach dem 21st.dev Form-Autocomplete-Pattern:
+  - **Tabbed Forms**: Mehrstufige Formulare mit Tab-Navigation.
+  - **Schema-getrieben**: Zod-Schemas definieren Felder und Validierung.
+  - **Agent-befuellbar**: Formulare koennen von einem Agent via Tool-Call befuellt werden.
+- **MACHE** React Hook Form oder aehnliche Libraries fuer Performance (uncontrolled Components).
+- **MACHE** konsistente Feld-Anatomie: Label > Input > Helper Text > Error Message.
+- **VERMEIDE** Custom-Selects ohne Keyboard-Support. Native Select oder Radix UI Select.
+- **VERMEIDE** Formulare ohne Loading- und Success-States nach Submit.
+
+### Responsive Komponenten
+
+- **MACHE** Container Queries fuer komponentenbasierte Responsiveness. Nicht nur Viewport-Breakpoints.
+- **MACHE** Mobile-Varianten als eigene Zustaende, nicht als CSS-Overrides. Chat-Panel wird auf Mobil zum Vollbild, Sidebar wird zum Drawer.
+- **MACHE** Touch-Targets mindestens 44x44px auf mobilen Geraeten.
+- **VERMEIDE** horizontales Scrollen in Komponenten auf Mobil (Ausnahme: explizite Karussells).
+- **VERMEIDE** Hover-abhaengige Interaktionen ohne Touch-Alternative.
+
+## Patterns
+
+### Streaming Chat Message
+**Wann:** Jede KI-gesteuerte Chat-Anwendung.
+**Was:** Nachricht wird zeichenweise gerendert waehrend SSE-Stream. Blinkender Cursor am Ende. Markdown-Rendering fuer formatierte Antworten. Code-Bloecke mit Syntax-Highlighting. 21st.dev nutzt AI SDK mit `useChat` Hook fuer dieses Pattern.
+
+### Tool-Execution-Card
+**Wann:** Agent fuehrt eine Aktion aus (Datei lesen, API aufrufen, Berechnung).
+**Was:** Eingebettete Karte im Chat-Stream:
+- Header: Tool-Name + Status-Badge (running/success/error)
+- Body: Collapsible Input-Parameter + formatiertes Ergebnis
+- Footer: Dauer, optional Retry-Button bei Fehler
+
+### Three-Panel Layout
+**Wann:** Agent-Dashboards, Chat-Anwendungen mit Kontext.
+**Was:** Drei Spalten: Navigation/Threads (240px) | Chat (flex) | Kontext/Preview (320px). Mittlere Spalte ist flexibel. Seitenpanels sind collapsible. 21st.dev Note Taker und Next.js Starter nutzen dieses Pattern.
+
+### Skill-Configuration Panel
+**Wann:** Agent-Setup, System-Prompt-Konfiguration.
+**Was:** Sidebar oder Modal mit:
+- Textfeld fuer System Prompt (max 4.000 Zeichen nach 21st.dev)
+- Skill-Bibliothek mit Drag-and-Drop-Zuweisung
+- Umgebungsvariablen-Editor (Key-Value-Paare)
+- Deploy-Button mit Status-Feedback
+
+### Progressive Disclosure Card
+**Wann:** Komplexe Datensaetze, API-Responses, Debug-Informationen.
+**Was:** Kompakte Zusammenfassung als Standard-Ansicht. Klick/Toggle zeigt volle Details. Dreistufig: Summary > Details > Raw Data.
+
+### Form-Agent Hybrid
+**Wann:** Formular-Assistenten, Daten-Eingabe mit KI-Unterstuetzung.
+**Was:** Split-Screen: Formular links, Chat rechts. Agent kann Formularfelder via Tool-Call befuellen. Nutzer kann manuell ueberschreiben. 21st.dev Form Autocomplete Template zeigt dieses Pattern mit React Hook Form + Zod + discriminated union Schemas.
+
+### Real-Time Status Dashboard
+**Wann:** Monitoring-Agents, DevOps-Tools.
+**Was:** Dashboard mit Live-Updates via WebSocket/SSE. Farbkodierte Status-Kacheln (gruen/gelb/rot). Log-Stream als scrollbare Liste. 21st.dev Slack Monitor Template als Referenz.
+
+## Anti-Patterns
+
+1. **God Component** -- Eine Komponente, die Chat, Tool-Visualisierung, Formular und Navigation gleichzeitig handhabt. Aufteilen in spezialisierte Subkomponenten.
+2. **Prop Drilling fuer Theme** -- Theme-Werte durch 5+ Ebenen weiterreichen. Context oder CSS Custom Properties nutzen.
+3. **Client-Side Everything** -- Alles als Client Component markieren. Server Components fuer statische Inhalte, Client Components nur fuer Interaktivitaet.
+4. **Inline Styles fuer Layout** -- style={{ marginTop: 20 }} statt konsistenter Spacing-Tokens. Tailwind-Klassen oder Token-basierte Utilities nutzen.
+5. **Modal fuer Alles** -- Jede Zusatzinfo als Modal. Inline-Expansion, Drawers oder Panels bevorzugen. Modals nur fuer unterbrechende Aktionen.
+6. **Unkontrollierte State-Explosion** -- Jede Komponente hat eigenen lokalen State fuer globale Daten. Zentralen State-Store oder Server-State (React Query/SWR) nutzen.
+7. **Hardcoded Breakpoints** -- Pixel-Werte direkt in Komponenten. Breakpoint-Tokens in der Theme-Konfiguration definieren.
+8. **Fehlende Error Boundaries** -- Ein Fehler in einer Subkomponente crasht die gesamte Anwendung. React Error Boundaries um kritische Bereiche setzen.
+9. **Tool-Ergebnisse als JSON-Dump** -- Rohe API-Responses ohne Formatierung anzeigen. Immer menschenlesbar aufbereiten.
+
+## Checkliste
+
+- [ ] Jede Komponente hat ein typisiertes Props-Interface (TypeScript)
+- [ ] Compound Components fuer komplexe UI-Elemente (Card, Dialog, Tabs)
+- [ ] Variants mit cva oder aehnlichem System, nicht bedingte Klassen
+- [ ] Chat-Messages differenzieren nach Rolle (User, Assistant, System, Tool)
+- [ ] Streaming-Rendering fuer Agent-Antworten implementiert
+- [ ] Tool-Aufrufe haben visuelles Feedback (Loading, Success, Error)
+- [ ] Tool-Ergebnisse sind formatiert, nicht rohe JSON-Ausgabe
+- [ ] Design Tokens in drei Stufen: Global, Semantisch, Komponenten
+- [ ] Theme-Switch ueber CSS Custom Properties, nicht JS-Runtime
+- [ ] Formulare nutzen Zod-Schemas fuer Validierung
+- [ ] Server Components als Standard, Client Components nur bei Bedarf
+- [ ] Container Queries fuer komponentenbasierte Responsiveness
+- [ ] Error Boundaries um kritische UI-Bereiche
+- [ ] Mobile Touch-Targets mindestens 44x44px
+- [ ] Keyboard-Navigation fuer alle interaktiven Elemente
+- [ ] ARIA-Rollen und -Labels fuer Screen Reader
+
+## Querverweise
+
+- `16-design-trends.md` -- Trends, die Komponentendesign beeinflussen (Motion, Dark Mode)
+- `17-ui-patterns.md` -- UI-Patterns, die als Komponenten implementiert werden
+- `18-visual-direction.md` -- Visuelle Tokens (Farben, Typo, Spacing) fuer das Token-System
+- `06-accessibility.md` -- Barrierefreiheits-Anforderungen (falls vorhanden)
+
+## Quellen
+
+- **21st.dev Agent SDK** (21st.dev/agents/docs) -- Vollstaendige Dokumentation analysiert: Quickstart, Core Concepts (Agent, Tool, Skill, Sandbox, Thread, Relay), Agents-Konfiguration, Tools und MCPs, System Prompts, Skills, Chat API (SSE Streaming), Backend Integration, Messages & History, Deploy (CLI), Sandboxes & Infrastructure, API Keys, Logs. 39 Dokumentationsseiten.
+- **21st.dev Templates** -- 11 analysierte Templates: Next.js Starter (Chat UI mit DuckDuckGo-Tool), Note Taker (Convex-Integration, Three-Panel), Lead Research Agent (Slack-Integration), Slack Monitor, BrowserUse Agent, Form Autocomplete (React Hook Form + Zod), Docs Assistant (llms.txt), Support Agent (Resend), Python Starter, Go Starter, Nia Chat (GitHub-Analyse).
+- **Godly Featured Products** (godly.website) -- UI-Architektur von: Amie (Kalender), Reflect (Notizen), Status (Monitoring), Notion (Docs), Linear (Project Management), Vercel (Deploy). Style-Tags: Clean, Dark, Minimal, Motion.
+- **Dribbble** (dribbble.com) -- Dashboard-Designs: Education Product Filko, Email Marketing Platform, Restaurant Management. Komponentenmuster fuer Dashboards und SaaS.
+- **Behance** (behance.net) -- UX/UI-Projekte: lifeOS AI Agents App (Agent-UI-Referenz), SmileCare Web Platform (Medical Dashboard), Lifestyle App, Charging Stations App. Komponentenstruktur und Layout-Patterns.