@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/de/React/commands/check-security.md

@@ -0,0 +1,142 @@
+---
+description: Sicherheits-Überprüfung
+---
+
+# Sicherheits-Überprüfung
+
+Führe ein umfassendes Sicherheits-Audit der React-Anwendung durch.
+
+## Aufgabe
+
+1. **Schwachstellen-Scan**
+   - Führe `npm audit` aus
+   - Prüfe bekannte CVEs
+   - Identifiziere veraltete Pakete
+   - Nutze Snyk oder ähnliche Tools
+
+2. **XSS-Prävention**
+   - Überprüfe `dangerouslySetInnerHTML`-Nutzung
+   - Validiere User-Input-Sanitization
+   - Prüfe auf unsicheres HTML-Rendering
+   - Teste mit DOMPurify
+
+3. **CSRF-Schutz**
+   - Überprüfe CSRF-Token-Implementation
+   - Validiere SameSite-Cookie-Attribute
+   - Prüfe API-Request-Header
+   - Teste Cross-Origin-Requests
+
+4. **Authentifizierung und Autorisierung**
+   - Überprüfe Token-Storage (keine localStorage!)
+   - Validiere JWT-Handling
+   - Prüfe Protected Routes
+   - Teste Session-Management
+
+5. **Input-Validierung**
+   - Überprüfe alle Formular-Inputs
+   - Validiere Zod-Schema-Nutzung
+   - Prüfe URL-Parameter-Sanitization
+   - Teste mit bösartigen Inputs
+
+6. **Content Security Policy**
+   - Überprüfe CSP-Header
+   - Validiere nonce-Nutzung für Inline-Scripts
+   - Prüfe auf unsafe-inline/unsafe-eval
+   - Teste CSP-Compliance
+
+7. **Sichere Kommunikation**
+   - Überprüfe HTTPS-Enforcement
+   - Validiere API-Verschlüsselung
+   - Prüfe Secure-Cookie-Flags
+   - Teste CORS-Konfiguration
+
+8. **Secrets-Management**
+   - Suche nach hardcodierten Secrets
+   - Überprüfe .env-Dateien
+   - Validiere Umgebungsvariablen-Nutzung
+   - Prüfe .gitignore
+
+9. **Abhängigkeits-Sicherheit**
+   - Analysiere Paket-Lizenzen
+   - Überprüfe Subresource Integrity
+   - Validiere npm-Registry-Quellen
+   - Prüfe auf Typosquatting
+
+10. **Sicherheits-Headers**
+    - Überprüfe X-Frame-Options
+    - Validiere X-Content-Type-Options
+    - Prüfe Referrer-Policy
+    - Teste Permissions-Policy
+
+## Sicherheits-Tests durchführen
+
+```bash
+# Schwachstellen-Scan
+npm audit
+npm audit fix
+
+# Erweiterte Sicherheitsprüfung
+npx snyk test
+npx snyk monitor
+
+# Code-Scan
+npx eslint . --ext .ts,.tsx
+
+# Lizenz-Prüfung
+npx license-checker --summary
+```
+
+## Sicherheits-Checkliste
+
+```markdown
+## Schwachstellen
+- [ ] npm audit: 0 kritische/hohe Schwachstellen
+- [ ] Alle Pakete aktuell
+- [ ] Keine bekannten CVEs
+- [ ] Snyk-Scan bestanden
+
+## XSS-Schutz
+- [ ] Keine unsicheren dangerouslySetInnerHTML
+- [ ] DOMPurify für HTML-Sanitization
+- [ ] Input-Validierung implementiert
+- [ ] React escaping verifiziert
+
+## CSRF-Schutz
+- [ ] CSRF-Token implementiert
+- [ ] SameSite-Cookies konfiguriert
+- [ ] API-Headers validiert
+- [ ] Double-Submit-Cookie-Pattern
+
+## Authentifizierung
+- [ ] HttpOnly-Cookies für Tokens
+- [ ] JWT-Validierung implementiert
+- [ ] Protected Routes konfiguriert
+- [ ] Session-Timeout implementiert
+
+## Input-Validierung
+- [ ] Zod-Schemas für alle Forms
+- [ ] URL-Parameter sanitisiert
+- [ ] File-Upload-Validierung
+- [ ] Rate Limiting implementiert
+
+## Headers
+- [ ] CSP konfiguriert
+- [ ] X-Frame-Options: DENY
+- [ ] X-Content-Type-Options: nosniff
+- [ ] HTTPS erzwungen
+
+## Secrets
+- [ ] Keine hardcodierten Secrets
+- [ ] .env in .gitignore
+- [ ] Umgebungsvariablen genutzt
+- [ ] Secrets rotiert
+```
+
+## Zu liefern
+
+1. Sicherheits-Audit-Bericht
+2. Schwachstellen-Liste mit Schweregrad
+3. Sicherheits-Fix-Empfehlungen
+4. Aktualisierter Sicherheits-Leitfaden
+5. Penetrationstest-Ergebnisse
+6. Compliance-Status (OWASP Top 10)

package/Dev/i18n/de/React/commands/check-testing.md

@@ -0,0 +1,150 @@
+---
+description: Test-Überprüfung
+---
+
+# Test-Überprüfung
+
+Analysiere und verbessere die Test-Suite der React-Anwendung.
+
+## Aufgabe
+
+1. **Test-Coverage-Analyse**
+   - Führe Coverage-Report aus
+   - Identifiziere nicht getestete Code-Bereiche
+   - Analysiere Coverage nach Typ (Zeilen, Branches, Funktionen)
+   - Setze Coverage-Ziele (>80%)
+
+2. **Unit-Tests**
+   - Überprüfe Komponenten-Tests
+   - Validiere Hook-Tests
+   - Prüfe Utility-Functions-Tests
+   - Bewerte Test-Qualität
+
+3. **Integration-Tests**
+   - Analysiere Feature-Tests
+   - Überprüfe API-Integration-Tests
+   - Validiere User-Flow-Tests
+   - Prüfe State-Management-Tests
+
+4. **E2E-Tests**
+   - Überprüfe kritische User-Journeys
+   - Validiere Playwright/Cypress-Setup
+   - Prüfe Cross-Browser-Tests
+   - Bewerte E2E-Coverage
+
+5. **Test-Organisation**
+   - Überprüfe Test-Struktur
+   - Validiere Namenskonventionen
+   - Prüfe Test-Patterns (AAA, Given-When-Then)
+   - Bewerte Test-Lesbarkeit
+
+6. **Mocking-Strategie**
+   - Überprüfe MSW-Setup
+   - Validiere Service-Mocks
+   - Prüfe Component-Mocks
+   - Bewerte Mock-Daten-Qualität
+
+7. **Test-Performance**
+   - Analysiere Test-Ausführungszeit
+   - Identifiziere langsame Tests
+   - Optimiere Test-Setup
+   - Prüfe Parallelisierung
+
+8. **Test-Wartbarkeit**
+   - Identifiziere brüchige Tests
+   - Überprüfe Test-Duplikation
+   - Validiere Test-Utilities
+   - Prüfe Test-Data-Factories
+
+9. **Testing-Best-Practices**
+   - Überprüfe Testing-Library-Queries
+   - Validiere User-Event-Nutzung
+   - Prüfe Accessibility-in-Tests
+   - Bewerte Test-Isolation
+
+10. **CI/CD-Integration**
+    - Überprüfe Test-Pipeline
+    - Validiere Pre-Commit-Hooks
+    - Prüfe Coverage-Gates
+    - Bewerte Test-Reporting
+
+## Tests ausführen
+
+```bash
+# Alle Tests
+npm test
+
+# Mit Coverage
+npm run test:coverage
+
+# Watch-Mode
+npm run test:watch
+
+# E2E-Tests
+npm run test:e2e
+
+# Spezifische Tests
+npm test -- ComponentName
+```
+
+## Test-Coverage-Ziele
+
+```typescript
+// vitest.config.ts
+export default defineConfig({
+  test: {
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      lines: 80,
+      functions: 80,
+      branches: 80,
+      statements: 80
+    }
+  }
+});
+```
+
+## Test-Checkliste
+
+```markdown
+## Coverage
+- [ ] Gesamt-Coverage: >80%
+- [ ] Komponenten: >85%
+- [ ] Hooks: >90%
+- [ ] Utils: >95%
+- [ ] Services: >85%
+
+## Test-Typen
+- [ ] Unit-Tests: Vollständig
+- [ ] Integration-Tests: Kritische Flows
+- [ ] E2E-Tests: Happy Paths
+- [ ] Visual Regression: Wenn nötig
+
+## Qualität
+- [ ] Keine übersprungenen Tests
+- [ ] Keine flaky Tests
+- [ ] Aussagekräftige Namen
+- [ ] AAA-Pattern befolgt
+
+## Performance
+- [ ] Test-Suite: <30 Sekunden
+- [ ] Einzelner Test: <100ms
+- [ ] E2E: <5 Minuten
+- [ ] Parallelisierung aktiviert
+
+## Wartbarkeit
+- [ ] Test-Utilities genutzt
+- [ ] Factories für Test-Daten
+- [ ] Keine Test-Duplikation
+- [ ] Klare Test-Organisation
+```
+
+## Zu liefern
+
+1. Test-Coverage-Bericht mit Visualisierungen
+2. Fehlende Tests identifiziert
+3. Test-Verbesserungsvorschläge
+4. Neue Test-Beispiele
+5. Test-Performance-Optimierungen
+6. Aktualisierte Testing-Dokumentation

package/Dev/i18n/de/React/commands/generate-component.md

@@ -0,0 +1,123 @@
+---
+description: Komponente generieren
+---
+
+# Komponente generieren
+
+Generiere eine neue React-Komponente mit allen zugehörigen Dateien.
+
+## Aufgabe
+
+Erstelle eine vollständige React-Komponente mit:
+
+1. **Hauptkomponente** (`ComponentName.tsx`)
+   - TypeScript mit strikter Typisierung
+   - Functional Component mit Props Interface
+   - JSDoc-Dokumentation
+   - Exported types
+
+2. **Tests** (`ComponentName.test.tsx`)
+   - Unit-Tests mit Vitest und React Testing Library
+   - Alle Props und Variants testen
+   - User-Interaktionen testen
+   - Accessibility-Tests
+
+3. **Storybook** (`ComponentName.stories.tsx`)
+   - Alle Variants dokumentiert
+   - Interactive Controls
+   - Usage-Examples
+   - Accessibility-Addon
+
+4. **Styles** (falls nötig)
+   - Tailwind CSS Classes
+   - Oder CSS Module
+   - Responsive Design
+   - Dark Mode Support
+
+5. **Index** (`index.ts`)
+   - Named Exports
+   - Type Exports
+   - Barrel File
+
+## Parameter
+
+- **Component Name**: [Name der Komponente]
+- **Component Type**: [Atom/Molecule/Organism]
+- **Props**: [Liste der Props mit Typen]
+- **Features**: [Spezielle Features oder Variants]
+
+## Template-Struktur
+
+```
+components/
+└── [ComponentName]/
+    ├── ComponentName.tsx
+    ├── ComponentName.test.tsx
+    ├── ComponentName.stories.tsx
+    └── index.ts
+```
+
+## Anforderungen
+
+1. **TypeScript**
+   - Strikte Typisierung
+   - Interface für Props
+   - Keine `any` Types
+   - Exported Types
+
+2. **Accessibility**
+   - Semantisches HTML
+   - ARIA-Attribute wo nötig
+   - Tastaturnavigation
+   - Focus Management
+
+3. **Performance**
+   - Memoization wo sinnvoll
+   - Optimierte Re-Renders
+   - Lazy Loading wenn groß
+   - Keine unnötigen Dependencies
+
+4. **Stil**
+   - Konsistent mit Design System
+   - Responsive
+   - Dark Mode Support
+   - Customizable mit className
+
+5. **Tests**
+   - >80% Coverage
+   - Alle Props getestet
+   - Alle Variants getestet
+   - User Interactions getestet
+
+6. **Dokumentation**
+   - JSDoc-Kommentare
+   - Usage-Examples in Storybook
+   - Props dokumentiert
+   - Variants erklärt
+
+## Beispiel-Aufruf
+
+```
+Component Name: Button
+Component Type: Atom
+Props:
+- variant: 'primary' | 'secondary' | 'outline' | 'ghost'
+- size: 'sm' | 'md' | 'lg'
+- disabled: boolean
+- isLoading: boolean
+- onClick: () => void
+- children: ReactNode
+Features:
+- Loading state mit Spinner
+- Disabled state
+- Icon support
+- Full width option
+```
+
+## Zu liefern
+
+1. Vollständige Komponente mit allen Dateien
+2. Umfassende Tests
+3. Storybook-Stories
+4. Verwendungsbeispiele
+5. Dokumentation

package/Dev/i18n/de/React/commands/generate-hook.md

@@ -0,0 +1,125 @@
+---
+description: Custom Hook generieren
+---
+
+# Custom Hook generieren
+
+Generiere einen neuen React Custom Hook mit allen zugehörigen Dateien.
+
+## Aufgabe
+
+Erstelle einen vollständigen Custom Hook mit:
+
+1. **Haupt-Hook** (`useHookName.ts`)
+   - TypeScript mit strikter Typisierung
+   - Options und Return Type Interfaces
+   - JSDoc-Dokumentation
+   - Exported Types
+
+2. **Tests** (`useHookName.test.ts`)
+   - Hook-Tests mit @testing-library/react
+   - Alle Use Cases abdecken
+   - Edge Cases testen
+   - Error Handling testen
+
+3. **Verwendungsbeispiele**
+   - Code-Beispiele in Kommentaren
+   - Reale Szenarien
+   - Best Practices
+   - Common Patterns
+
+4. **Dokumentation**
+   - Purpose und Use Case
+   - API-Referenz
+   - Parameter-Beschreibung
+   - Return-Value-Beschreibung
+
+5. **Index** (`index.ts`)
+   - Named Exports
+   - Type Exports
+
+## Parameter
+
+- **Hook Name**: [Name des Hooks (ohne 'use')]
+- **Purpose**: [Zweck des Hooks]
+- **Parameters**: [Options/Config-Parameter]
+- **Return Values**: [Zurückgegebene Werte und Funktionen]
+- **Dependencies**: [Benötigte externe Hooks oder Libraries]
+
+## Template-Struktur
+
+```
+hooks/
+└── useHookName/
+    ├── useHookName.ts
+    ├── useHookName.test.ts
+    ├── types.ts (wenn komplex)
+    └── index.ts
+```
+
+## Anforderungen
+
+1. **TypeScript**
+   - Strikte Typisierung
+   - Generic Types wo sinnvoll
+   - Keine `any` Types
+   - Vollständige JSDoc
+
+2. **React Best Practices**
+   - Hook Rules befolgen
+   - Stabile Dependencies
+   - Korrekte useCallback/useMemo
+   - Cleanup in useEffect
+
+3. **Performance**
+   - Memoization wo nötig
+   - Stable Functions
+   - Optimierte Dependencies
+   - Keine unnötigen Re-Renders
+
+4. **Error Handling**
+   - Try-Catch Blocks
+   - Error States
+   - Error Callbacks
+   - Validierung
+
+5. **Testing**
+   - >90% Coverage
+   - Alle Use Cases
+   - Edge Cases
+   - Error Scenarios
+
+6. **Dokumentation**
+   - JSDoc mit Examples
+   - Parameter beschrieben
+   - Return Values erklärt
+   - Common Pitfalls
+
+## Beispiel-Aufruf
+
+```
+Hook Name: LocalStorage
+Purpose: Persistiere State in localStorage mit automatic sync
+Parameters:
+- key: string (localStorage key)
+- initialValue: T (default value)
+- options?: {
+    serializer?: (value: T) => string
+    deserializer?: (value: string) => T
+    syncData?: boolean
+  }
+Return Values:
+- value: T (current value)
+- setValue: (value: T | ((prev: T) => T)) => void
+- remove: () => void
+- error: Error | null
+Dependencies: useState, useEffect, useCallback
+```
+
+## Zu liefern
+
+1. Vollständiger Hook mit Typen
+2. Umfassende Tests
+3. Verwendungsbeispiele
+4. Vollständige Dokumentation
+5. Integration mit bestehenden Hooks (falls relevant)

package/Dev/i18n/de/React/commands/storybook-story.md

@@ -0,0 +1,151 @@
+---
+description: Storybook Story generieren
+---
+
+# Storybook Story generieren
+
+Generiere eine umfassende Storybook Story für eine React-Komponente.
+
+## Aufgabe
+
+Erstelle eine vollständige Storybook Story mit:
+
+1. **Meta-Konfiguration**
+   - Title und Component
+   - Parameters und Decorators
+   - Tags (autodocs)
+   - ArgTypes-Definitionen
+
+2. **Haupt-Stories**
+   - Default/Primary Story
+   - Alle Variants
+   - Alle States (normal, hover, active, disabled)
+   - Verschiedene Sizes
+
+3. **Interactive Stories**
+   - Mit Actions
+   - Mit Controls
+   - Mit State Management
+   - User Interaction Examples
+
+4. **Edge Cases**
+   - Empty States
+   - Loading States
+   - Error States
+   - Extreme Values (sehr lange Texte, etc.)
+
+5. **Accessibility**
+   - A11y Addon aktiviert
+   - Contrast Checks
+   - Keyboard Navigation
+   - Screen Reader Tests
+
+6. **Responsive**
+   - Mobile Viewport
+   - Tablet Viewport
+   - Desktop Viewport
+   - Verschiedene Breakpoints
+
+7. **Themes**
+   - Light Mode
+   - Dark Mode
+   - Verschiedene Color Schemes
+
+8. **Dokumentation**
+   - Description für jede Story
+   - Code Snippets
+   - Best Practices
+   - Do's and Don'ts
+
+## Parameter
+
+- **Component Name**: [Name der Komponente]
+- **Component Path**: [Pfad zur Komponente]
+- **Variants**: [Liste der Variants]
+- **Props**: [Wichtige Props]
+- **Special Features**: [Besondere Features]
+
+## Story-Struktur
+
+```typescript
+// ComponentName.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { ComponentName } from './ComponentName';
+
+const meta = {
+  title: 'Path/To/ComponentName',
+  component: ComponentName,
+  // ... configuration
+} satisfies Meta<typeof ComponentName>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Stories...
+```
+
+## Anforderungen
+
+1. **Organisation**
+   - Logische Gruppierung
+   - Klare Naming
+   - Kategorisierung
+   - Hierarchie
+
+2. **Interaktivität**
+   - Actions für Events
+   - Controls für Props
+   - State Management
+   - Dynamic Updates
+
+3. **Dokumentation**
+   - Description für Meta
+   - Description für Stories
+   - Code Examples
+   - Usage Guidelines
+
+4. **Visual Testing**
+   - Alle Variants sichtbar
+   - Vergleichbare Layouts
+   - Konsistente Abstände
+   - Klar erkennbare Unterschiede
+
+5. **Accessibility**
+   - A11y Checks aktiviert
+   - ARIA Labels dokumentiert
+   - Keyboard Nav getestet
+   - Color Contrast geprüft
+
+6. **Performance**
+   - Lazy Loading wenn nötig
+   - Optimierte Re-Renders
+   - Schnelle Load Times
+   - Effiziente Updates
+
+## Beispiel-Aufruf
+
+```
+Component Name: Button
+Component Path: components/atoms/Button
+Variants: primary, secondary, outline, ghost, danger
+Props:
+- size: 'sm' | 'md' | 'lg'
+- disabled: boolean
+- isLoading: boolean
+- leftIcon?: ReactNode
+- rightIcon?: ReactNode
+Special Features:
+- Loading state mit Spinner
+- Icon support links und rechts
+- Full width option
+- Custom className
+```
+
+## Zu liefern
+
+1. Vollständige Story-Datei
+2. Alle Variants dokumentiert
+3. Interactive Examples
+4. Accessibility Notes
+5. Usage Guidelines
+6. Code Snippets