@smartsoft001/pro-claude-plugins 0.2.0

package/plugins/flow-legacy/skills/a11y-audit/SKILL.md

@@ -0,0 +1,214 @@
+---
+name: a11y-audit
+description: Run accessibility audits on web pages. Ensures dev server is running, navigates to pages, captures accessibility snapshots, and runs axe-core tests.
+allowed-tools:
+  - Bash
+  - Read
+  - Glob
+  - mcp__playwright__browser_navigate
+  - mcp__playwright__browser_snapshot
+  - mcp__playwright__browser_evaluate
+  - mcp__playwright__browser_close
+---
+
+# Accessibility Audit Skill
+
+Run accessibility audits on web pages using Playwright and axe-core. Automatically ensures the development server is running before auditing.
+
+## Capabilities
+
+1. **Server Management**: Check if dev server is running, start if needed
+2. **Page Navigation**: Navigate to specified URLs using Playwright
+3. **Accessibility Snapshot**: Capture accessibility tree for analysis
+4. **Axe-core Testing**: Run automated accessibility tests
+
+## Server Management
+
+### Read Port Configuration
+
+```bash
+# Default port location (Nx 14 / Angular 14 project)
+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
+for i in {1..15}; do
+  curl -s http://localhost:4200 > /dev/null && break
+  sleep 2
+done
+```
+
+## Audit Process
+
+### 1. Ensure Server is Running
+
+Before any audit:
+
+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 Accessibility Snapshot
+
+Use `mcp__playwright__browser_snapshot` to get the accessibility tree.
+
+This provides:
+
+- Element roles and names
+- ARIA attributes
+- Focus states
+- Interactive element information
+
+### 4. Run Axe-core Audit
+
+Use `mcp__playwright__browser_evaluate` to inject and run axe-core:
+
+```javascript
+// Example evaluation code
+async () => {
+  // Load axe-core from CDN
+  const script = document.createElement('script');
+  script.src =
+    'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.8.2/axe.min.js';
+  document.head.appendChild(script);
+
+  await new Promise((resolve) => (script.onload = resolve));
+
+  // Run audit
+  const results = await axe.run();
+  return {
+    violations: results.violations,
+    passes: results.passes.length,
+    incomplete: results.incomplete,
+  };
+};
+```
+
+## Usage Examples
+
+### Full Page Audit
+
+```
+Input: { path: "/articles" }
+
+Process:
+1. Check server running on port 4200
+2. Start if needed, wait for ready
+3. Navigate to http://localhost:4200/articles
+4. Capture accessibility snapshot
+5. Run axe-core audit
+6. Return violations and recommendations
+
+Output:
+{
+  "url": "http://localhost:4200/articles",
+  "snapshot": { ... accessibility tree ... },
+  "violations": [
+    {
+      "id": "image-alt",
+      "impact": "critical",
+      "description": "Images must have alternate text",
+      "nodes": [...]
+    }
+  ],
+  "passes": 45,
+  "incomplete": 2
+}
+```
+
+### Quick Check
+
+```
+Input: { path: "/", snapshotOnly: true }
+
+Output:
+{
+  "url": "http://localhost:4200/",
+  "snapshot": { ... accessibility tree ... }
+}
+```
+
+## Report Format
+
+When generating reports, use this structure:
+
+```markdown
+## Accessibility Audit Report
+
+**Page**: [URL]
+**Date**: [Date]
+**Standard**: WCAG 2.1 Level AA
+
+### Critical Issues (Must Fix)
+
+| Issue       | Elements | WCAG  | Fix                      |
+| ----------- | -------- | ----- | ------------------------ |
+| Missing alt | 3 images | 1.1.1 | Add descriptive alt text |
+
+### Serious Issues (Should Fix)
+
+| Issue        | Elements   | WCAG  | Fix              |
+| ------------ | ---------- | ----- | ---------------- |
+| Low contrast | 2 elements | 1.4.3 | Use darker color |
+
+### Passed Checks
+
+- [x] Page has lang attribute
+- [x] Headings in correct order
+- [x] Form inputs have labels
+
+### Summary
+
+- Violations: X critical, Y serious, Z minor
+- Passed: N checks
+```
+
+## Error Handling
+
+### Server Won't Start
+
+If server fails to start after 30 seconds:
+
+1. Check for port conflicts
+2. Check npm logs for errors
+3. Report error and skip audit
+
+### Axe-core Load Fails
+
+If axe-core fails to load:
+
+1. Check network connectivity
+2. Try alternative CDN
+3. Fall back to snapshot-only audit
+
+### Navigation Fails
+
+If page doesn't load:
+
+1. Verify URL is correct
+2. Check for JavaScript errors
+3. Report partial results

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

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