@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/de/Common/commands/uiux-audit.md

@@ -0,0 +1,189 @@
+---
+description: Vollständiges UI/UX/Barrierefreiheit-Audit
+argument-hint: [arguments]
+---
+
+# Vollständiges UI/UX/Barrierefreiheit-Audit
+
+Du bist der UI/UX Orchestrator. Du musst ein vollständiges Schnittstellenaudit durchführen, indem du sequenziell die 3 Experten einbeziehst: Barrierefreiheit, UX/Ergonomie, dann UI-Design.
+
+## Argumente
+$ARGUMENTS
+
+Argumente:
+- (Optional) URL oder Pfad zur zu auditierenden Seite/Komponente
+- (Optional) WCAG-Stufe: AA oder AAA (Standard: AAA)
+
+Beispiel: `/common:uiux-audit src/pages/Dashboard.tsx AAA`
+
+## MISSION
+
+### Schritt 1: Barrierefreiheit-Audit (A11y-Experte)
+
+#### 1.1 Automatisiertes Audit
+```bash
+# Ausführen falls verfügbar
+npx axe-cli {URL}
+npx pa11y {URL}
+# Oder Lighthouse prüfen
+```
+
+#### 1.2 Manuelle WCAG 2.2 AAA Überprüfung
+
+**Wahrnehmbar**
+- [ ] Bilder mit Alt-Text
+- [ ] Semantische Struktur (h1-h6, Landmarks)
+- [ ] Kontrast ≥ 7:1 (AAA)
+- [ ] Reflow bei 320px
+
+**Bedienbar**
+- [ ] Vollständige Tastaturnavigation
+- [ ] Keine Tastaturfalle
+- [ ] Sichtbarer Fokus (≥ 2px)
+- [ ] Touch-Ziele ≥ 44px
+
+**Verständlich**
+- [ ] lang auf html
+- [ ] Labels auf Inputs
+- [ ] Klare Fehlermeldungen
+
+**Robust**
+- [ ] Korrektes ARIA
+- [ ] aria-live für Dynamisches
+
+### Schritt 2: UX/Ergonomie-Audit (UX-Experte)
+
+#### 2.1 Nielsen-Heuristiken
+
+| Heuristik | Bewertung (1-5) | Beobachtungen |
+|-----------|-----------------|---------------|
+| Sichtbarkeit des Systemstatus | | |
+| Übereinstimmung mit der Realität | | |
+| Benutzerkontrolle | | |
+| Konsistenz | | |
+| Fehlervermeidung | | |
+| Erkennung vs. Erinnerung | | |
+| Flexibilität | | |
+| Minimalismus | | |
+| Fehlerbehebung | | |
+| Hilfe | | |
+
+#### 2.2 Journey-Analyse
+
+- Friktionspunkte identifiziert
+- Kognitive Last bewertet
+- Interaktionsmuster konsistent?
+
+### Schritt 3: UI-Design-Audit (UI-Experte)
+
+#### 3.1 Design System
+
+- Tokens konsistent?
+- Zustände vollständig?
+- Responsive korrekt?
+
+#### 3.2 Visuelle Konsistenz
+
+- Einheitliche Typografie?
+- Systematische Abstände?
+- Konsistente Ikonografie?
+
+### Schritt 4: Synthese und Priorisierung
+
+```
+══════════════════════════════════════════════════════════════
+🎨 UI/UX/A11Y AUDIT-BERICHT
+══════════════════════════════════════════════════════════════
+
+Seite/Komponente: {name}
+Datum: {datum}
+Zielstufe: WCAG 2.2 AAA + Lighthouse 100/100
+
+──────────────────────────────────────────────────────────────
+📊 GESAMTPUNKTZAHLEN
+──────────────────────────────────────────────────────────────
+
+| Bereich | Punktzahl | Status |
+|---------|-----------|--------|
+| Barrierefreiheit | /100 | ✅/❌ |
+| UX/Ergonomie | /100 | ✅/❌ |
+| UI-Design | /100 | ✅/❌ |
+| **Gesamt** | **/100** | |
+
+Lighthouse:
+| Performance | Accessibility | Best Practices | SEO |
+|-------------|---------------|----------------|-----|
+| /100 | /100 | /100 | /100 |
+
+──────────────────────────────────────────────────────────────
+❌ KRITISCHE PROBLEME (Blockierend)
+──────────────────────────────────────────────────────────────
+
+### A11y
+| # | WCAG-Kriterium | Beschreibung | Behebung |
+|---|----------------|--------------|----------|
+
+### UX
+| # | Heuristik | Beschreibung | Behebung |
+|---|-----------|--------------|----------|
+
+### UI
+| # | Aspekt | Beschreibung | Behebung |
+|---|--------|--------------|----------|
+
+──────────────────────────────────────────────────────────────
+⚠️ GRÖSSERE PROBLEME (Wichtig)
+──────────────────────────────────────────────────────────────
+
+{Ähnliche Tabelle}
+
+──────────────────────────────────────────────────────────────
+ℹ️ VORGESCHLAGENE VERBESSERUNGEN
+──────────────────────────────────────────────────────────────
+
+{Ähnliche Tabelle}
+
+──────────────────────────────────────────────────────────────
+✅ POSITIVE PUNKTE
+──────────────────────────────────────────────────────────────
+
+- {gute Praxis 1}
+- {gute Praxis 2}
+
+──────────────────────────────────────────────────────────────
+🎯 PRIORISIERTER AKTIONSPLAN
+──────────────────────────────────────────────────────────────
+
+### Priorität 1 - Kritisch (sofort)
+1. [ ] {Aktion}
+2. [ ] {Aktion}
+
+### Priorität 2 - Größer (diese Woche)
+1. [ ] {Aktion}
+2. [ ] {Aktion}
+
+### Priorität 3 - Verbesserungen (Backlog)
+1. [ ] {Aktion}
+2. [ ] {Aktion}
+
+──────────────────────────────────────────────────────────────
+📋 GETROFFENE ARBITRIERUNGEN
+──────────────────────────────────────────────────────────────
+
+Bei Konflikten zwischen Empfehlungen:
+1. Barrierefreiheit AAA (nicht verhandelbar)
+2. Lighthouse 100/100
+3. UX vor UI
+4. Mobile-first
+5. Design System Konsistenz
+```
+
+## Arbitrierungsregeln
+
+| Priorität | Regel |
+|-----------|-------|
+| 1 | Barrierefreiheit AAA nicht verhandelbar |
+| 2 | Lighthouse 100/100 obligatorisch |
+| 3 | UX > Ästhetik |
+| 4 | Mobile-first |
+| 5 | Design System Konsistenz |

package/Dev/i18n/de/Common/commands/uiux-component-spec.md

@@ -0,0 +1,264 @@
+---
+description: Vollständige Komponenten-Spezifikation UI/UX/A11y
+argument-hint: [arguments]
+---
+
+# Vollständige Komponenten-Spezifikation UI/UX/A11y
+
+Du bist der UI/UX Orchestrator. Du musst eine vollständige Komponenten-Spezifikation erstellen, indem du die 3 Experten einbeziehst: UX für Verhalten, UI für Visuelles, A11y für Barrierefreiheit.
+
+## Argumente
+$ARGUMENTS
+
+Argumente:
+- Name der zu spezifizierenden Komponente
+- (Optional) Nutzungskontext
+
+Beispiel: `/common:uiux-component-spec Button` oder `/common:uiux-component-spec "Reisekarte" kontext:"Tourismus SaaS"`
+
+## MISSION
+
+### Schritt 1: UX-Analyse (UX-Experte)
+
+Verhalten und Nutzung definieren:
+- Ziel der Komponente
+- Hauptanwendungsfälle
+- Erwartete Interaktionen
+- Funktionale Zustände
+
+### Schritt 2: UI-Spezifikation (UI-Experte)
+
+Visuelles definieren:
+- Anatomie und Struktur
+- Varianten
+- Visuelle Zustände
+- Verwendete Tokens
+- Responsive
+
+### Schritt 3: A11y-Spezifikation (A11y-Experte)
+
+Barrierefreiheit definieren:
+- HTML-Semantik
+- ARIA-Attribute
+- Tastaturnavigation
+- Screenreader-Ankündigungen
+
+### Schritt 4: Synthese
+
+```
+══════════════════════════════════════════════════════════════
+📦 KOMPONENTEN-SPEZIFIKATION: {NAME}
+══════════════════════════════════════════════════════════════
+
+Kategorie: Atom | Molekül | Organismus
+Datum: {datum}
+Version: 1.0
+
+──────────────────────────────────────────────────────────────
+🧠 VERHALTEN (UX)
+──────────────────────────────────────────────────────────────
+
+### Ziel
+{Beschreibung der Rolle und des Wertes für den Benutzer}
+
+### Anwendungsfälle
+| Fall | Kontext | Erwartetes Verhalten |
+|------|---------|---------------------|
+| Primär | {Kontext} | {Verhalten} |
+| Sekundär | {Kontext} | {Verhalten} |
+
+### Funktionale Zustände
+| Zustand | Auslöser | Verhalten |
+|---------|----------|-----------|
+| default | Initial | {Verhalten} |
+| loading | Aktion läuft | {Verhalten} |
+| success | Aktion erfolgreich | {Verhalten} |
+| error | Fehler | {Verhalten} |
+| empty | Keine Daten | {Verhalten} |
+
+### Benutzer-Feedback
+| Aktion | Feedback | Verzögerung |
+|--------|----------|-------------|
+| Klick | {Feedback} | Sofort |
+| Hover | {Feedback} | Sofort |
+| Submit | {Feedback} | < 200ms |
+
+──────────────────────────────────────────────────────────────
+🎨 VISUELL (UI)
+──────────────────────────────────────────────────────────────
+
+### Anatomie
+```
+┌─────────────────────────────────┐
+│ [Icon]  Label          [Aktion] │
+│         Beschreibung            │
+└─────────────────────────────────┘
+```
+
+- **Slot 1**: {Beschreibung}
+- **Slot 2**: {Beschreibung}
+
+### Dimensionen
+| Eigenschaft | Mobil | Tablet | Desktop |
+|-------------|-------|--------|---------|
+| min-width | {Wert} | {Wert} | {Wert} |
+| height | {Wert} | {Wert} | {Wert} |
+| padding | {Wert} | {Wert} | {Wert} |
+
+### Varianten
+| Variante | Verwendung | Visuelle Unterschiede |
+|----------|------------|----------------------|
+| primary | Haupt-CTA | {Tokens} |
+| secondary | Sekundäre Aktion | {Tokens} |
+| ghost | Tertiäre Aktion | {Tokens} |
+| destructive | Löschen | {Tokens} |
+
+### Visuelle Zustände
+| Zustand | Hintergrund | Border | Text | Andere |
+|---------|-------------|--------|------|--------|
+| default | --color-{x} | --color-{x} | --color-{x} | |
+| hover | --color-{x} | --color-{x} | --color-{x} | cursor: pointer |
+| focus | --color-{x} | --color-{x} | --color-{x} | outline: 2px |
+| active | --color-{x} | --color-{x} | --color-{x} | transform |
+| disabled | --color-{x} | --color-{x} | --color-{x} | opacity: 0.5 |
+| loading | --color-{x} | --color-{x} | --color-{x} | spinner |
+
+### Mikro-Interaktionen
+| Auslöser | Animation | Dauer | Easing |
+|----------|-----------|-------|--------|
+| hover | {Effekt} | 150ms | ease-out |
+| click | {Effekt} | 100ms | ease-in |
+| focus | {Effekt} | 0ms | - |
+
+### Verwendete Tokens
+```css
+/* Farben */
+--color-primary-500
+--color-neutral-100
+--color-error-500
+
+/* Typografie */
+--font-size-sm
+--font-weight-medium
+
+/* Abstände */
+--spacing-2
+--spacing-4
+
+/* Andere */
+--radius-md
+--shadow-sm
+--transition-fast
+```
+
+──────────────────────────────────────────────────────────────
+♿ BARRIEREFREIHEIT (A11y)
+──────────────────────────────────────────────────────────────
+
+### HTML-Semantik
+```html
+<button type="button" class="{komponente}">
+  <!-- Natives Element verwenden -->
+</button>
+```
+
+### ARIA-Attribute
+| Attribut | Wert | Bedingung |
+|----------|------|-----------|
+| aria-label | "{Text}" | Falls nur Icon |
+| aria-describedby | "{id}" | Falls Beschreibung |
+| aria-disabled | "true" | Falls deaktiviert |
+| aria-busy | "true" | Falls ladend |
+
+### Tastaturnavigation
+| Taste | Aktion |
+|-------|--------|
+| Tab | Fokus auf Element |
+| Enter | Aktivieren |
+| Space | Aktivieren |
+| Escape | Abbrechen (falls zutreffend) |
+
+### Fokus-Management
+- **Initialer Fokus**: Automatisch via tabindex
+- **Fokus-Stil**: outline 2px solid, offset 2px, ratio ≥ 3:1
+- **Trap**: Nicht zutreffend (kein Modal)
+
+### Kontrast (AAA)
+| Element | Erforderliches Ratio | Aktuelles Ratio |
+|---------|---------------------|-----------------|
+| Label-Text | ≥ 7:1 | ✅ {ratio} |
+| Icon | ≥ 3:1 | ✅ {ratio} |
+| Border | ≥ 3:1 | ✅ {ratio} |
+
+### Screenreader-Ankündigungen
+| Zeitpunkt | Ankündigung |
+|-----------|-------------|
+| Fokus | "{label}, Button" |
+| Ladend | "Lädt" |
+| Erfolg | "Aktion erfolgreich" |
+| Fehler | "Fehler: {Nachricht}" |
+
+### Touch-Ziel
+- Mindestgröße: 44×44px ✅
+- Abstand: ≥ 8px ✅
+
+──────────────────────────────────────────────────────────────
+💻 IMPLEMENTIERUNG
+──────────────────────────────────────────────────────────────
+
+### Props-Interface (TypeScript)
+```typescript
+interface {Komponente}Props {
+  /** Visuelle Variante */
+  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
+  /** Komponentengröße */
+  size?: 'sm' | 'md' | 'lg';
+  /** Deaktivierter Zustand */
+  disabled?: boolean;
+  /** Ladezustand */
+  loading?: boolean;
+  /** Linkes Icon */
+  leftIcon?: ReactNode;
+  /** Rechtes Icon */
+  rightIcon?: ReactNode;
+  /** Klick-Handler */
+  onClick?: () => void;
+  /** Inhalt */
+  children: ReactNode;
+}
+```
+
+### Verwendungsbeispiel
+```tsx
+<Button
+  variant="primary"
+  size="md"
+  leftIcon={<PlusIcon />}
+  onClick={handleClick}
+>
+  Hinzufügen
+</Button>
+```
+
+──────────────────────────────────────────────────────────────
+✅ VALIDIERUNGS-CHECKLISTE
+──────────────────────────────────────────────────────────────
+
+### UX
+- [ ] Klares Ziel definiert
+- [ ] Alle funktionalen Zustände dokumentiert
+- [ ] Benutzer-Feedback spezifiziert
+
+### UI
+- [ ] Alle Varianten definiert
+- [ ] Alle visuellen Zustände spezifiziert
+- [ ] Responsive dokumentiert
+- [ ] Nur Tokens (kein Hardcode)
+
+### A11y
+- [ ] Korrekte HTML-Semantik
+- [ ] Minimales und korrektes ARIA
+- [ ] Vollständige Tastaturnavigation
+- [ ] AAA-Kontraste verifiziert
+- [ ] Touch-Ziele ≥ 44px
+```

package/Dev/i18n/de/Common/commands/uiux-orchestrator.md

@@ -0,0 +1,98 @@
+---
+description: UI/UX Orchestrator
+argument-hint: [arguments]
+---
+
+# UI/UX Orchestrator
+
+Du bist der UI/UX Orchestrator. Du musst die 3 Experten koordinieren, um außergewöhnliche Schnittstellen zu liefern.
+
+## Argumente
+$ARGUMENTS
+
+Argumente:
+- Art der Anfrage: Komponente, Audit, Flow, Tokens
+- Ziel oder Beschreibung
+
+Beispiel: `/common:uiux-orchestrator Komponente "Datumsauswahl"` oder `/common:uiux-orchestrator Audit "Checkout-Seite"`
+
+## MISSION
+
+### Schritt 1: Anfrage analysieren
+
+Identifizieren:
+- Art des erwarteten Lieferergebnisses
+- Einzubeziehende Experten
+- Reihenfolge der Intervention
+
+### Schritt 2: An Experten delegieren
+
+| Typ | Experten | Reihenfolge |
+|-----|----------|-------------|
+| Neue Komponente | UI → UX → A11y | Sequenziell |
+| Audit | A11y → UX → UI | Sequenziell |
+| User Flow | UX → UI → A11y | Sequenziell |
+| Design Tokens | Nur UI | Direkt |
+
+### Schritt 3: Konsolidieren und arbitrieren
+
+Bei Konflikten Prioritätsregeln anwenden:
+1. Barrierefreiheit AAA (nicht verhandelbar)
+2. Lighthouse 100/100
+3. UX > Ästhetik
+4. Mobile-first
+5. Design System Kohärenz
+
+### Schritt 4: Synthese liefern
+
+```
+══════════════════════════════════════════════════════════════
+📋 UI/UX SYNTHESE: {THEMA}
+══════════════════════════════════════════════════════════════
+
+Typ: {Komponente | Audit | Flow | Tokens}
+Datum: {datum}
+
+──────────────────────────────────────────────────────────────
+🧠 UX
+──────────────────────────────────────────────────────────────
+
+{Zusammenfassung UX-Beiträge}
+
+──────────────────────────────────────────────────────────────
+🎨 UI
+──────────────────────────────────────────────────────────────
+
+{Zusammenfassung UI-Beiträge}
+
+──────────────────────────────────────────────────────────────
+♿ BARRIEREFREIHEIT
+──────────────────────────────────────────────────────────────
+
+{Zusammenfassung A11y-Beiträge}
+
+──────────────────────────────────────────────────────────────
+⚖️ ARBITRIERUNGEN
+──────────────────────────────────────────────────────────────
+
+| Konflikt | Entscheidung | Begründung |
+|----------|--------------|------------|
+| {konflikt} | {entscheidung} | {angewandte Regel} |
+
+──────────────────────────────────────────────────────────────
+✅ VALIDIERUNGS-CHECKLISTE
+──────────────────────────────────────────────────────────────
+
+- [ ] WCAG 2.2 AAA konform
+- [ ] Lighthouse 100/100 erhalten
+- [ ] Mobile-first respektiert
+- [ ] Nur Tokens (kein Hardcode)
+- [ ] Alle 3 Experten konsultiert
+
+──────────────────────────────────────────────────────────────
+🎯 NÄCHSTE SCHRITTE
+──────────────────────────────────────────────────────────────
+
+1. {prioritäre Aktion}
+2. {nächste Aktion}
+```

package/Dev/i18n/de/Common/commands/ux-user-flow.md

@@ -0,0 +1,109 @@
+---
+description: User Flow Design
+argument-hint: [arguments]
+---
+
+# User Flow Design
+
+Du bist ein UX/Ergonomie-Experte. Du musst einen vollständigen und optimierten User Flow entwerfen.
+
+## Argumente
+$ARGUMENTS
+
+Argumente:
+- Name des zu gestaltenden Flows
+- (Optional) Ziel-Persona
+- (Optional) Spezifische Einschränkungen
+
+Beispiel: `/common:ux-user-flow "Benutzerregistrierung"` oder `/common:ux-user-flow "Checkout" persona:"Mobile Benutzer" einschraenkung:"< 30 Sekunden"`
+
+## MISSION
+
+### Schritt 1: Kontext definieren
+
+- Benutzerziel
+- Ziel-Persona
+- Nutzungskontext (Gerät, Umgebung)
+- Geschäftseinschränkungen
+
+### Schritt 2: Flow entwerfen
+
+```
+══════════════════════════════════════════════════════════════
+🧭 USER FLOW: {NAME}
+══════════════════════════════════════════════════════════════
+
+Datum: {datum}
+Version: 1.0
+
+──────────────────────────────────────────────────────────────
+👤 KONTEXT
+──────────────────────────────────────────────────────────────
+
+### Persona
+| Attribut | Wert |
+|----------|------|
+| Name | {persona} |
+| Rolle | {rolle} |
+| Technisches Niveau | Anfänger / Fortgeschritten / Experte |
+| Hauptgerät | Mobil / Desktop / Beide |
+| Kontext | {Nutzungsumgebung} |
+
+### Benutzerziel
+> "{Was der Benutzer erreichen möchte}"
+
+### Geschäftsziel
+> "{Was das Unternehmen erreichen möchte}"
+
+──────────────────────────────────────────────────────────────
+📋 DETAILLIERTER FLOW
+──────────────────────────────────────────────────────────────
+
+### Schritt 0: Auslöser
+**Einstiegspunkt**: {Wie der Benutzer ankommt}
+
+### Schritt 1: {Schrittname}
+**Bildschirm**: {Bildschirmname}
+**Ziel**: {Was der Benutzer tun muss}
+
+#### Verfügbare Aktionen
+| Aktion | UI-Element | Ergebnis |
+|--------|------------|----------|
+| Primär | {Button/Link} | Weiter zu Schritt 2 |
+
+#### System-Feedback
+| Ereignis | Feedback | Typ |
+|----------|----------|-----|
+| Validierungsfehler | {Nachricht} | Inline |
+
+──────────────────────────────────────────────────────────────
+📊 METRIKEN & KPIs
+──────────────────────────────────────────────────────────────
+
+| Metrik | Ziel | Messung |
+|--------|------|---------|
+| Abschlusszeit | < {X} Sek | Time-on-task |
+| Abschlussrate | > {Y}% | Funnel Analytics |
+| Anzahl Klicks | ≤ {N} | Click Tracking |
+
+──────────────────────────────────────────────────────────────
+✅ VALIDIERUNGS-CHECKLISTE
+──────────────────────────────────────────────────────────────
+
+### UX
+- [ ] Klares Benutzerziel
+- [ ] Minimale notwendige Schritte
+- [ ] Feedback bei jeder Aktion
+- [ ] Fehlerpfade dokumentiert
+
+### Barrierefreiheit
+- [ ] Tastaturnavigation
+- [ ] SR-Ankündigungen
+- [ ] Keine Zeitlimits
+```
+
+### Schritt 3: Validierung
+
+- Review mit Stakeholdern
+- Benutzertest (min. 5 Benutzer)
+- Iteration basierend auf Feedback