@the-bearded-bear/claude-craft 8.8.1 → 8.8.2

package/Dev/i18n/de/UIUX/commands/design-tokens.md

@@ -1,33 +1,33 @@
 ---
-description: Design Tokens Definition
+description: Design-Tokens-Definition
 argument-hint: [arguments]
 ---
 
-# Design Tokens Definition
+# Design-Tokens-Definition
 
-Du bist ein Lead UI Designer. Du musst Design Tokens für ein kohärentes und wartbares Design System definieren.
+Sie sind ein leitender UI-Designer. Sie müssen Design-Tokens für ein kohärentes und wartbares Design-System definieren.
 
 ## Argumente
 $ARGUMENTS
 
 Argumente:
 - Art der zu definierenden Tokens: colors, typography, spacing, shadows, all
-- (Optional) Basis-Primärfarbe: #HEXCODE
+- (Optional) Primäre Basisfarbe: #HEXCODE
 - (Optional) Modus: light, dark, both
 
 Beispiel: `/uiux:design-tokens all #3B82F6 both`
 
 ## Plan-Modus
 
-> **Der Plan-Modus ist obligatorisch.** Vor der Ausführung aktiviert Claude den Plan-Modus, um betroffenen Code zu analysieren, einen Implementierungsplan vorzuschlagen und auf Ihre Validierung zu warten, bevor Änderungen vorgenommen werden.
+> **Der Plan-Modus ist obligatorisch.** Bevor Claude mit der Ausführung beginnt, aktiviert es den Plan-Modus, um den betroffenen Code zu analysieren, einen Implementierungsplan vorzuschlagen und auf Ihre Validierung zu warten, bevor Änderungen vorgenommen werden.
 
-## MISSION
+## AUFTRAG
 
 ### Schritt 1: Kontext analysieren
 
-- Frontend-Stack (React, Vue, Tailwind, CSS vars...)
-- Bestehendes Design System?
-- Markenrichtlinien vorhanden?
+- Frontend-Stack (React, Vue, Tailwind, CSS-Variablen …)
+- Bestehendes Design-System vorhanden?
+- Markenrichtlinien bereitgestellt?
 
 ### Schritt 2: Tokens definieren
 
@@ -37,7 +37,7 @@ Beispiel: `/uiux:design-tokens all #3B82F6 both`
 ══════════════════════════════════════════════════════════════
 
 Projekt: {name}
-Datum: {datum}
+Datum: {date}
 Format: CSS Custom Properties
 
 ──────────────────────────────────────────────────────────────
@@ -46,54 +46,131 @@ Format: CSS Custom Properties
 
 ### Semantische Palette
 
-#### Primary (Hauptaktion)
-| Token | Light | Dark | Verwendung |
-|-------|-------|------|------------|
+#### Primär (Hauptaktion)
+| Token | Hell | Dunkel | Verwendung |
+|-------|------|--------|------------|
 | --color-primary-50 | #eff6ff | #1e3a5f | Subtiler Hintergrund |
+| --color-primary-100 | #dbeafe | #1e40af | Hintergrund |
+| --color-primary-200 | #bfdbfe | #1d4ed8 | Rahmen |
+| --color-primary-300 | #93c5fd | #2563eb | Rahmen bei Hover |
+| --color-primary-400 | #60a5fa | #3b82f6 | Symbol |
 | --color-primary-500 | #3b82f6 | #60a5fa | Text |
-| --color-primary-600 | #2563eb | #93c5fd | Text hover |
+| --color-primary-600 | #2563eb | #93c5fd | Text bei Hover |
+| --color-primary-700 | #1d4ed8 | #bfdbfe | - |
+| --color-primary-800 | #1e40af | #dbeafe | - |
+| --color-primary-900 | #1e3a5f | #eff6ff | - |
 
-#### Success / Warning / Error
-{Ähnliche Skalen}
+#### Erfolg
+| Token | Hell | Dunkel |
+|-------|------|--------|
+| --color-success-50 | #f0fdf4 | #14532d |
+| --color-success-500 | #22c55e | #4ade80 |
+| --color-success-700 | #15803d | #86efac |
+
+#### Warnung
+| Token | Hell | Dunkel |
+|-------|------|--------|
+| --color-warning-50 | #fffbeb | #78350f |
+| --color-warning-500 | #f59e0b | #fbbf24 |
+| --color-warning-700 | #b45309 | #fcd34d |
+
+#### Fehler
+| Token | Hell | Dunkel |
+|-------|------|--------|
+| --color-error-50 | #fef2f2 | #7f1d1d |
+| --color-error-500 | #ef4444 | #f87171 |
+| --color-error-700 | #b91c1c | #fca5a5 |
 
 #### Neutral (Text, Hintergründe)
-| Token | Light | Dark | Verwendung |
-|-------|-------|------|------------|
+| Token | Hell | Dunkel | Verwendung |
+|-------|------|--------|------------|
 | --color-neutral-0 | #ffffff | #0a0a0a | Hintergrund |
+| --color-neutral-50 | #fafafa | #171717 | Subtiler Hintergrund |
+| --color-neutral-100 | #f5f5f5 | #262626 | Gedämpfter Hintergrund |
+| --color-neutral-200 | #e5e5e5 | #404040 | Rahmen |
+| --color-neutral-300 | #d4d4d4 | #525252 | Rahmen bei Hover |
+| --color-neutral-400 | #a3a3a3 | #737373 | Platzhaltertext |
 | --color-neutral-500 | #737373 | #a3a3a3 | Gedämpfter Text |
+| --color-neutral-600 | #525252 | #d4d4d4 | Sekundärer Text |
+| --color-neutral-700 | #404040 | #e5e5e5 | Primärer Text |
+| --color-neutral-800 | #262626 | #f5f5f5 | Hervorgehobener Text |
 | --color-neutral-900 | #171717 | #fafafa | Starker Text |
 
-### Alias Tokens (Semantisch)
+### Alias-Tokens (Semantisch)
 ```css
 /* Hintergründe */
 --color-bg-primary: var(--color-neutral-0);
 --color-bg-secondary: var(--color-neutral-50);
+--color-bg-tertiary: var(--color-neutral-100);
+--color-bg-inverse: var(--color-neutral-900);
 
-/* Texte */
+/* Text */
 --color-text-primary: var(--color-neutral-900);
 --color-text-secondary: var(--color-neutral-600);
+--color-text-muted: var(--color-neutral-500);
+--color-text-inverse: var(--color-neutral-0);
 
-/* Borders */
+/* Rahmen */
 --color-border-default: var(--color-neutral-200);
+--color-border-hover: var(--color-neutral-300);
 --color-border-focus: var(--color-primary-500);
+
+/* Zustände */
+--color-state-focus: var(--color-primary-500);
+--color-state-error: var(--color-error-500);
+--color-state-success: var(--color-success-500);
+--color-state-warning: var(--color-warning-500);
 ```
 
 ──────────────────────────────────────────────────────────────
 📝 TYPOGRAFIE
 ──────────────────────────────────────────────────────────────
 
-### Familien
+### Schriftfamilien
 ```css
---font-family-sans: 'Inter', system-ui, sans-serif;
---font-family-mono: 'JetBrains Mono', monospace;
+--font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
+--font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
 ```
 
 ### Größen (Basis 16px)
-| Token | Größe | Line Height | Verwendung |
-|-------|-------|-------------|------------|
-| --font-size-xs | 0.75rem | 1rem | Labels |
-| --font-size-base | 1rem | 1.5rem | Body |
-| --font-size-4xl | 2.25rem | 2.5rem | H1 |
+| Token | Größe | Zeilenhöhe | Verwendung |
+|-------|-------|------------|------------|
+| --font-size-xs | 0.75rem (12px) | 1rem | Beschriftungen, Abzeichen |
+| --font-size-sm | 0.875rem (14px) | 1.25rem | Kleiner Fließtext |
+| --font-size-base | 1rem (16px) | 1.5rem | Fließtext |
+| --font-size-lg | 1.125rem (18px) | 1.75rem | Einleitungstext |
+| --font-size-xl | 1.25rem (20px) | 1.75rem | H4 |
+| --font-size-2xl | 1.5rem (24px) | 2rem | H3 |
+| --font-size-3xl | 1.875rem (30px) | 2.25rem | H2 |
+| --font-size-4xl | 2.25rem (36px) | 2.5rem | H1 |
+| --font-size-5xl | 3rem (48px) | 1 | Display |
+
+### Schriftstärken
+| Token | Wert | Verwendung |
+|-------|------|------------|
+| --font-weight-normal | 400 | Fließtext |
+| --font-weight-medium | 500 | Beschriftungen, Navigation |
+| --font-weight-semibold | 600 | Unterüberschriften |
+| --font-weight-bold | 700 | Überschriften |
+
+### Zeilenhöhen
+```css
+--line-height-none: 1;
+--line-height-tight: 1.25;
+--line-height-snug: 1.375;
+--line-height-normal: 1.5;
+--line-height-relaxed: 1.625;
+--line-height-loose: 2;
+```
+
+### Buchstabenabstand
+```css
+--letter-spacing-tighter: -0.05em;
+--letter-spacing-tight: -0.025em;
+--letter-spacing-normal: 0;
+--letter-spacing-wide: 0.025em;
+--letter-spacing-wider: 0.05em;
+```
 
 ──────────────────────────────────────────────────────────────
 📐 ABSTÄNDE
@@ -102,21 +179,108 @@ Format: CSS Custom Properties
 ### Skala (Basis 4px)
 | Token | Wert | Pixel | Verwendung |
 |-------|------|-------|------------|
+| --spacing-0 | 0 | 0px | - |
+| --spacing-px | 1px | 1px | Rahmen |
+| --spacing-0.5 | 0.125rem | 2px | Eng |
 | --spacing-1 | 0.25rem | 4px | XS |
+| --spacing-1.5 | 0.375rem | 6px | - |
+| --spacing-2 | 0.5rem | 8px | S |
+| --spacing-2.5 | 0.625rem | 10px | - |
+| --spacing-3 | 0.75rem | 12px | - |
 | --spacing-4 | 1rem | 16px | M (Basis) |
+| --spacing-5 | 1.25rem | 20px | - |
+| --spacing-6 | 1.5rem | 24px | L |
 | --spacing-8 | 2rem | 32px | XL |
+| --spacing-10 | 2.5rem | 40px | - |
+| --spacing-12 | 3rem | 48px | 2XL |
+| --spacing-16 | 4rem | 64px | 3XL |
+| --spacing-20 | 5rem | 80px | - |
+| --spacing-24 | 6rem | 96px | 4XL |
+
+──────────────────────────────────────────────────────────────
+🌗 SCHATTEN
+──────────────────────────────────────────────────────────────
+
+| Token | Wert | Verwendung |
+|-------|------|------------|
+| --shadow-xs | 0 1px 2px 0 rgb(0 0 0 / 0.05) | Subtil |
+| --shadow-sm | 0 1px 3px 0 rgb(0 0 0 / 0.1) | Karten |
+| --shadow-md | 0 4px 6px -1px rgb(0 0 0 / 0.1) | Dropdowns |
+| --shadow-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1) | Modale |
+| --shadow-xl | 0 20px 25px -5px rgb(0 0 0 / 0.1) | Dialoge |
+| --shadow-2xl | 0 25px 50px -12px rgb(0 0 0 / 0.25) | Überlagerungen |
+| --shadow-inner | inset 0 2px 4px 0 rgb(0 0 0 / 0.05) | Eingabefelder |
+| --shadow-none | none | Zurücksetzen |
 
 ──────────────────────────────────────────────────────────────
-🌗 SCHATTEN / ⭕ RADIEN / ⏱️ ÜBERGÄNGE
+⭕ RADIEN (Rahmen-Radius)
 ──────────────────────────────────────────────────────────────
 
-{Ähnliche Tabellen mit Tokens}
+| Token | Wert | Verwendung |
+|-------|------|------------|
+| --radius-none | 0 | Scharf |
+| --radius-sm | 0.125rem (2px) | Subtil |
+| --radius-md | 0.375rem (6px) | Schaltflächen, Eingabefelder |
+| --radius-lg | 0.5rem (8px) | Karten |
+| --radius-xl | 0.75rem (12px) | Modale |
+| --radius-2xl | 1rem (16px) | Große Karten |
+| --radius-full | 9999px | Pillen, Avatare |
+
+──────────────────────────────────────────────────────────────
+⏱️ ÜBERGÄNGE
+──────────────────────────────────────────────────────────────
+
+### Dauern
+| Token | Wert | Verwendung |
+|-------|------|------------|
+| --duration-75 | 75ms | Mikro |
+| --duration-100 | 100ms | Schnell |
+| --duration-150 | 150ms | Standard |
+| --duration-200 | 200ms | Normal |
+| --duration-300 | 300ms | Langsam |
+| --duration-500 | 500ms | Betonung |
+
+### Beschleunigungskurven
+```css
+--ease-linear: linear;
+--ease-in: cubic-bezier(0.4, 0, 1, 1);
+--ease-out: cubic-bezier(0, 0, 0.2, 1);
+--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+```
+
+### Zusammengesetzte Übergänge
+```css
+--transition-none: none;
+--transition-all: all 150ms ease-out;
+--transition-colors: color, background-color, border-color 150ms ease-out;
+--transition-opacity: opacity 150ms ease-out;
+--transition-shadow: box-shadow 150ms ease-out;
+--transition-transform: transform 150ms ease-out;
+```
+
+──────────────────────────────────────────────────────────────
+📦 Z-INDEX
+──────────────────────────────────────────────────────────────
 
+| Token | Wert | Verwendung |
+|-------|------|------------|
+| --z-0 | 0 | Basis |
+| --z-10 | 10 | Erhöht |
+| --z-20 | 20 | Dropdowns |
+| --z-30 | 30 | Klebend |
+| --z-40 | 40 | Fest |
+| --z-50 | 50 | Modaler Hintergrund |
+| --z-60 | 60 | Modal |
+| --z-70 | 70 | Popover |
+| --z-80 | 80 | Toast |
+| --z-90 | 90 | Tooltip |
+| --z-max | 9999 | Maximum |
 ```
 
-### Schritt 3: Exportieren
+### Schritt 3: Export
 
-Dateien generieren:
+Folgende Dateien generieren:
 - `tokens.css` - CSS Custom Properties
-- `tokens.json` - Style Dictionary Format
-- `tailwind.config.js` - Tailwind Erweiterung (falls zutreffend)
+- `tokens.json` - Style-Dictionary-Format
+- `tailwind.config.js` - Tailwind-Erweiterung (falls zutreffend)

package/Dev/i18n/de/UIUX/commands/user-flow.md

@@ -1,27 +1,27 @@
 ---
-description: User Flow Design
+description: Benutzerfluss-Design
 argument-hint: [arguments]
 ---
 
-# User Flow Design
+# Benutzerfluss-Design
 
-Du bist ein UX/Ergonomie-Experte. Du musst einen vollständigen und optimierten User Flow entwerfen.
+Sie sind ein UX/Ergonomie-Experte. Sie müssen einen vollständigen und optimierten Benutzerfluss entwerfen.
 
 ## Argumente
 $ARGUMENTS
 
 Argumente:
-- Name des zu gestaltenden Flows
+- Name des zu gestaltenden Flusses
 - (Optional) Ziel-Persona
 - (Optional) Spezifische Einschränkungen
 
-Beispiel: `/uiux:user-flow "Benutzerregistrierung"` oder `/uiux:user-flow "Checkout" persona:"Mobile Benutzer" einschraenkung:"< 30 Sekunden"`
+Beispiel: `/uiux:user-flow "Benutzerregistrierung"` oder `/uiux:user-flow "Checkout" persona:"Mobile Benutzer" constraint:"< 30 Sekunden"`
 
 ## Plan-Modus
 
 > **Der Plan-Modus wird empfohlen.** Claude aktiviert den Plan-Modus, um den Ansatz zu strukturieren, Abhängigkeiten zu identifizieren und eine Generierungsstrategie vorzustellen, bevor Artefakte erstellt werden.
 
-## MISSION
+## AUFTRAG
 
 ### Schritt 1: Kontext definieren
 
@@ -30,14 +30,14 @@ Beispiel: `/uiux:user-flow "Benutzerregistrierung"` oder `/uiux:user-flow "Check
 - Nutzungskontext (Gerät, Umgebung)
 - Geschäftseinschränkungen
 
-### Schritt 2: Flow entwerfen
+### Schritt 2: Fluss entwerfen
 
 ```
 ══════════════════════════════════════════════════════════════
-🧭 USER FLOW: {NAME}
+🧭 BENUTZERFLUSS: {NAME}
 ══════════════════════════════════════════════════════════════
 
-Datum: {datum}
+Datum: {date}
 Version: 1.0
 
 ──────────────────────────────────────────────────────────────
@@ -59,36 +59,193 @@ Version: 1.0
 ### Geschäftsziel
 > "{Was das Unternehmen erreichen möchte}"
 
+### Einschränkungen
+- Max. Zeit: {X Sekunden/Minuten}
+- Max. Schritte: {Y}
+- Gerät: {technische Einschränkungen}
+- Offline: Ja / Nein
+
+──────────────────────────────────────────────────────────────
+🗺️ ÜBERSICHT
+──────────────────────────────────────────────────────────────
+
+```
+┌──────┐    ┌──────┐    ┌──────┐    ┌──────┐    ┌──────┐
+│Start │───▶│Schr 1│───▶│Schr 2│───▶│Schr 3│───▶│ Ende │
+└──────┘    └──────┘    └──────┘    └──────┘    └──────┘
+                │            │
+                ▼            ▼
+           ┌────────┐   ┌────────┐
+           │Fehler A│   │Fehler B│
+           └────────┘   └────────┘
+```
+
 ──────────────────────────────────────────────────────────────
-📋 DETAILLIERTER FLOW
+📋 DETAILLIERTER FLUSS
 ──────────────────────────────────────────────────────────────
 
 ### Schritt 0: Auslöser
+
 **Einstiegspunkt**: {Wie der Benutzer ankommt}
+- Über: {Menü / Link / CTA / Deep-Link}
+- Vorheriger Zustand: {angemeldet / anonym / vorhandene Daten}
+- Vorbedingungen: {was erfüllt sein muss}
+
+---
 
 ### 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 |
+| Primär | {Schaltfläche/Link} | Weiter zu Schritt 2 |
+| Sekundär | {Schaltfläche/Link} | {Alternative} |
+| Tertiär | {Link} | {Andere Option} |
+
+#### Erforderliche Daten
+| Feld | Typ | Validierung | Pflichtfeld |
+|------|-----|-------------|-------------|
+| {Feld} | {Typ} | {Regeln} | Ja/Nein |
 
 #### System-Feedback
 | Ereignis | Feedback | Typ |
 |----------|----------|-----|
-| Validierungsfehler | {Nachricht} | Inline |
+| Eingabe-Fokus | {Feedback} | Visuell |
+| Validierungsfehler | {Meldung} | Inline |
+| Erfolg | {Feedback} | Toast/Inline |
+
+#### Aufmerksamkeitspunkte
+- ⚠️ {potenzielle Reibung}
+- 💡 {Verbesserungsmöglichkeit}
+
+---
+
+### Schritt 2: {Schrittname}
+
+{Gleiche Struktur …}
+
+---
+
+### Schritt N: Bestätigung (Ende)
+
+**Bildschirm**: {Bestätigung / Erfolg}
+**Endzustand**: {Was erreicht wurde}
+
+#### Inhalt
+- Erfolgsmeldung
+- Aktionszusammenfassung
+- Vorgeschlagene nächste Schritte
+
+#### Nächste Aktionen
+| Aktion | Ziel |
+|--------|------|
+| Primärer CTA | {nächster Fluss} |
+| Zurück | {Dashboard/Liste} |
+| Teilen | {falls zutreffend} |
+
+──────────────────────────────────────────────────────────────
+⚠️ ALTERNATIVE PFADE
+──────────────────────────────────────────────────────────────
+
+### Fehler: {Fehlertyp}
+
+**Auslöser**: {Was den Fehler verursacht}
+**Bildschirm**: {Inline / Modal / Dedizierte Seite}
+
+#### Fehlermeldung
+```
+Titel: {Klarer Titel}
+Beschreibung: {Erklärung des Problems}
+Aktion: {Wie zu lösen}
+```
+
+#### Benutzeroptionen
+- Erneut versuchen: {Verhalten}
+- Ändern: {Zurück zu Schritt X}
+- Abbrechen: {Zustand gespeichert?}
+
+---
+
+### Abbruch: Zustand speichern
+
+**Verhalten**:
+- Entwurf automatisch gespeichert
+- Aufbewahrungsdauer: {X Tage}
+- Erinnerungsbenachrichtigung: Ja / Nein
+
+---
+
+### Randfall: {Beschreibung}
+
+**Situation**: {Besonderer Kontext}
+**Verhalten**: {Flussanpassung}
 
 ──────────────────────────────────────────────────────────────
 📊 METRIKEN & KPIs
 ──────────────────────────────────────────────────────────────
 
+### Quantitative Ziele
+
 | Metrik | Ziel | Messung |
 |--------|------|---------|
 | Abschlusszeit | < {X} Sek | Time-on-task |
-| Abschlussrate | > {Y}% | Funnel Analytics |
-| Anzahl Klicks | ≤ {N} | Click Tracking |
+| Abschlussrate | > {Y}% | Trichteranalyse |
+| Fehlerrate | < {Z}% | Fehlerrate |
+| Anzahl Klicks | ≤ {N} | Klickverfolgung |
+| Zufriedenheitsbewertung | > {S}/5 | Umfrage nach Aufgabe |
+
+### Messpunkte
+
+| Schritt | Zu verfolgender Ereignis |
+|---------|--------------------------|
+| Einstieg | `flow_started` |
+| Schritt 1 | `step_1_completed` |
+| Schritt 2 | `step_2_completed` |
+| Erfolg | `flow_completed` |
+| Abbruch | `flow_abandoned` mit `last_step` |
+| Fehler | `flow_error` mit `error_type` |
+
+──────────────────────────────────────────────────────────────
+🧠 ERGONOMIE
+──────────────────────────────────────────────────────────────
+
+### Kognitive Belastung
+
+| Schritt | Komplexität | Begründung |
+|---------|-------------|------------|
+| 1 | Niedrig | {1–2 einfache Aktionen} |
+| 2 | Mittel | {kurzes Formular} |
+| 3 | Niedrig | {nur Bestätigung} |
+
+### Angewandte Prinzipien
+
+| Prinzip | Anwendung |
+|---------|-----------|
+| Schrittweise Offenlegung | {wie} |
+| Standardwerte | {welche} |
+| Inline-Validierung | {wann} |
+| Automatisches Speichern | {Häufigkeit} |
+
+──────────────────────────────────────────────────────────────
+♿ BARRIEREFREIHEIT
+──────────────────────────────────────────────────────────────
+
+### Tastaturnavigation
+- Tab-Reihenfolge: {logische Sequenz}
+- Sprunglinks: {bei langem Formular}
+- Fokusverwaltung: {bei Schrittwechsel}
+
+### Screenreader
+- Schrittankündigung: „Schritt X von Y"
+- Fehler: aria-live="assertive"
+- Fortschritt: aria-describedby
+
+### Zeit
+- Kein automatisches Zeitlimit
+- Falls Verzögerung: verlängerbar oder deaktivierbar
 
 ──────────────────────────────────────────────────────────────
 ✅ VALIDIERUNGS-CHECKLISTE
@@ -99,6 +256,12 @@ Version: 1.0
 - [ ] Minimale notwendige Schritte
 - [ ] Feedback bei jeder Aktion
 - [ ] Fehlerpfade dokumentiert
+- [ ] Abbruch mit Speichern
+
+### Messbarkeit
+- [ ] KPIs definiert
+- [ ] Tracking-Ereignisse aufgelistet
+- [ ] Ziele quantifiziert
 
 ### Barrierefreiheit
 - [ ] Tastaturnavigation
@@ -108,6 +271,6 @@ Version: 1.0
 
 ### Schritt 3: Validierung
 
-- Review mit Stakeholdern
-- Benutzertest (min. 5 Benutzer)
+- Überprüfung mit Stakeholdern
+- Benutzertest (mind. 5 Benutzer)
 - Iteration basierend auf Feedback