@smartsoft001-mobilems/claude-plugins 2.85.0 → 2.87.0

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

@@ -1,346 +0,0 @@
----
-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

@@ -1,238 +0,0 @@
----
-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