@smartsoft001-mobilems/claude-plugins 2.58.0

package/plugins/flow/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
+grep -o '"port":[^,}]*' apps/web/project.json | head -1
+# Default: 4210
+```
+
+### Check if Server is Running
+
+```bash
+lsof -i :4210 -t
+```
+
+- If returns PID → server is running
+- If returns nothing → server needs to be started
+
+### Start Server if Needed
+
+```bash
+# Start in background
+npm start &
+
+# Wait for server to be ready
+for i in {1..15}; do
+  curl -s http://localhost:4210 > /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: 4210)
+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 4210
+2. Start if needed, wait for ready
+3. Navigate to http://localhost:4210/articles
+4. Capture accessibility snapshot
+5. Run axe-core audit
+6. Return violations and recommendations
+
+Output:
+{
+  "url": "http://localhost:4210/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:4210/",
+  "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/skills/angular-patterns/SKILL.md

@@ -0,0 +1,191 @@
+---
+name: angular-patterns
+description: Angular 20 modern patterns including signals, standalone components, and new control flow syntax
+---
+
+# Angular 20 Modern Patterns
+
+This skill provides guidance on Angular 20 best practices for this project.
+
+## 1. Control Flow Syntax (`@if`, `@for`, `@switch`)
+
+- Prefer `@if` over `*ngIf` and `@switch` over `ngSwitch`
+- Prefer `@for` over `*ngFor`; always provide an explicit `track` expression
+- Do not mix old and new syntax in the same file
+
+### Examples
+
+```html
+@if (isLoading()) {
+<app-spinner />
+} @else if (error()) {
+<app-error [message]="error()?.message" />
+} @else {
+<ul>
+  @for (item of items(); track item.id) {
+  <li>{{ item.name }}</li>
+  } @empty {
+  <li>No data</li>
+  }
+</ul>
+}
+```
+
+```html
+@switch (status()) { @case ('pending') {
+<span class="smart-text-yellow-500">Pending</span>
+} @case ('active') {
+<span class="smart-text-green-500">Active</span>
+} @default {
+<span class="smart-text-gray-500">Unknown</span>
+} }
+```
+
+## 2. Signals
+
+### When to Use
+
+| Pattern      | Use Case                                             |
+| ------------ | ---------------------------------------------------- |
+| `signal()`   | Local, mutable component state                       |
+| `computed()` | Pure derivations from other signals                  |
+| `effect()`   | Side-effects (logging, syncing, service interaction) |
+| `toSignal()` | Convert Observable to Signal                         |
+
+### Signal Examples
+
+```typescript
+// Local state
+readonly items = signal<Item[]>([]);
+readonly isLoading = signal(false);
+
+// Computed derivation
+readonly filtered = computed(() => {
+  const f = this.filter().toLowerCase();
+  return this.items().filter(i => i.name.toLowerCase().includes(f));
+});
+
+// Effect for side-effects only
+private readonly syncEffect = effect(() => {
+  const items = this.items();
+  this.analyticsService.track('items-loaded', { count: items.length });
+});
+```
+
+### RxJS Bridging
+
+```typescript
+// Observable → Signal
+private readonly data$ = this.http.get<Data[]>('/api/data');
+readonly data = toSignal(this.data$, { initialValue: [] });
+
+// Signal → Observable (only when needed)
+readonly filter$ = toObservable(this.filter);
+```
+
+### Naming Conventions
+
+- No `Signal`/`Sig` suffix—use semantic names (`items`, `isLoading`)
+- Use descriptive names: `selectedItem`, `filteredResults`, `hasError`
+
+## 3. Dependency Injection via `inject()`
+
+```typescript
+@Component({...})
+export class MyComponent {
+  // Standard pattern
+  private readonly http = inject(HttpClient);
+  private readonly router = inject(Router);
+  private readonly myService = inject(MyService);
+
+  // Optional dependency
+  private readonly optionalService = inject(OptionalService, { optional: true });
+}
+```
+
+### Rules
+
+- Place `inject()` calls near the top of the class
+- Never call `inject()` inside loops or event handlers
+- Assign to `readonly` properties
+
+## 4. Input/Output APIs: `input()`, `output()`, `model()`
+
+### New API Patterns
+
+```typescript
+@Component({...})
+export class FormFieldComponent {
+  // Required input
+  readonly label = input.required<string>();
+
+  // Optional input with default
+  readonly disabled = input(false);
+
+  // Input with transform
+  readonly count = input<number, string>(0, {
+    transform: (v) => parseInt(v, 10)
+  });
+
+  // Output event
+  readonly changed = output<string>();
+
+  // Two-way binding (use sparingly)
+  readonly value = model<string>('');
+}
+```
+
+### Usage in Templates
+
+```html
+<!-- Parent template -->
+<app-form-field
+  label="Name"
+  [disabled]="isDisabled()"
+  [(value)]="name"
+  (changed)="onChanged($event)"
+/>
+```
+
+## 5. Standalone Components
+
+All new components should be standalone:
+
+```typescript
+@Component({
+  selector: 'app-feature',
+  standalone: true,
+  imports: [CommonModule, RouterModule, SharedModule],
+  template: `...`,
+  styles: `...`,
+})
+export class FeatureComponent {
+  // ...
+}
+```
+
+## 6. Performance Guidelines
+
+- Every `@for` must have a stable `track` expression (prefer `item.id` over index)
+- Extract complex conditions into `computed()` signals
+- Avoid allocating new arrays/objects in template expressions
+- Use `OnPush` change detection when appropriate
+
+## 7. Migration Order (Legacy Code)
+
+When touching legacy code, migrate in this order:
+
+1. `*ngIf` → `@if`
+2. `*ngFor` → `@for` (add `track`)
+3. Constructor DI → `inject()`
+4. `@Input/@Output` → `input()/output()/model()`
+5. Simple state Observables → signals
+
+## 8. PR Checklist
+
+- [ ] No mixing of `*ngIf/*ngFor` with `@if/@for` in same logical block
+- [ ] Every `@for` has a `track` expression
+- [ ] No unnecessary `subscribe()` calls (use `toSignal`)
+- [ ] DI uses `inject()` (no new constructor-based DI)
+- [ ] Inputs/Outputs use `input()/output()/model()` in new code
+- [ ] No heavy inline computations in templates

package/plugins/flow/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
+grep -o '"port":[^,}]*' apps/web/project.json | head -1
+# Default: 4210
+```
+
+### Check if Server is Running
+
+```bash
+lsof -i :4210 -t
+```
+
+- If returns PID → server is running
+- If returns nothing → server needs to be started
+
+### Start Server if Needed
+
+```bash
+# Start in background
+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:4210 > /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: 4210)
+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 4210
+2. Start if needed, wait for ready
+3. Navigate to http://localhost:4210/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 4210 15
+```
+
+## Output Format
+
+When capturing screenshots, return structured data:
+
+```json
+{
+  "serverStarted": true,
+  "port": 4210,
+  "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 :4210`
+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