@smartsoft001-mobilems/claude-plugins 2.66.0 → 2.68.0

package/plugins/flow-legacy/skills/angular-patterns/SKILL.md

@@ -0,0 +1,361 @@
+---
+name: angular-patterns
+description: Angular 14 legacy patterns including *ngIf/*ngFor directives, constructor DI, and @Input/@Output decorators
+---
+
+# Angular 14 Legacy Patterns
+
+This skill provides guidance on Angular 14 patterns for legacy projects.
+
+## CRITICAL: Use Legacy Patterns ONLY
+
+**DO NOT use modern Angular features (Angular 16+):**
+
+| Feature | CORRECT (Angular 14) | WRONG (Modern) |
+|---------|---------------------|----------------|
+| Control flow | `*ngIf`, `*ngFor`, `[ngSwitch]` | `@if`, `@for`, `@switch` |
+| DI | Constructor injection | `inject()` |
+| Inputs | `@Input()` decorator | `input()` function |
+| Outputs | `@Output()` decorator | `output()` function |
+| Two-way | `@Input()` + `@Output()` | `model()` |
+| State | BehaviorSubject, Observable | signals, `signal()` |
+| Derived | `pipe(map())` | `computed()` |
+| Side effects | `subscribe()` | `effect()` |
+| Components | NgModule-based | standalone |
+
+## 1. Control Flow Syntax (`*ngIf`, `*ngFor`, `[ngSwitch]`)
+
+### Conditional Rendering
+
+```html
+<!-- *ngIf with else -->
+<div *ngIf="isLoading; else loadedContent">
+  <app-spinner></app-spinner>
+</div>
+<ng-template #loadedContent>
+  <div *ngIf="error; else dataContent">
+    <app-error [message]="error?.message"></app-error>
+  </div>
+</ng-template>
+<ng-template #dataContent>
+  <ul>
+    <li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
+  </ul>
+  <p *ngIf="items.length === 0">No data</p>
+</ng-template>
+```
+
+### Iteration
+
+```html
+<!-- *ngFor with index and trackBy -->
+<ul>
+  <li *ngFor="let item of items; let i = index; trackBy: trackById">
+    {{ i + 1 }}. {{ item.name }}
+  </li>
+</ul>
+```
+
+```typescript
+// trackBy function in component
+trackById(index: number, item: Item): string {
+  return item.id;
+}
+```
+
+### Switch Statement
+
+```html
+<div [ngSwitch]="status">
+  <span *ngSwitchCase="'pending'" class="text-yellow-500">Pending</span>
+  <span *ngSwitchCase="'active'" class="text-green-500">Active</span>
+  <span *ngSwitchDefault class="text-gray-500">Unknown</span>
+</div>
+```
+
+## 2. BehaviorSubject for State Management
+
+### When to Use
+
+| Pattern | Use Case |
+|---------|----------|
+| `BehaviorSubject` | Local, mutable state with initial value |
+| `ReplaySubject(1)` | State without initial value |
+| `pipe(map())` | Derived/computed values |
+| `combineLatest` | Combine multiple observables |
+
+### BehaviorSubject Examples
+
+```typescript
+import { BehaviorSubject } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StateService {
+  // Private BehaviorSubject
+  private readonly _items = new BehaviorSubject<Item[]>([]);
+  private readonly _isLoading = new BehaviorSubject<boolean>(false);
+  private readonly _filter = new BehaviorSubject<string>('');
+
+  // Public Observable (read-only)
+  readonly items$ = this._items.asObservable();
+  readonly isLoading$ = this._isLoading.asObservable();
+  readonly filter$ = this._filter.asObservable();
+
+  // Derived state using pipe(map())
+  readonly filtered$ = combineLatest([this._items, this._filter]).pipe(
+    map(([items, filter]) => {
+      const f = filter.toLowerCase();
+      return items.filter(i => i.name.toLowerCase().includes(f));
+    })
+  );
+
+  readonly count$ = this._items.pipe(
+    map(items => items.length)
+  );
+
+  // Methods to update state
+  setItems(items: Item[]): void {
+    this._items.next(items);
+  }
+
+  setLoading(loading: boolean): void {
+    this._isLoading.next(loading);
+  }
+
+  setFilter(filter: string): void {
+    this._filter.next(filter);
+  }
+
+  // Get current value
+  get currentItems(): Item[] {
+    return this._items.getValue();
+  }
+}
+```
+
+## 3. Dependency Injection via Constructor
+
+```typescript
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-my-component',
+  templateUrl: './my-component.component.html',
+  styleUrls: ['./my-component.component.scss'],
+})
+export class MyComponent implements OnInit, OnDestroy {
+  items: Item[] = [];
+
+  private readonly destroy$ = new Subject<void>();
+
+  // Constructor injection (NOT inject())
+  constructor(
+    private readonly http: HttpClient,
+    private readonly router: Router,
+    private readonly myService: MyService,
+    @Optional() private readonly optionalService: OptionalService
+  ) {}
+
+  ngOnInit(): void {
+    this.myService.items$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(items => {
+        this.items = items;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
+```
+
+### Rules
+
+- Place dependencies in constructor
+- Use `private readonly` for services
+- Use `@Optional()` for optional dependencies
+- Always implement `OnDestroy` with `takeUntil` pattern
+
+## 4. Input/Output APIs: `@Input()`, `@Output()`, `EventEmitter`
+
+### Decorator Patterns
+
+```typescript
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges
+} from '@angular/core';
+
+@Component({
+  selector: 'app-form-field',
+  templateUrl: './form-field.component.html',
+})
+export class FormFieldComponent implements OnChanges {
+  // Required input (validate in ngOnChanges)
+  @Input() label!: string;
+
+  // Optional input with default
+  @Input() disabled = false;
+
+  // Input with setter for transformation
+  @Input()
+  set count(value: string | number) {
+    this._count = typeof value === 'string' ? parseInt(value, 10) : value;
+  }
+  get count(): number {
+    return this._count;
+  }
+  private _count = 0;
+
+  // Output event
+  @Output() changed = new EventEmitter<string>();
+
+  // Two-way binding (banana-in-a-box)
+  @Input() value = '';
+  @Output() valueChange = new EventEmitter<string>();
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['label'] && !this.label) {
+      throw new Error('label is required');
+    }
+  }
+
+  onInputChange(newValue: string): void {
+    this.value = newValue;
+    this.valueChange.emit(newValue);
+    this.changed.emit(newValue);
+  }
+}
+```
+
+### Usage in Templates
+
+```html
+<!-- Parent template -->
+<app-form-field
+  label="Name"
+  [disabled]="isDisabled"
+  [(value)]="name"
+  (changed)="onChanged($event)"
+></app-form-field>
+```
+
+## 5. NgModule-based Components
+
+All components must be declared in a module:
+
+```typescript
+// feature.module.ts
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { FeatureComponent } from './feature.component';
+import { FeatureListComponent } from './feature-list/feature-list.component';
+import { FeatureItemComponent } from './feature-item/feature-item.component';
+import { SharedModule } from '@shared/shared.module';
+
+@NgModule({
+  declarations: [
+    FeatureComponent,
+    FeatureListComponent,
+    FeatureItemComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    SharedModule,
+  ],
+  exports: [
+    FeatureComponent,
+  ],
+})
+export class FeatureModule {}
+```
+
+```typescript
+// feature.component.ts
+@Component({
+  selector: 'app-feature',
+  templateUrl: './feature.component.html',
+  styleUrls: ['./feature.component.scss'],
+})
+export class FeatureComponent implements OnInit, OnDestroy {
+  // ... component logic
+}
+```
+
+## 6. Async Pipe Usage
+
+Always prefer `async` pipe over manual subscriptions in templates:
+
+```html
+<!-- Using async pipe -->
+<div *ngIf="isLoading$ | async; else content">
+  <app-spinner></app-spinner>
+</div>
+<ng-template #content>
+  <ul>
+    <li *ngFor="let item of items$ | async; trackBy: trackById">
+      {{ item.name }}
+    </li>
+  </ul>
+</ng-template>
+```
+
+```typescript
+@Component({...})
+export class ListComponent {
+  readonly isLoading$ = this.stateService.isLoading$;
+  readonly items$ = this.stateService.items$;
+
+  constructor(private readonly stateService: StateService) {}
+
+  trackById(index: number, item: Item): string {
+    return item.id;
+  }
+}
+```
+
+## 7. Performance Guidelines
+
+- Every `*ngFor` must have a `trackBy` function
+- Extract complex logic from templates to component methods
+- Use `OnPush` change detection when appropriate
+- Avoid function calls in templates (use getters or properties)
+
+```typescript
+@Component({
+  selector: 'app-optimized',
+  templateUrl: './optimized.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OptimizedComponent {
+  // ...
+}
+```
+
+## 8. PR Checklist (Angular 14 Legacy)
+
+- [ ] Using `*ngIf`/`*ngFor` (NOT `@if`/`@for`)
+- [ ] Using `[ngSwitch]` (NOT `@switch`)
+- [ ] Every `*ngFor` has `trackBy` function
+- [ ] Using constructor DI (NOT `inject()`)
+- [ ] Using `@Input()`/`@Output()` decorators (NOT `input()`/`output()`)
+- [ ] Using BehaviorSubject for state (NOT signals)
+- [ ] Using `pipe(map())` for derived state (NOT `computed()`)
+- [ ] Component declared in NgModule (NOT standalone)
+- [ ] Using `async` pipe in templates
+- [ ] Implementing `OnDestroy` with `takeUntil` pattern

package/plugins/flow-legacy/skills/browser-capture/SKILL.md

@@ -0,0 +1,238 @@
+---
+name: browser-capture
+description: Manage browser sessions and capture screenshots. Ensures dev server is running, navigates to pages, captures responsive screenshots, and uploads them to temporary storage.
+allowed-tools:
+  - Bash
+  - Read
+  - Glob
+  - mcp__playwright__browser_navigate
+  - mcp__playwright__browser_snapshot
+  - mcp__playwright__browser_take_screenshot
+  - mcp__playwright__browser_resize
+  - mcp__playwright__browser_close
+---
+
+# Browser Capture Skill
+
+Manage browser sessions for capturing screenshots of web pages. Automatically ensures the development server is running before capturing.
+
+## Capabilities
+
+1. **Server Management**: Check if dev server is running, start if needed
+2. **Page Navigation**: Navigate to specified URLs using Playwright
+3. **Screenshot Capture**: Take screenshots at multiple viewport sizes
+4. **Upload Screenshots**: Upload captured images to maia-api for use in reports
+
+## Server Management
+
+### Read Port Configuration
+
+```bash
+# Default port location (Nx 14 / Angular 14)
+grep -o '"port":[^,}]*' apps/web/project.json | head -1
+# Default: 4200
+```
+
+### Check if Server is Running
+
+```bash
+lsof -i :4200 -t
+```
+
+- If returns PID -> server is running
+- If returns nothing -> server needs to be started
+
+### Start Server if Needed
+
+```bash
+# Start in background (Nx 14 / @nrwl)
+npm start &
+
+# Wait for server to be ready (check every 2 seconds, max 30 seconds)
+for i in {1..15}; do
+  curl -s http://localhost:4200 > /dev/null && break
+  sleep 2
+done
+```
+
+## Screenshot Capture Process
+
+### 1. Ensure Server is Running
+
+Before any screenshot capture:
+
+1. Read port from `apps/web/project.json` (default: 4200)
+2. Check if port is occupied: `lsof -i :PORT -t`
+3. If not running: `npm start &` and wait ~15 seconds
+
+### 2. Navigate to Page
+
+Use `mcp__playwright__browser_navigate` to open the target URL.
+
+```
+URL format: http://localhost:{port}/{path}
+```
+
+### 3. Capture at Multiple Viewports
+
+Standard viewport sizes:
+
+| Name    | Width | Height |
+| ------- | ----- | ------ |
+| Desktop | 1920  | 1080   |
+| Tablet  | 768   | 1024   |
+| Mobile  | 375   | 667    |
+
+Process for each viewport:
+
+1. `mcp__playwright__browser_resize` -> set dimensions
+2. `mcp__playwright__browser_take_screenshot` -> save to temp file
+
+### 4. Upload Screenshots
+
+After capturing, delegate upload to `maia-api` agent:
+
+```
+Input: /tmp/screenshot-desktop.png
+Output: { id: "abc123", url: "https://maia-ai-api.smartsoft.biz.pl/files/abc123" }
+```
+
+## Usage Examples
+
+### Capture Single Page
+
+```
+Input: { path: "/articles", viewports: ["desktop", "mobile"] }
+
+Process:
+1. Check server running on port 4200
+2. Start if needed, wait for ready
+3. Navigate to http://localhost:4200/articles
+4. Resize to 1920x1080, screenshot -> /tmp/articles-desktop.png
+5. Resize to 375x667, screenshot -> /tmp/articles-mobile.png
+6. Upload both via maia-api agent
+7. Return URLs
+
+Output:
+{
+  "desktop": "https://maia-ai-api.smartsoft.biz.pl/files/abc123",
+  "mobile": "https://maia-ai-api.smartsoft.biz.pl/files/def456"
+}
+```
+
+### Capture Before/After
+
+```
+Input: {
+  path: "/profile",
+  phase: "before" | "after",
+  viewports: ["desktop", "mobile"]
+}
+
+Output:
+{
+  "phase": "before",
+  "desktop": { "id": "abc123", "url": "https://..." },
+  "mobile": { "id": "def456", "url": "https://..." }
+}
+```
+
+## Viewport Presets
+
+| Preset     | Dimensions | Use Case                 |
+| ---------- | ---------- | ------------------------ |
+| `desktop`  | 1920x1080  | Full desktop view        |
+| `laptop`   | 1366x768   | Common laptop resolution |
+| `tablet`   | 768x1024   | iPad portrait            |
+| `mobile`   | 375x667    | iPhone SE/8              |
+| `mobile-l` | 414x896    | iPhone XR/11             |
+
+## Server Ready Check
+
+```bash
+# Check if server responds
+check_server() {
+  local port=$1
+  local max_attempts=$2
+  local attempt=1
+
+  while [ $attempt -le $max_attempts ]; do
+    if curl -s "http://localhost:$port" > /dev/null 2>&1; then
+      echo "Server ready"
+      return 0
+    fi
+    echo "Waiting for server... ($attempt/$max_attempts)"
+    sleep 2
+    ((attempt++))
+  done
+
+  echo "Server not ready after $max_attempts attempts"
+  return 1
+}
+
+check_server 4200 15
+```
+
+## Output Format
+
+When capturing screenshots, return structured data:
+
+```json
+{
+  "serverStarted": true,
+  "port": 4200,
+  "screenshots": [
+    {
+      "viewport": "desktop",
+      "dimensions": "1920x1080",
+      "localPath": "/tmp/screenshot-desktop.png",
+      "uploadedId": "abc123",
+      "uploadedUrl": "https://maia-ai-api.smartsoft.biz.pl/files/abc123"
+    },
+    {
+      "viewport": "mobile",
+      "dimensions": "375x667",
+      "localPath": "/tmp/screenshot-mobile.png",
+      "uploadedId": "def456",
+      "uploadedUrl": "https://maia-ai-api.smartsoft.biz.pl/files/def456"
+    }
+  ]
+}
+```
+
+## Cleanup
+
+After screenshots are used (embedded in Linear comments), cleanup local temp files:
+
+```bash
+rm /tmp/screenshot-*.png
+```
+
+For API cleanup, delegate to `maia-api` agent with collected IDs.
+
+## Error Handling
+
+### Server Won't Start
+
+If server fails to start after 30 seconds:
+
+1. Check for port conflicts: `lsof -i :4200`
+2. Check npm logs for errors
+3. Report error and skip screenshot capture
+
+### Screenshot Fails
+
+If Playwright screenshot fails:
+
+1. Verify navigation succeeded
+2. Check for JavaScript errors: `mcp__playwright__browser_console_messages`
+3. Try alternative viewport
+4. Report partial success
+
+### Upload Fails
+
+If maia-api upload fails:
+
+1. Verify file exists and has content
+2. Retry upload once
+3. Report error with local file path as fallback