@the-bearded-bear/claude-craft 3.1.2 → 3.3.1-next.f4f0d1e

package/Dev/i18n/de/Angular/commands/check-code-quality.md

@@ -0,0 +1,238 @@
+---
+description: Angular Code Quality Analysis
+---
+
+# Angular Code Quality Analysis
+
+Analyze code quality and identify areas for improvement in the Angular project.
+
+## What This Command Does
+
+1. **Code Quality Metrics**
+   - TypeScript strict compliance
+   - ESLint violations
+   - Code complexity
+   - Duplicated code
+
+2. **Angular-Specific Quality**
+   - Component best practices
+   - RxJS patterns
+   - Memory leak prevention
+   - Performance patterns
+
+3. **Generated Report**
+   - Quality score
+   - Issues by severity
+   - Actionable recommendations
+
+## Quality Criteria
+
+### 1. TypeScript Quality
+
+```typescript
+// ✅ Good - Explicit types, null safety
+interface User {
+  id: string;
+  name: string;
+  email: string | null;
+}
+
+function getUser(id: string): User | undefined {
+  return users.find(u => u.id === id);
+}
+
+const userName = getUser('1')?.name ?? 'Unknown';
+
+// ❌ Bad - Implicit any, no null handling
+function getUser(id) {
+  return users.find(u => u.id === id);
+}
+
+const userName = getUser('1').name; // Potential null error
+```
+
+### 2. Component Quality
+
+```typescript
+// ✅ Good - Small, focused component
+@Component({
+  selector: 'app-user-avatar',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <img [src]="avatarUrl()" [alt]="user().name" class="avatar" />
+  `
+})
+export class UserAvatarComponent {
+  user = input.required<User>();
+  avatarUrl = computed(() => this.user().avatar ?? '/default-avatar.png');
+}
+
+// ❌ Bad - Large component doing too much
+@Component({
+  selector: 'app-user-page',
+  template: `<!-- 500 lines of HTML -->`
+})
+export class UserPageComponent {
+  // 50+ methods, multiple responsibilities
+}
+```
+
+### 3. RxJS Best Practices
+
+```typescript
+// ✅ Good - Proper subscription management
+export class UserListComponent implements OnInit {
+  private destroyRef = inject(DestroyRef);
+
+  ngOnInit(): void {
+    this.userService.users$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(users => this.handleUsers(users));
+  }
+}
+
+// ❌ Bad - Memory leak (no unsubscribe)
+export class UserListComponent implements OnInit {
+  ngOnInit(): void {
+    this.userService.users$.subscribe(users => {
+      this.users = users; // Never unsubscribed!
+    });
+  }
+}
+```
+
+### 4. Performance Patterns
+
+```typescript
+// ✅ Good - trackBy for lists
+@Component({
+  template: `
+    @for (user of users(); track user.id) {
+      <app-user-card [user]="user" />
+    }
+  `
+})
+
+// ❌ Bad - No trackBy (causes re-render issues)
+@Component({
+  template: `
+    @for (user of users(); track $index) {
+      <app-user-card [user]="user" />
+    }
+  `
+})
+```
+
+### 5. Error Handling
+
+```typescript
+// ✅ Good - Proper error handling
+loadUsers(): void {
+  this.loading.set(true);
+  this.error.set(null);
+
+  this.api.getUsers().subscribe({
+    next: users => {
+      this.users.set(users);
+      this.loading.set(false);
+    },
+    error: (err: HttpErrorResponse) => {
+      this.error.set(this.getErrorMessage(err));
+      this.loading.set(false);
+    }
+  });
+}
+
+private getErrorMessage(error: HttpErrorResponse): string {
+  if (error.status === 0) return 'Network error. Please check your connection.';
+  if (error.status === 404) return 'Users not found.';
+  return 'An unexpected error occurred.';
+}
+
+// ❌ Bad - No error handling
+loadUsers(): void {
+  this.api.getUsers().subscribe(users => {
+    this.users = users;
+  });
+}
+```
+
+## Scoring Criteria
+
+| Category | Weight | Criteria |
+|----------|--------|----------|
+| TypeScript Strict | 20% | No any, null safety |
+| Component Size | 15% | <300 lines, single responsibility |
+| Subscription Mgmt | 15% | All subscriptions cleaned up |
+| Error Handling | 15% | Proper error handling patterns |
+| Performance | 15% | trackBy, OnPush, lazy loading |
+| Code Duplication | 10% | <5% duplicated code |
+| Complexity | 10% | Cyclomatic complexity <10 |
+
+## Output Format
+
+```
+══════════════════════════════════════════════════════════════
+ANGULAR CODE QUALITY REPORT
+══════════════════════════════════════════════════════════════
+
+📊 QUALITY SCORE: 82/100
+
+📝 TYPESCRIPT QUALITY: 90/100
+──────────────────────────────────────────────────────────────
+✅ Strict mode enabled
+✅ No implicit any
+⚠️ 3 instances of type assertions
+   - src/app/features/users/user.service.ts:45
+
+🧩 COMPONENT QUALITY: 85/100
+──────────────────────────────────────────────────────────────
+✅ Average component size: 120 lines
+⚠️ 2 components exceed 300 lines:
+   - src/app/features/dashboard/dashboard.component.ts (450 lines)
+   - src/app/features/users/user-form.component.ts (380 lines)
+
+🔄 RXJS PATTERNS: 75/100
+──────────────────────────────────────────────────────────────
+✅ takeUntilDestroyed used: 18/20 subscriptions
+❌ Potential memory leaks:
+   - src/app/features/chat/chat.component.ts:34
+   - src/app/core/services/websocket.service.ts:67
+
+⚡ PERFORMANCE: 80/100
+──────────────────────────────────────────────────────────────
+✅ OnPush: 24/24 components
+✅ trackBy: 15/18 @for loops
+⚠️ Missing trackBy:
+   - src/app/shared/dropdown/dropdown.component.html:12
+
+🚨 ERROR HANDLING: 85/100
+──────────────────────────────────────────────────────────────
+✅ Global error handler configured
+✅ HTTP errors handled: 12/14 API calls
+⚠️ Missing error handling:
+   - src/app/features/upload/upload.service.ts:28
+
+📋 RECOMMENDATIONS
+──────────────────────────────────────────────────────────────
+1. Split large components into smaller pieces
+2. Add takeUntilDestroyed to remaining subscriptions
+3. Add trackBy to all @for loops
+4. Add error handling to upload service
+
+══════════════════════════════════════════════════════════════
+```
+
+## Quality Checklist
+
+- [ ] TypeScript strict mode enabled
+- [ ] No explicit `any` types
+- [ ] All subscriptions properly managed
+- [ ] Error handling on all API calls
+- [ ] Components <300 lines
+- [ ] Cyclomatic complexity <10
+- [ ] trackBy on all @for loops
+- [ ] OnPush on all components
+- [ ] <5% code duplication
+- [ ] No console.log in production code

package/Dev/i18n/de/Angular/commands/check-compliance.md

@@ -0,0 +1,199 @@
+---
+description: Angular Standards Compliance Check
+---
+
+# Angular Standards Compliance Check
+
+Verify that the Angular project follows established coding standards and best practices.
+
+## What This Command Does
+
+1. **Standards Verification**
+   - Check coding conventions
+   - Verify naming conventions
+   - Validate file organization
+   - Check import order
+   - Verify documentation standards
+
+2. **Angular-Specific Checks**
+   - Standalone components usage
+   - Signals implementation
+   - OnPush change detection
+   - Modern control flow (@if, @for)
+   - Typed forms
+
+3. **Generated Report**
+   - Non-compliant files
+   - Severity levels
+   - Remediation recommendations
+   - Compliance score (/100)
+
+## Compliance Areas
+
+### 1. Component Standards
+
+```typescript
+// ✅ Compliant
+@Component({
+  selector: 'app-user-profile',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `...`
+})
+export class UserProfileComponent {}
+
+// ❌ Non-compliant
+@Component({
+  selector: 'user-profile',     // Missing app- prefix
+  // standalone: missing       // Not standalone
+  // changeDetection: missing  // Not OnPush
+})
+export class UserProfile {}    // Missing Component suffix
+```
+
+### 2. Signal Usage
+
+```typescript
+// ✅ Compliant - Using signals
+export class CounterComponent {
+  count = signal(0);
+  doubleCount = computed(() => this.count() * 2);
+}
+
+// ❌ Non-compliant - Using observables for local state
+export class CounterComponent {
+  count$ = new BehaviorSubject(0);
+}
+```
+
+### 3. Template Syntax
+
+```html
+<!-- ✅ Compliant - Modern control flow -->
+@if (loading()) {
+  <app-spinner />
+}
+
+@for (item of items(); track item.id) {
+  <app-item [data]="item" />
+}
+
+<!-- ❌ Non-compliant - Legacy syntax -->
+<app-spinner *ngIf="loading"></app-spinner>
+<app-item *ngFor="let item of items" [data]="item"></app-item>
+```
+
+### 4. Dependency Injection
+
+```typescript
+// ✅ Compliant - inject() function
+export class MyComponent {
+  private readonly userService = inject(UserService);
+}
+
+// ⚠️ Warning - Constructor injection (valid but verbose)
+export class MyComponent {
+  constructor(private userService: UserService) {}
+}
+```
+
+### 5. File Naming
+
+```
+✅ Compliant:
+- user-profile.component.ts
+- auth.service.ts
+- auth.guard.ts
+- date-format.pipe.ts
+
+❌ Non-compliant:
+- UserProfile.component.ts (PascalCase)
+- authService.ts (missing suffix)
+- AuthGuard.ts (PascalCase)
+```
+
+## Scoring Criteria
+
+| Category | Weight | Criteria |
+|----------|--------|----------|
+| Standalone Components | 20% | All components are standalone |
+| Signals Usage | 15% | Local state uses signals |
+| OnPush Strategy | 15% | All components use OnPush |
+| Modern Control Flow | 10% | @if/@for instead of *ngIf/*ngFor |
+| Typed Forms | 10% | Forms are strongly typed |
+| Naming Conventions | 10% | Correct file/class naming |
+| Import Organization | 10% | Imports properly ordered |
+| Documentation | 10% | Key components documented |
+
+## Output Format
+
+```
+══════════════════════════════════════════════════════════════
+ANGULAR COMPLIANCE REPORT
+══════════════════════════════════════════════════════════════
+
+📊 SCORE: 85/100
+
+✅ PASSING (6)
+──────────────────────────────────────────────────────────────
+• Standalone components: 100% (24/24 components)
+• OnPush strategy: 100% (24/24 components)
+• Typed forms: 100% (8/8 forms)
+• Import organization: 100%
+• File naming: 100%
+• Documentation: 90%
+
+⚠️ WARNINGS (2)
+──────────────────────────────────────────────────────────────
+• Modern control flow: 75% (18/24 templates)
+  - src/app/features/users/user-list.component.html:15 - Uses *ngFor
+  - src/app/shared/modal/modal.component.html:8 - Uses *ngIf
+
+• Signals usage: 80% (16/20 components with local state)
+  - src/app/features/auth/login.component.ts - Uses BehaviorSubject
+
+❌ ERRORS (1)
+──────────────────────────────────────────────────────────────
+• Constructor injection detected (prefer inject()):
+  - src/app/core/services/api.service.ts:15
+
+📋 RECOMMENDATIONS
+──────────────────────────────────────────────────────────────
+1. Migrate remaining *ngFor to @for with track
+2. Replace BehaviorSubject with signal() for local state
+3. Use inject() function instead of constructor injection
+
+══════════════════════════════════════════════════════════════
+```
+
+## Automated Checks
+
+Run these commands to verify compliance:
+
+```bash
+# Lint check
+ng lint
+
+# Type check
+npx tsc --noEmit
+
+# Test coverage
+npm run test:ci
+
+# Build check
+ng build --configuration=production
+```
+
+## Checklist
+
+- [ ] All components are standalone
+- [ ] All components use OnPush change detection
+- [ ] Local state uses signals (not BehaviorSubject)
+- [ ] Templates use @if/@for/@switch
+- [ ] Forms are typed (FormGroup<T>)
+- [ ] inject() used for dependency injection
+- [ ] File naming follows conventions
+- [ ] Imports are organized
+- [ ] Public API documented
+- [ ] Tests pass with >80% coverage

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

@@ -0,0 +1,263 @@
+---
+description: Angular Security Audit
+---
+
+# Angular Security Audit
+
+Perform a comprehensive security audit of the Angular application.
+
+## What This Command Does
+
+1. **Vulnerability Scanning**
+   - XSS vulnerabilities
+   - CSRF protection
+   - Injection risks
+   - Authentication issues
+
+2. **Dependency Audit**
+   - npm audit results
+   - Outdated packages
+   - Known vulnerabilities
+
+3. **Generated Report**
+   - Security score
+   - Vulnerabilities by severity
+   - Remediation steps
+
+## Security Checks
+
+### 1. XSS Protection
+
+```typescript
+// ✅ Safe - Angular sanitizes automatically
+@Component({
+  template: `<div [innerHTML]="content"></div>`
+})
+export class SafeComponent {
+  content = '<p>Safe content</p>';  // Sanitized by Angular
+}
+
+// ❌ Dangerous - Bypassing sanitization
+@Component({
+  template: `<div [innerHTML]="trustedContent"></div>`
+})
+export class DangerousComponent {
+  trustedContent = this.sanitizer.bypassSecurityTrustHtml(userInput);
+  // Only bypass for trusted sources!
+}
+```
+
+### 2. CSRF Protection
+
+```typescript
+// ✅ Good - XSRF protection enabled
+// app.config.ts
+export const appConfig = {
+  providers: [
+    provideHttpClient(
+      withXsrfConfiguration({
+        cookieName: 'XSRF-TOKEN',
+        headerName: 'X-XSRF-TOKEN'
+      })
+    )
+  ]
+};
+
+// ❌ Bad - No CSRF protection
+export const appConfig = {
+  providers: [
+    provideHttpClient() // No XSRF configuration
+  ]
+};
+```
+
+### 3. Authentication Security
+
+```typescript
+// ✅ Good - Secure token handling
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+  // Use sessionStorage (not localStorage) for tokens
+  private getToken(): string | null {
+    return sessionStorage.getItem('token');
+  }
+
+  // Check token expiration
+  isTokenValid(): boolean {
+    const token = this.getToken();
+    if (!token) return false;
+
+    try {
+      const payload = JSON.parse(atob(token.split('.')[1]));
+      return payload.exp * 1000 > Date.now();
+    } catch {
+      return false;
+    }
+  }
+}
+
+// ❌ Bad - Insecure token storage
+localStorage.setItem('token', token);  // Vulnerable to XSS
+```
+
+### 4. Route Protection
+
+```typescript
+// ✅ Good - Protected routes
+export const routes: Routes = [
+  {
+    path: 'admin',
+    canActivate: [authGuard, roleGuard(['admin'])],
+    loadComponent: () => import('./admin/admin.component')
+  }
+];
+
+// ❌ Bad - Unprotected sensitive routes
+export const routes: Routes = [
+  {
+    path: 'admin',
+    loadComponent: () => import('./admin/admin.component')
+    // No guards!
+  }
+];
+```
+
+### 5. Sensitive Data Handling
+
+```typescript
+// ✅ Good - No sensitive data in code
+// environment.ts
+export const environment = {
+  apiUrl: '/api',
+  // API keys should come from backend, not frontend
+};
+
+// ❌ Bad - Secrets in code
+export const environment = {
+  apiKey: 'sk-12345...',  // NEVER do this!
+  secretKey: 'secret...'   // NEVER do this!
+};
+```
+
+### 6. Input Validation
+
+```typescript
+// ✅ Good - Validated input
+const form = new FormGroup({
+  email: new FormControl('', [
+    Validators.required,
+    Validators.email,
+    Validators.maxLength(255)
+  ]),
+  password: new FormControl('', [
+    Validators.required,
+    Validators.minLength(12),
+    strongPasswordValidator
+  ])
+});
+
+// ❌ Bad - No validation
+const form = new FormGroup({
+  email: new FormControl(''),
+  password: new FormControl('')
+});
+```
+
+## Severity Levels
+
+| Level | Description | Action |
+|-------|-------------|--------|
+| Critical | Immediate exploitation risk | Fix immediately |
+| High | Serious vulnerability | Fix within 24h |
+| Medium | Potential risk | Fix within 1 week |
+| Low | Minor issue | Fix in next sprint |
+| Info | Best practice | Consider fixing |
+
+## Output Format
+
+```
+══════════════════════════════════════════════════════════════
+ANGULAR SECURITY AUDIT REPORT
+══════════════════════════════════════════════════════════════
+
+📊 SECURITY SCORE: 75/100
+
+🔴 CRITICAL (0)
+──────────────────────────────────────────────────────────────
+No critical vulnerabilities found.
+
+🟠 HIGH (2)
+──────────────────────────────────────────────────────────────
+1. [H001] bypassSecurityTrustHtml with user input
+   File: src/app/features/blog/blog-post.component.ts:45
+   Risk: XSS vulnerability
+   Fix: Remove bypassSecurityTrustHtml or validate input server-side
+
+2. [H002] JWT stored in localStorage
+   File: src/app/core/services/auth.service.ts:23
+   Risk: Token theft via XSS
+   Fix: Use sessionStorage or httpOnly cookies
+
+🟡 MEDIUM (3)
+──────────────────────────────────────────────────────────────
+1. [M001] Missing CSRF protection
+   File: src/app/app.config.ts
+   Risk: Cross-site request forgery
+   Fix: Add withXsrfConfiguration()
+
+2. [M002] Unprotected admin route
+   File: src/app/app.routes.ts:45
+   Risk: Unauthorized access
+   Fix: Add authGuard and roleGuard
+
+3. [M003] Weak password requirements
+   File: src/app/features/auth/register.component.ts
+   Risk: Weak passwords
+   Fix: Add strong password validator
+
+🟢 LOW (2)
+──────────────────────────────────────────────────────────────
+1. [L001] Console.log in production
+   Files: 5 files
+   Risk: Information disclosure
+   Fix: Remove or guard console statements
+
+2. [L002] Missing CSP headers
+   Risk: Script injection
+   Fix: Configure Content-Security-Policy
+
+📦 DEPENDENCY AUDIT
+──────────────────────────────────────────────────────────────
+npm audit results:
+  Critical: 0
+  High: 1 (lodash - prototype pollution)
+  Medium: 2
+  Low: 5
+
+Outdated packages:
+  @angular/core: 17.0.0 → 18.0.0 (security patches)
+  rxjs: 7.5.0 → 7.8.0
+
+📋 RECOMMENDATIONS
+──────────────────────────────────────────────────────────────
+1. Fix HIGH severity issues immediately
+2. Run: npm audit fix
+3. Update Angular to latest version
+4. Configure CSP headers on server
+5. Add security monitoring
+
+══════════════════════════════════════════════════════════════
+```
+
+## Security Checklist
+
+- [ ] No bypassSecurityTrust* with user input
+- [ ] CSRF protection enabled
+- [ ] Tokens stored securely (not localStorage)
+- [ ] All sensitive routes protected
+- [ ] No secrets in source code
+- [ ] Input validation on all forms
+- [ ] npm audit shows no critical/high
+- [ ] Dependencies up to date
+- [ ] CSP headers configured
+- [ ] HTTPS enforced in production