@flitzrrr/frontend-design-skills 1.0.0

package/skills-src/visual-direction/references/archetypen.md

@@ -0,0 +1,93 @@
+# Visual-Direction: Paletten-Archetypen und Typografie-Trends
+
+> Aktuelle Referenzwerte fuer Farbpaletten und Typografie (Q1/Q2 2026). Diese Datei ist fuer periodische Aktualisierungen strukturiert.
+
+## Paletten-Archetypen (2026)
+
+### Tech Minimal
+- Background: `#0A0A0A`
+- Text: `#FAFAFA`
+- Accent: `#3B82F6`
+- Surface: `#27272A`
+- **Referenz:** Godly-Sites: Status, Reflect, Height
+
+### Warm Premium
+- Background: `#F5F0EB`
+- Text: `#1A1A1A`
+- Accent: `#C4956A`
+- Surface: `#E8E0D5`
+- **Referenz:** Land-book Ecommerce/Fashion, CSSDA Springs
+
+### Bold Creative
+- Background: `#1A1A2E`
+- Text: `#FFFFFF`
+- Accent: `#FF6B35`
+- Surface: `#16213E`
+- **Referenz:** Awwwards-Portfolios, Godly KidSuper World, UNVEIL
+
+### Clean SaaS
+- Background: `#FFFFFF`
+- Text: `#111827`
+- Accent: `#6366F1`
+- Surface: `#F9FAFB`
+- **Referenz:** Dribbble SaaS-Designs, Behance lifeOS, SmileCare
+
+### Nature/Wellness
+- Background: `#F7F5F0`
+- Text: `#2D3436`
+- Accent: `#00B894`
+- Surface: `#EBE5DA`
+- **Referenz:** CSSDA Springs (Wellness), Land-book Lifestyle
+
+## Typografie-Trends (2026)
+
+### 1. Editorial Serif Renaissance
+Display-Serifen erleben Comeback. Playfair Display, Fraunces, Newsreader in Hero-Bereichen. 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. Referenz: Vercel, Linear.
+
+### 3. Ultra-Condensed Headlines
+Enge Laufweiten in grossen Groessen. Aeonik Condensed, Instrument Sans Condensed. CSS Winner SOTD-Gewinner zeigen diesen Trend.
+
+### 4. Handschrift-Akzente
+Vereinzelte handschriftliche Elemente als Kontrast zu sauberer Typografie. Einzelne Woerter oder Annotationen, nicht ganze Bloecke.
+
+## Visual-Trends (2026)
+
+### 1. Gradient Mesh als Hintergrund
+Weiche, mehrfarbige Gradienten mit Mesh-Effekt. Subtiler als flaechige Gradienten.
+
+### 2. Glasmorphismus 2.0
+Subtilere Effekte: `backdrop-filter: blur(8-16px)` mit niedriger Opazitaet. Als Tiefenebene, nicht plakativ.
+
+### 3. Grain/Noise-Texturen
+Feines Rauschen (2-5% Opazitaet) auf Hintergruenden fuer haptische Qualitaet. Besonders 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.
+
+## Layout-Archetypen (2026)
+
+### Bento Grid
+Ungleichmaessig grosse Karten in Grid-Formation. Grosse Karte links, kleinere rechts. Vercel Ship, Notion, Apple.
+
+### Stacked Sections
+Volle Breite, vertikal gestapelt, jede Sektion eigenes Farbschema. Klare Trennung durch Farbe/Spacing.
+
+### Split Panel
+50/50 oder 60/40 horizontale Teilung. Bild + Text oder zwei Contentbloecke.
+
+### Masonry Flow
+Pinterest-artiges Layout mit variablen Hoehen. Fuer Galerien und Portfolio-Grids.
+
+## Quellen
+
+- **Dribbble** -- Trending Shots April 2026, Analyse von Farbpaletten und Layout-Komposition
+- **Behance** -- Top-Projekte: lifeOS AI Agents, SmileCare (243 Anerkennungen), Qupid Protocol (276)
+- **Land-book** -- Kuratierte Galerie, Filter: Industry und Style
+- **Godly** -- Style-Tags: Clean, Dark, Minimal, Colorful, Brutalist, Black & White
+- **CSSDA** -- Feature-Tags: animated, parallax, colorful, minimal, typographic, grid, fullscreen

package/skills-src/web-typography/SKILL.md

@@ -0,0 +1,133 @@
+---
+name: web-typography
+description: Schriftwahl, Schriftpaarung, typografische Skalen, Zeilenhoehe, Zeilenlaenge und CSS-Umsetzung fuer Web-Typografie. Definiert Regeln fuer lesbare, performante und hierarchisch strukturierte Textgestaltung.
+---
+
+# Web-Typografie
+
+> Lesbare, hierarchisch strukturierte und performante Textgestaltung fuer das Web.
+
+## Anwendungsbereich
+
+Verwende diesen Skill wenn: Du Schriften auswaehlst, Schriftpaarungen definierst, typografische Skalen aufbaust, Zeilenhoehen und -laengen festlegst, Fluid Typography implementierst, oder bestehende Typografie auf Qualitaet pruefst.
+
+## Prinzipien
+
+### 1. Typografie ist User Interface
+Text ist die primaere Informationsschicht. Die typografische Gestaltung bestimmt, ob Inhalte gelesen, ueberflogen oder ignoriert werden.
+
+### 2. Lesbarkeit vor Aesthetik
+Eine Schrift muss zuerst gut lesbar sein. Wenn der Nutzer sich auf die Formatierung konzentriert statt auf den Inhalt, ist die Typografie gescheitert.
+
+### 3. Hierarchie durch Typografie schaffen
+Verschiedene Groessen, Gewichte und Stile bilden eine klare Informationsrangfolge. Der Blickverlauf wird typografisch gelenkt.
+
+### 4. Weniger Schriften -- mehr Wirkung
+Maximal 2-3 Schriftfamilien pro Projekt. Jede zusaetzliche Schrift erhoeht Ladezeit und reduziert Kohaerenz.
+
+### 5. Emotionale Wirkung bewusst einsetzen
+Serifenlose Grotesk = modern/neutral. Serifenschrift = klassisch/vertrauenswuerdig. Display-Schrift = expressiv/einzigartig.
+
+## Regeln
+
+### Schriftwahl
+
+- **DO**: Schriften passend zur Markenidentitaet waehlen. Corporate: Inter, Geist, DM Sans. Kreativ: Display-Fonts.
+- **DO**: Zeichensatzabdeckung pruefen: Umlaute, scharfes S, Sonderzeichen (deutschsprachige Pflicht).
+- **DO**: Variable Fonts verwenden wenn verfuegbar (ein File statt 6+).
+- **DO**: Self-hosted WOFF2 bevorzugen (DSGVO: kein Google Fonts CDN).
+- **DON'T**: Mehr als 2 Schriftfamilien fuer Body + Headings. Dritte nur fuer Akzente.
+- **DON'T**: Comic Sans, Papyrus oder Impact in professionellen Kontexten -- niemals.
+
+### Schriftpaarung
+
+- **DO**: Kontrast kombinieren: Serif fuer Headlines + Sans fuer Body (oder umgekehrt).
+- **DO**: Aehnliche x-Hoehe der Paare fuer optische Harmonie.
+- **DO**: Bewaehrte Kombinationen nutzen: Playfair Display + Source Sans Pro, Poppins + Inter.
+- **DON'T**: Zwei aehnliche Serifenlose kombinieren. Fehlender Kontrast wirkt unentschlossen.
+
+### Groessen & Skala
+
+- **DO**: Typografische Skala verwenden: Major Third (1.250) oder Perfect Fourth (1.333).
+- **DO**: Body mindestens 16px (besser 18px).
+- **DO**: Headlines: Mobile min. 24px, Desktop min. 32px.
+- **DO**: `clamp()` fuer fluid responsive Groessen: `font-size: clamp(1rem, 2.5vw, 2rem)`.
+- **DON'T**: Schriftgroessen unter 14px fuer lesbaren Inhalt. Minimum 12px fuer Fusszeilen.
+
+### Zeilenhoehe & Zeilenlaenge
+
+- **DO**: Body line-height: 1.5 bis 1.75.
+- **DO**: Headline line-height: 1.1 bis 1.3.
+- **DO**: Zeilenlaenge 45-75 Zeichen (optimal: 65). CSS: `max-width: 65ch`.
+- **DON'T**: Line-height 1.0 oder darunter fuer mehrzeiligen Text.
+- **DON'T**: Textzeilen ueber volle Viewport-Breite laufen lassen (ab 80+ Zeichen sinkt Lesbarkeit drastisch).
+
+### Textgestaltung
+
+- **DO**: Blocksatz nur mit Silbentrennung (`hyphens: auto`).
+- **DO**: Flattersatz (text-align: left) fuer Web-Content bevorzugen.
+- **DO**: `text-wrap: balance` fuer Headlines.
+- **DO**: Hervorhebung mit `font-weight: 600-700`, nicht mit Unterstrichen oder CAPSLOCK.
+- **DON'T**: Unterstreichung als Textauszeichnung -- im Web bedeutet Unterstrich immer "Link".
+- **DON'T**: Laengere Texte in Versalien. Nur fuer kurze Labels/Buttons (max. 3-4 Woerter).
+
+### Performance
+
+- **DO**: WOFF2-Format (beste Komprimierung).
+- **DO**: `font-display: swap` verwenden.
+- **DO**: Wichtigste Schrift preloaden: `<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>`.
+- **DO**: Fonts subsetten wenn nur lateinische Zeichen benoetigt (60-80% Ersparnis).
+- **DON'T**: Mehr als 4 Font-Dateien laden (inkl. Gewichte).
+
+## Patterns
+
+Detaillierte Pattern-Beschreibungen: siehe `references/patterns.md`
+
+### Typografische Hierarchie (Standard-Setup)
+H1: 40-56px Bold, H2: 32-40px SemiBold, H3: 24-28px SemiBold, Body: 16-18px Regular, Small: 14px, Eyebrow: 12-14px SemiBold Uppercase.
+
+### Fluid Typography
+`clamp()` auf allen Textebenen. Keine Media-Query-Breakpoints fuer Schriftgroessen noetig.
+
+### Editorial Typography
+Serifenschrift fuer Body (18-20px). Engere Zeilenlaenge (max 60ch). Drop-Caps. Pull-Quotes mit Display-Schrift.
+
+## Anti-Patterns
+
+### Textwueste
+Langer Fliesstext ohne Struktur. **Loesung**: Alle 2-3 Absaetze eine Zwischenueberschrift. Aufzaehlungen und Zitate als Rhythmusgeber.
+
+### Schriften-Overload
+Mehr als 3 Familien, uneinheitliche Gewichte, zufaellige Groessen. **Loesung**: 2 Familien, definierte Skala, dokumentierte Regeln.
+
+### Zu kleine Schrift
+Body unter 16px, besonders auf Mobile. **Loesung**: Body min. 16px, auf Mobile eher 18px. Auf echten Geraeten testen.
+
+### Mangelnder Kontrast
+Hellgrauer Text auf weissem Hintergrund. **Loesung**: Min. 4.5:1 fuer Body-Text (WCAG AA). Fuer grosse Headlines (>= 24px): min. 3:1.
+
+## Checkliste
+
+- [ ] Max. 2-3 Schriftfamilien?
+- [ ] Typografische Skala definiert und konsequent angewendet?
+- [ ] Body mindestens 16px?
+- [ ] Zeilenhoehe Body 1.5-1.75, Headlines 1.1-1.3?
+- [ ] Zeilenlaenge 45-75 Zeichen (ideal 65ch)?
+- [ ] Fonts als WOFF2 mit `font-display: swap`?
+- [ ] Max. 4 Font-Dateien geladen?
+- [ ] Kontrast Body-Text mindestens 4.5:1?
+- [ ] Keine Unterstreichung als Textauszeichnung?
+- [ ] Kein Blocksatz ohne Silbentrennung?
+- [ ] `clamp()` fuer responsive Groessen?
+- [ ] Abstand vor Headlines groesser als nach Headlines?
+- [ ] Umlaute und Sonderzeichen in der Schrift vorhanden?
+- [ ] Fonts self-hosted (DSGVO)?
+
+## Querverweise
+
+- `ui-design` -- Typografie als Kernelement der visuellen Hierarchie
+- `color-theory` -- Schriftfarbe und Kontrastverhaeltnisse
+- `accessibility` -- WCAG-Kontrastvorgaben fuer Text
+- `responsive-design` -- Fluid Typography ueber Breakpoints
+- `branding-identity` -- Schrift als Markenelement
+- `visual-direction` -- Aktuelle typografische Trends

package/skills-src/web-typography/references/patterns.md

@@ -0,0 +1,109 @@
+# Web-Typografie -- Patterns (Referenz)
+
+## Typografische Hierarchie (Standard-Setup)
+
+Fuer jedes Webprojekt verbindlich:
+
+| Ebene | Groesse | Gewicht | Line-Height | Zusatz |
+|-------|---------|---------|-------------|--------|
+| H1 | 40-56px | Bold (700) | 1.1 | Primaere Schrift |
+| H2 | 32-40px | SemiBold (600) | 1.2 | Primaere Schrift |
+| H3 | 24-28px | SemiBold (600) | 1.3 | Primaere oder sekundaere Schrift |
+| Body | 16-18px | Regular (400) | 1.6 | Sekundaere Schrift |
+| Small/Caption | 14px | Regular (400) | 1.5 | Sekundaere Schrift |
+| Eyebrow/Label | 12-14px | SemiBold (600) | 1.5 | Uppercase, `letter-spacing: 0.05em` |
+
+## Typografische Skalen
+
+### Major Third (1.250)
+Basis 16px: 16 / 20 / 25 / 31 / 39 / 49px
+
+### Perfect Fourth (1.333)
+Basis 16px: 16 / 21 / 28 / 38 / 50 / 67px
+
+### Minor Third (1.200)
+Basis 16px: 16 / 19 / 23 / 28 / 33 / 40px
+
+Regel: Jede verwendete Groesse muss Teil der definierten Skala sein. Keine willkuerlichen Zwischenwerte.
+
+## Fluid Typography
+
+**CSS-Implementierung**:
+
+```css
+:root {
+  --font-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
+  --font-h3: clamp(1.25rem, 1vw + 1rem, 1.75rem);
+  --font-h2: clamp(1.5rem, 2vw + 1rem, 2.5rem);
+  --font-h1: clamp(2rem, 3vw + 1rem, 3.5rem);
+}
+```
+
+**Vorteile**:
+- Keine Media-Query-Breakpoints fuer Schriftgroessen noetig
+- Fliessender Uebergang zwischen Mobile und Desktop
+- Eine Zeile CSS pro Groessenstufe
+
+## Editorial Typography
+
+**Wann**: Blogs, Magazine, Long-Form-Content.
+
+**Umsetzung**:
+- Serifenschrift fuer Body: Georgia, Lora, Merriweather
+- Groessere Schrift: 18-20px
+- Engere Zeilenlaenge: max 60ch
+- Drop-Caps fuer Artikelanfaenge
+- Pull-Quotes mit Display-Schrift
+- Grosszuegige Absatzabstaende
+
+**CSS Drop-Cap**:
+```css
+.article p:first-of-type::first-letter {
+  font-size: 3.5em;
+  float: left;
+  line-height: 0.8;
+  margin-right: 0.1em;
+  font-family: var(--font-display);
+}
+```
+
+## Bewaehrte Schriftpaarungen
+
+| Headline | Body | Stil |
+|----------|------|------|
+| Playfair Display | Source Sans Pro | Klassisch-elegant |
+| Merriweather | Open Sans | Editorial |
+| Poppins | Inter | Modern-sauber |
+| DM Serif Display | DM Sans | Harmonisch (gleiche Familie) |
+| Fraunces | Work Sans | Kreativ-professionell |
+
+## Abstaende & Rhythmus
+
+- Abstand zwischen Absaetzen: 1-1.5x der Zeilenhoehe
+- Abstand VOR Headline: groesser als Abstand NACH Headline (Headline gehoert zum folgenden Absatz)
+- Letter-spacing Uppercase: +0.02em bis +0.05em
+- Letter-spacing grosse Headlines: -0.01em bis -0.02em
+- Kein identischer Abstand ueberall: Vertikaler Rhythmus braucht hierarchische Variation
+
+## Font-Loading-Strategie
+
+```html
+<!-- Preload der wichtigsten Schrift -->
+<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
+
+<!-- Font-Face mit swap -->
+<style>
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-var.woff2') format('woff2');
+  font-weight: 100 900;
+  font-display: swap;
+}
+</style>
+```
+
+Regeln:
+- Maximal 4 Font-Dateien laden
+- WOFF2-Format (beste Komprimierung)
+- Variable Fonts wenn moeglich (ein File fuer alle Gewichte)
+- Subsetting fuer nicht benoetigte Zeichen

package/skills-src/webdesign-review/SKILL.md

@@ -0,0 +1,130 @@
+---
+name: webdesign-review
+description: Meta-Skill fuer umfassende Webdesign-Reviews. Orchestriert alle 20 Domain-Skills fuer systematische Analyse von Websites, Designs und Prototypen nach Enterprise-Design-Standards.
+---
+
+# Webdesign-Review
+
+> Systematische Design-Reviews durch orchestrierte Anwendung aller Domain-Skills.
+
+## Anwendungsbereich
+
+Verwende diesen Skill wenn: Du ein umfassendes Design-Review einer Website, eines Prototypen oder eines Designs durchfuehrst. Dieser Meta-Skill koordiniert die Analyse ueber alle relevanten Design-Domains hinweg und stellt sicher, dass keine Dimension uebersehen wird.
+
+## Prinzipien
+
+### 1. Systematik ueber Bauchgefuehl
+Ein Design-Review folgt einer definierten Struktur, nicht persoenlichen Vorlieben. Jede Bewertung muss durch eine konkrete Regel oder ein Prinzip aus den Domain-Skills begruendet sein.
+
+### 2. Priorisierung nach Wirkung
+Nicht alle Maengel wiegen gleich. Priorisiere: Barrierefreiheit und Usability vor Aesthetik. Funktionale Fehler vor stilistischen Praeferenzen.
+
+### 3. Konstruktive Kritik mit Loesungsvorschlag
+Jede identifizierte Schwaeche wird mit einem konkreten Verbesserungsvorschlag begleitet. "Das ist schlecht" ist kein Review -- "Das verletzt Regel X, besser waere Y" ist ein Review.
+
+### 4. Vollstaendigkeit durch Checklisten
+Die Checklisten der einzelnen Domain-Skills bilden die Grundlage des Reviews. Kein Punkt wird uebersprungen.
+
+## Regeln
+
+### Review-Ablauf
+
+- **DO**: Beginne IMMER mit einer Gesamtbetrachtung, bevor du in Details gehst.
+- **DO**: Arbeite die Domains in dieser Reihenfolge ab (nach Prioritaet):
+  1. `accessibility` -- Barrierefreiheit (rechtliche Pflicht, BFSG)
+  2. `usability` -- Benutzerfreundlichkeit
+  3. `ux-design` -- Nutzererlebnis und Flows
+  4. `ui-design` -- Layout, Hierarchie, Komponenten
+  5. `web-typography` -- Schrift, Lesbarkeit, Skala
+  6. `color-theory` -- Farben, Kontraste, Schema
+  7. `responsive-design` -- Verhalten ueber Breakpoints
+  8. `navigation-design` -- Navigationsstruktur und -klarheit
+  9. `images-media` -- Bilder, Videos, Performance
+  10. `branding-identity` -- Markenkonsistenz
+  11. `landing-pages` -- Conversion-Optimierung (wenn Landing Page)
+  12. `customer-journey` -- Nutzerreise und Touchpoints
+  13. `component-patterns` -- Komponentenarchitektur
+  14. `ui-patterns` -- Interaktionsmuster
+  15. `visual-direction` -- Visuelle Richtung und Trends
+  16. `design-trends` -- Aktualitaet und Zeitgemaessheit
+  17. `design-process` -- Prozessqualitaet
+  18. `ai-design-workflow` -- KI-Einsatz im Design
+  19. `website-audit` -- Technische Qualitaet
+  20. `agent-ui-design` -- Agent-Interfaces (wenn relevant)
+- **DO**: Fuer jede Domain die entsprechende Checkliste durchgehen.
+- **DO**: Befunde nach Schweregrad kategorisieren: Kritisch / Wichtig / Empfehlung.
+- **DON'T**: Domains ueberspringen, nur weil sie "wahrscheinlich okay" sind.
+- **DON'T**: Subjektive Meinungen ohne Regelreferenz als Befund aufnehmen.
+
+### Bewertungsstruktur
+
+- **DO**: Jeden Befund strukturieren: Domain > Regel > Befund > Schweregrad > Loesung.
+- **DO**: Screenshots oder Codebeispiele als Beleg anfuegen wenn moeglich.
+- **DO**: Positive Aspekte explizit benennen -- nicht nur Maengel.
+- **DON'T**: Mehr als 20 Befunde pro Domain. Priorisiere die wichtigsten.
+
+### Schweregrade
+
+- **Kritisch**: Barrierefreiheits-Verstoesse (BFSG), funktionale Fehler, Sicherheitsprobleme. MUSS sofort behoben werden.
+- **Wichtig**: Usability-Probleme, Inkonsistenzen, Performance-Maengel. SOLLTE vor Launch behoben werden.
+- **Empfehlung**: Stilistische Verbesserungen, Optimierungen, Best Practices. KANN in zukuenftigen Iterationen umgesetzt werden.
+
+## Patterns
+
+### Quick Review (30 Minuten)
+Fokus auf die Top-6-Domains: accessibility, usability, ux-design, ui-design, web-typography, color-theory. Checklisten-Durchlauf ohne Tiefenanalyse.
+
+### Standard Review (2 Stunden)
+Alle 20 Domains. Checklisten vollstaendig. Befunde dokumentiert mit Schweregrad und Loesung. Zusammenfassung mit Top-5-Prioritaeten.
+
+### Deep Audit (1 Tag)
+Vollstaendiger Review plus: Screenreader-Test, Lighthouse-Analyse, Performance-Messung, Cross-Browser-Test, Mobile-Device-Test. Detaillierter Report mit priorisierten Massnahmen.
+
+### Vergleichendes Review
+Website gegen Wettbewerber analysieren. Pro Domain die staerkste Loesung identifizieren. Empfehlungen fuer Differenzierung und Verbesserung.
+
+## Anti-Patterns
+
+### Cherry-Picking
+Nur die offensichtlichen Probleme benennen, systematische Maengel uebersehen. **Loesung**: Checklisten vollstaendig abarbeiten.
+
+### Aesthetik-Bias
+Schoen gestaltete Websites milder bewerten, obwohl Usability oder Accessibility mangelhaft. **Loesung**: Barrierefreiheit und Usability IMMER zuerst.
+
+### Ohne Kontext bewerten
+Design bewerten ohne Zielgruppe, Geschaeftsziele oder Branche zu kennen. **Loesung**: Zuerst Kontext erfragen, dann bewerten.
+
+### Loesung vergessen
+Probleme auflisten ohne Verbesserungsvorschlaege. **Loesung**: Jeder Befund braucht mindestens einen konkreten Vorschlag.
+
+## Checkliste
+
+### Vor dem Review
+- [ ] Zielgruppe und Geschaeftsziele bekannt?
+- [ ] Branche und Wettbewerber identifiziert?
+- [ ] Zu pruefende Seiten/Screens definiert?
+- [ ] Review-Tiefe festgelegt (Quick / Standard / Deep)?
+
+### Waehrend des Reviews
+- [ ] Alle relevanten Domains abgearbeitet?
+- [ ] Domain-Checklisten vollstaendig durchgegangen?
+- [ ] Befunde nach Schweregrad kategorisiert?
+- [ ] Loesungsvorschlaege zu jedem Befund?
+- [ ] Positive Aspekte benannt?
+
+### Nach dem Review
+- [ ] Zusammenfassung mit Top-5-Prioritaeten erstellt?
+- [ ] Kritische Befunde klar markiert?
+- [ ] Naechste Schritte definiert?
+
+## Querverweise
+
+Dieser Meta-Skill orchestriert alle 20 Domain-Skills:
+
+**Kern-Design**: `ui-design`, `ux-design`, `web-typography`, `color-theory`, `accessibility`
+**Struktur & Navigation**: `usability`, `responsive-design`, `navigation-design`
+**Inhalte & Medien**: `images-media`, `branding-identity`
+**Strategie & Prozess**: `customer-journey`, `design-process`, `ai-design-workflow`
+**Seiten & Audit**: `landing-pages`, `website-audit`
+**Patterns & Trends**: `design-trends`, `ui-patterns`, `visual-direction`, `component-patterns`
+**Spezialisiert**: `agent-ui-design`

package/skills-src/webdesign-review/references/review-workflow.md

@@ -0,0 +1,143 @@
+# Webdesign-Review -- Workflow (Referenz)
+
+## Review-Ablauf im Detail
+
+### Phase 1: Kontext erfassen
+
+Bevor das Review beginnt, klaere:
+- **Zielgruppe**: Wer sind die Nutzer? Alter, Technik-Affinitaet, Geraete?
+- **Geschaeftsziele**: Was soll die Website erreichen? (Leads, Verkaeufe, Information)
+- **Branche**: Welche Konventionen und Erwartungen gelten?
+- **Wettbewerber**: Wer sind die direkten Konkurrenten?
+- **Scope**: Welche Seiten/Screens werden geprueft?
+
+### Phase 2: Gesamtbetrachtung (5 Minuten)
+
+Erste Einschatzung OHNE Checklisten:
+- Erster Eindruck in 3 Sekunden -- was faellt auf?
+- Ist der Zweck der Seite sofort erkennbar?
+- Wirkt die Seite professionell und vertrauenswuerdig?
+- Funktioniert die Seite auf dem aktuellen Geraet?
+
+### Phase 3: Systematische Domain-Analyse
+
+Reihenfolge nach Prioritaet:
+
+#### Prioritaet 1 -- Pflicht (immer pruefen)
+1. **accessibility** -- Barrierefreiheit
+   - Semantisches HTML, Kontraste, Tastaturnavigation, ARIA, Formulare
+   - BFSG-Compliance pruefen
+
+2. **usability** -- Benutzerfreundlichkeit
+   - Nielsen-Heuristiken, Fehlerbehandlung, Konsistenz
+
+3. **ux-design** -- Nutzererlebnis
+   - User Flows, Informationsarchitektur, Feedback-Loops
+
+#### Prioritaet 2 -- Wichtig (Standard-Review)
+4. **ui-design** -- Layout und Komponenten
+   - Grid, Hierarchie, Whitespace, Zustaende
+
+5. **web-typography** -- Schriftgestaltung
+   - Schriftwahl, Skala, Zeilenhoehe, Zeilenlaenge, Performance
+
+6. **color-theory** -- Farbgestaltung
+   - Schema, Kontraste, Semantik, Dark Mode
+
+7. **responsive-design** -- Responsivitaet
+   - Breakpoints, Mobile-First, Touch-Targets
+
+8. **navigation-design** -- Navigation
+   - Struktur, Klarheit, Breadcrumbs, Mobile-Navigation
+
+#### Prioritaet 3 -- Ergaenzend (Deep Audit)
+9. **images-media** -- Bilder und Medien
+10. **branding-identity** -- Markenkonsistenz
+11. **landing-pages** -- Conversion (wenn Landing Page)
+12. **customer-journey** -- Nutzerreise
+13. **component-patterns** -- Komponentenarchitektur
+14. **ui-patterns** -- Interaktionsmuster
+15. **visual-direction** -- Visuelle Richtung
+16. **design-trends** -- Aktualitaet
+17. **design-process** -- Prozessqualitaet
+18. **ai-design-workflow** -- KI-Einsatz
+19. **website-audit** -- Technische Qualitaet
+20. **agent-ui-design** -- Agent-Interfaces
+
+### Phase 4: Befunde konsolidieren
+
+Jeden Befund strukturieren:
+
+```
+## [Domain] -- [Kurztitel]
+**Schweregrad**: Kritisch | Wichtig | Empfehlung
+**Regel**: [Referenz zur verletzten Regel]
+**Befund**: [Beschreibung des Problems]
+**Loesung**: [Konkreter Verbesserungsvorschlag]
+```
+
+### Phase 5: Zusammenfassung
+
+- Top-5-Prioritaeten benennen
+- Kritische Befunde hervorheben
+- Positive Aspekte wuerdigen
+- Naechste Schritte vorschlagen
+- Zeitrahmen fuer Umsetzung einschaetzen
+
+## Befund-Schweregrade
+
+### Kritisch (MUSS sofort behoben werden)
+- WCAG-Verstoesse Level A
+- BFSG-relevante Maengel
+- Funktionale Fehler (Buttons, Links, Formulare defekt)
+- Sicherheitsprobleme
+- Inhalte nicht lesbar (Kontrast, Schriftgroesse)
+
+### Wichtig (SOLLTE vor Launch behoben werden)
+- WCAG-Verstoesse Level AA
+- Usability-Probleme (unklare Navigation, fehlende Fehlerbehandlung)
+- Inkonsistenzen im Design-System
+- Performance-Maengel (> 3s Ladezeit)
+- Mobile-Darstellungsfehler
+
+### Empfehlung (KANN in Iterationen umgesetzt werden)
+- Best-Practice-Verbesserungen
+- Stilistische Optimierungen
+- Micro-Interaktionen
+- Typografische Feinheiten
+- Trend-Aktualisierungen
+
+## Report-Template
+
+```markdown
+# Design-Review: [Projektname]
+Datum: [Datum]
+Reviewer: [Name]
+Scope: [gepruefte Seiten]
+Tiefe: Quick | Standard | Deep
+
+## Zusammenfassung
+[2-3 Saetze Gesamteindruck]
+
+## Top-5-Prioritaeten
+1. [Kritisch] ...
+2. [Kritisch] ...
+3. [Wichtig] ...
+4. [Wichtig] ...
+5. [Wichtig] ...
+
+## Staerken
+- ...
+
+## Befunde nach Domain
+### accessibility
+...
+### usability
+...
+[weitere Domains]
+
+## Naechste Schritte
+1. ...
+2. ...
+3. ...
+```