@smartsoft001-mobilems/claude-plugins 2.77.0 → 2.78.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartsoft001-mobilems/claude-plugins",
-  "version": "2.77.0",
+  "version": "2.78.0",
   "publishConfig": {
     "access": "public"
   },

package/plugins/flow/.claude-plugin/plugin.json

@@ -1,5 +1,5 @@
 {
   "name": "flow",
   "description": "Development flow skills for Linear-driven development workflow",
-  "version": "2.77.0"
+  "version": "2.78.0"
 }

package/plugins/flow-external/.claude-plugin/README.md

@@ -0,0 +1,152 @@
+# Flow-External Plugin for Claude Code
+
+Development flow skills for **standalone Angular 6-11 projects** without the MobileMS framework. These are external projects using Angular CLI with their own styling approach (Bootstrap 4, custom SCSS, or other).
+
+## Target Projects
+
+This plugin is designed for standalone MobileMS projects:
+
+- **mobilems-asp** (Angular 11)
+- **mobilems-etno** (Angular 11)
+- **mobilems-mnw** (Angular 9)
+- **mobilems-muzuem-malopolskie** (Angular 8)
+- **mobilems-muzeum-powstan-slaskich** (Angular 6)
+
+### Technology Stack
+
+| Feature | External Projects |
+|---------|-------------------|
+| Angular | 6 - 11 |
+| Build system | Angular CLI (`ng`) |
+| Styling | Project-specific (Bootstrap 4 / custom SCSS) |
+| i18n | ngx-translate + LocalizeRouter |
+| State | NgRx + localStorage sync |
+| Project structure | Standalone (app/cli/docker) |
+
+### Patterns (what this plugin supports)
+
+| Feature | External (Angular 6-11) | Legacy (Angular 14) | Modern (Angular 20+) |
+|---------|-------------------------|---------------------|----------------------|
+| Control flow | `*ngIf`, `*ngFor` | `*ngIf`, `*ngFor` | `@if`, `@for` |
+| DI | Constructor injection | Constructor injection | `inject()` |
+| Inputs/Outputs | `@Input()`, `@Output()` | `@Input()`, `@Output()` | `input()`, `output()` |
+| State | BehaviorSubject, NgRx | BehaviorSubject | Signals |
+| Components | NgModules | NgModules | Standalone |
+| Styling | Bootstrap 4 / custom SCSS | Tailwind CSS | Tailwind CSS |
+| Build | `ng build` | `nx build` | `nx build` |
+
+## Workflow Skills
+
+| Skill | Description |
+|-------|-------------|
+| `/commit` | Create conventional commit based on Linear task |
+| `/impl` | Implement plans from Linear task comments |
+| `/plan` | Create implementation plan and save to Linear |
+| `/push` | Push changes and update Linear status |
+
+## Installation
+
+### 1. Enable plugin in project's `.claude/settings.json`:
+
+```json
+{
+  "enabledPlugins": {
+    "flow-external@mobilems": true
+  }
+}
+```
+
+### 2. Merge permissions from template
+
+Run the merge script:
+
+```bash
+node node_modules/@smartsoft001-mobilems/claude-plugins/plugins/flow-external/.claude-plugin/merge-permissions.js
+```
+
+## Required MCP Servers
+
+Configure these in your `.mcp.json`:
+
+- `linear-server` - Linear API integration
+- `playwright` - Browser automation for screenshots
+
+## Permission Strategy
+
+### Automatic (allow)
+- Git read operations (status, diff, log, show)
+- Angular CLI commands (ng build, ng lint, ng serve)
+- Linear API (read/write issues, comments)
+- Playwright (screenshots)
+- Utility skills
+
+### Requires Confirmation (ask)
+- Workflow skills (/commit, /impl, /plan, /push)
+- `git commit` - creating commits
+- `git push` - pushing to remote
+- `gh pr create` - creating pull requests
+
+## Utility Skills
+
+| Skill | Description |
+|-------|-------------|
+| `maia-files-upload` | Upload files to Maia API |
+| `maia-files-delete` | Delete files from Maia API |
+| `browser-capture` | Capture screenshots with Playwright |
+| `linear-suggestion` | Create Linear issues for improvements |
+| `a11y-audit` | Accessibility audit |
+
+## Agents
+
+### Angular Agents (Legacy CLI patterns)
+- `angular-component-scaffolder` - Components with NgModules, `*ngIf`/`*ngFor`, constructor DI
+- `angular-service-builder` - Services with BehaviorSubject, constructor DI
+- `angular-state-builder` - NgRx state management with reducers and effects
+- `angular-directive-builder` - Directives with constructor DI
+- `angular-pipe-builder` - Pipes with constructor DI
+- `angular-guard-builder` - Class-based guards with constructor DI
+- `angular-resolver-builder` - Class-based resolvers with constructor DI
+
+### Shared Agents
+- `shared-impl-orchestrator` - Implementation orchestration
+- `shared-impl-reporter` - Implementation reporting
+- `shared-linear-subtask-iterator` - Linear subtask iteration
+- `shared-build-verifier` - Build verification via `ng build`
+- `shared-ui-classifier` - UI change classification
+- `ui-web-designer` - Styling with project-specific approach (Bootstrap 4 or custom SCSS)
+
+## Differences from other plugins
+
+| Aspect | `flow` (modern) | `flow-legacy` | `flow-external` |
+|--------|-----------------|---------------|-----------------|
+| Angular version | 20+ | 14 | 6-11 |
+| Build system | Nx | Nx | Angular CLI |
+| Styling | Tailwind | Tailwind | Project-specific |
+| State | Signals | BehaviorSubject | NgRx + BehaviorSubject |
+| Project structure | Nx monorepo | Nx monorepo | Standalone app/ |
+
+## Example Project Structure
+
+```
+project-root/
+  app/                    # Frontend Angular application
+    src/
+      app/
+        components/
+        services/
+        pipes/
+        directives/
+        interceptors/
+        guards/
+        state/            # NgRx store
+      assets/
+      environments/
+    angular.json
+    package.json
+    tsconfig.json
+  cli/                    # CLI scripts
+    frontend-cli
+  docker/                 # Docker configuration
+    Dockerfile
+  .env
+```

package/plugins/flow-external/.claude-plugin/merge-permissions.js

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+/**
+ * Merge flow-external plugin permissions into project's .claude/settings.json
+ *
+ * Usage:
+ *   npx @smartsoft001-mobilems/claude-plugins flow-external:merge-permissions
+ *
+ * Or directly:
+ *   node node_modules/@smartsoft001-mobilems/claude-plugins/plugins/flow-external/.claude-plugin/merge-permissions.js
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const SETTINGS_PATH = path.join(process.cwd(), '.claude', 'settings.json');
+const TEMPLATE_PATH = path.join(__dirname, 'settings.template.json');
+
+function loadJson(filePath) {
+  try {
+    return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+  } catch (e) {
+    return null;
+  }
+}
+
+function mergeArrays(existing, template) {
+  return [...new Set([...existing, ...template])];
+}
+
+function main() {
+  console.log('Flow-External Plugin - Merge Permissions\n');
+
+  // Load template
+  const template = loadJson(TEMPLATE_PATH);
+  if (!template) {
+    console.error('ERROR: Could not load template from:', TEMPLATE_PATH);
+    process.exit(1);
+  }
+
+  // Load or create settings
+  let settings = loadJson(SETTINGS_PATH);
+  if (!settings) {
+    console.log('Creating new .claude/settings.json...');
+    fs.mkdirSync(path.dirname(SETTINGS_PATH), { recursive: true });
+    settings = { permissions: { allow: [], deny: [], ask: [] } };
+  }
+
+  // Ensure permissions structure exists
+  settings.permissions = settings.permissions || { allow: [], deny: [], ask: [] };
+  settings.permissions.allow = settings.permissions.allow || [];
+  settings.permissions.ask = settings.permissions.ask || [];
+  settings.permissions.deny = settings.permissions.deny || [];
+
+  // Count before
+  const beforeAllow = settings.permissions.allow.length;
+  const beforeAsk = settings.permissions.ask.length;
+
+  // Merge permissions
+  settings.permissions.allow = mergeArrays(settings.permissions.allow, template.permissions.allow);
+  settings.permissions.ask = mergeArrays(settings.permissions.ask, template.permissions.ask);
+
+  // Enable plugin
+  settings.enabledPlugins = settings.enabledPlugins || {};
+  settings.enabledPlugins['flow-external@mobilems'] = true;
+
+  // Write back
+  fs.writeFileSync(SETTINGS_PATH, JSON.stringify(settings, null, 2) + '\n');
+
+  // Report
+  const addedAllow = settings.permissions.allow.length - beforeAllow;
+  const addedAsk = settings.permissions.ask.length - beforeAsk;
+
+  console.log('Permissions merged successfully!\n');
+  console.log(`  allow: ${beforeAllow} -> ${settings.permissions.allow.length} (+${addedAllow})`);
+  console.log(`  ask:   ${beforeAsk} -> ${settings.permissions.ask.length} (+${addedAsk})`);
+  console.log(`\nPlugin enabled: flow-external@mobilems`);
+  console.log(`\nFile updated: ${SETTINGS_PATH}`);
+}
+
+main();

package/plugins/flow-external/.claude-plugin/plugin.json

@@ -0,0 +1,5 @@
+{
+  "name": "flow-external",
+  "description": "Development flow skills for standalone Angular 6-11 museum projects without framework (Angular CLI, Karma/Jasmine, Bootstrap 4)",
+  "version": "2.78.0"
+}

package/plugins/flow-external/.claude-plugin/settings.template.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "https://raw.githubusercontent.com/anthropics/claude-code/main/schemas/settings.schema.json",
+  "_description": "Template permissions for flow-external@mobilems plugin. Merge these into your project's .claude/settings.json",
+  "permissions": {
+    "allow": [
+      "Bash(git status:*)",
+      "Bash(git diff:*)",
+      "Bash(git log:*)",
+      "Bash(git show:*)",
+      "Bash(git add:*)",
+      "Bash(git fetch:*)",
+      "Bash(git pull:*)",
+      "Bash(gh run list:*)",
+      "Bash(gh run view:*)",
+      "Bash(gh pr list:*)",
+      "Bash(ng:*)",
+      "Bash(npx ng:*)",
+      "Bash(npx tsc:*)",
+      "Bash(npm start)",
+      "Bash(npm run:*)",
+      "Bash(npm audit:*)",
+      "Bash(npm install:*)",
+      "Bash(source:*)",
+      "Bash(nvm use:*)",
+      "Bash(curl:*)",
+      "Bash(lsof:*)",
+      "Bash(ls:*)",
+      "Bash(find:*)",
+      "Bash(grep:*)",
+      "Bash(xargs:*)",
+      "Bash(sleep:*)",
+      "Bash(rm:*)",
+      "Bash(test:*)",
+      "Bash(for:*)",
+      "Bash(node:*)",
+      "Bash(mkdir:*)",
+      "mcp__linear-server__get_issue",
+      "mcp__linear-server__list_issues",
+      "mcp__linear-server__list_comments",
+      "mcp__linear-server__create_comment",
+      "mcp__linear-server__delete_comment",
+      "mcp__linear-server__update_issue",
+      "mcp__linear-server__list_issue_statuses",
+      "mcp__linear-server__create_issue",
+      "mcp__playwright__browser_snapshot",
+      "mcp__playwright__browser_take_screenshot",
+      "mcp__playwright__browser_navigate",
+      "mcp__playwright__browser_close",
+      "mcp__playwright__browser_wait_for",
+      "mcp__playwright__browser_click",
+      "mcp__playwright__browser_resize",
+      "mcp__playwright__browser_evaluate",
+      "mcp__playwright__browser_console_messages",
+      "mcp__playwright__browser_press_key",
+      "mcp__playwright__browser_network_requests",
+      "Skill(flow-external:maia-files-upload)",
+      "Skill(flow-external:maia-files-delete)",
+      "Skill(flow-external:browser-capture)",
+      "Skill(flow-external:linear-suggestion)",
+      "Skill(flow-external:a11y-audit)"
+    ],
+    "ask": [
+      "Skill(flow-external:commit)",
+      "Skill(flow-external:impl)",
+      "Skill(flow-external:plan)",
+      "Skill(flow-external:push)",
+      "Bash(git commit:*)",
+      "Bash(git push:*)",
+      "Bash(gh pr create:*)"
+    ]
+  },
+  "enabledPlugins": {
+    "flow-external@mobilems": true
+  }
+}

package/plugins/flow-external/agents/angular-component-scaffolder.md

@@ -0,0 +1,269 @@
+---
+name: angular-component-scaffolder
+description: Create Angular 6-11 components with NgModules and legacy patterns. Use when scaffolding new components for standalone museum projects (Bootstrap 4, *ngIf/*ngFor, constructor DI).
+tools: Read, Write, Glob, Grep
+model: sonnet
+color: "#DD0031"
+---
+
+You are an expert at creating Angular components for standalone museum projects (Angular 6-11).
+
+## Primary Responsibility
+
+Create Angular components using Angular 6-11 patterns including NgModules, `*ngIf`/`*ngFor`, constructor injection, `@Input()`/`@Output()` decorators, and Bootstrap 4 styling.
+
+## When to Use
+
+- Creating new Angular components in standalone Angular CLI projects
+- Scaffolding component structure with template and styles
+- Setting up component with proper constructor DI and Bootstrap 4
+
+## CRITICAL: Angular 6-11 Patterns (MANDATORY)
+
+**NEVER use modern Angular patterns. ALWAYS use these legacy patterns:**
+
+| Feature | CORRECT (Angular 6-11) | WRONG (Angular 14+/20+) |
+|---------|------------------------|-------------------------|
+| Control flow | `*ngIf`, `*ngFor` | `@if`, `@for` |
+| DI | Constructor injection | `inject()` |
+| Inputs | `@Input()` decorator | `input()`, `input.required()` |
+| Outputs | `@Output()` decorator | `output()` |
+| Two-way binding | `@Input()` + `@Output()` | `model()` |
+| State | Class properties, BehaviorSubject | `signal()` |
+| Derived state | Getters | `computed()` |
+| Styling | Bootstrap 4 + SCSS | Tailwind CSS |
+| Components | NgModules | Standalone |
+
+## Project-Specific Patterns
+
+These projects use:
+
+- **NgModules** - components must be declared in modules
+- **`*ngIf` and `*ngFor`** for control flow
+- **Constructor injection** for DI
+- **`@Input()` and `@Output()`** decorators
+- **Bootstrap 4** with ng-bootstrap for UI
+- **ngx-translate** for i18n (`TranslateModule`, `| translate` pipe)
+- **SCSS** for styles (not Tailwind)
+- **No signals** - use class properties and BehaviorSubject
+
+## Component Templates
+
+### Basic Component
+
+```typescript
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-feature-name',
+  templateUrl: './feature-name.component.html',
+  styleUrls: ['./feature-name.component.scss'],
+})
+export class FeatureNameComponent implements OnInit, OnDestroy {
+  isLoading = false;
+  data: DataType[] = [];
+  error: string | null = null;
+
+  private readonly destroy$ = new Subject<void>();
+
+  constructor(
+    private readonly dataService: DataService,
+    private readonly router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.loadData();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private loadData(): void {
+    this.isLoading = true;
+    this.dataService.getData()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (data) => {
+          this.data = data;
+          this.isLoading = false;
+        },
+        error: (err) => {
+          this.error = err.message;
+          this.isLoading = false;
+        },
+      });
+  }
+
+  get itemCount(): number {
+    return this.data.length;
+  }
+
+  get hasData(): boolean {
+    return this.data.length > 0;
+  }
+}
+```
+
+### Component with Inputs/Outputs
+
+```typescript
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+
+@Component({
+  selector: 'app-item-card',
+  templateUrl: './item-card.component.html',
+  styleUrls: ['./item-card.component.scss'],
+})
+export class ItemCardComponent implements OnChanges {
+  @Input() label!: string;
+  @Input() item!: Item;
+  @Input() showActions = true;
+
+  @Output() selected = new EventEmitter<Item>();
+  @Output() closed = new EventEmitter<void>();
+
+  isOpen = false;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['item']) {
+      console.log('Item changed:', this.item);
+    }
+  }
+
+  onSelect(): void {
+    this.selected.emit(this.item);
+  }
+
+  onClose(): void {
+    this.closed.emit();
+  }
+}
+```
+
+## Template Patterns (Bootstrap 4 + ngx-translate)
+
+```html
+<!-- Loading state -->
+<div *ngIf="isLoading" class="d-flex justify-content-center p-5">
+  <div class="spinner-border text-primary" role="status">
+    <span class="sr-only">{{ 'COMMON.loading' | translate }}</span>
+  </div>
+</div>
+
+<!-- Error state -->
+<div *ngIf="error" class="alert alert-danger" role="alert">
+  {{ error }}
+</div>
+
+<!-- Content -->
+<div *ngIf="!isLoading && !error">
+  <div class="row" *ngIf="hasData; else emptyTemplate">
+    <div class="col-md-4 mb-4" *ngFor="let item of data; trackBy: trackByFn">
+      <div class="card h-100">
+        <img *ngIf="item.image" [src]="item.image" class="card-img-top" [alt]="item.title">
+        <div class="card-body">
+          <h5 class="card-title">{{ item.title }}</h5>
+          <p class="card-text">{{ item.description | truncate:150 }}</p>
+        </div>
+        <div class="card-footer">
+          <button class="btn btn-primary btn-sm" (click)="onSelect(item)">
+            {{ 'COMMON.details' | translate }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <ng-template #emptyTemplate>
+    <div class="text-center p-5 text-muted">
+      <p>{{ 'COMMON.noItems' | translate }}</p>
+    </div>
+  </ng-template>
+</div>
+```
+
+### TrackBy Function
+
+```typescript
+trackByFn(index: number, item: Item): string {
+  return item.id;
+}
+```
+
+## SCSS Styling (Bootstrap 4)
+
+```scss
+:host {
+  display: block;
+}
+
+.card {
+  transition: box-shadow 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  }
+
+  .card-img-top {
+    height: 200px;
+    object-fit: cover;
+  }
+}
+```
+
+## Module Declaration
+
+```typescript
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { FeatureNameComponent } from './feature-name.component';
+import { ItemCardComponent } from './item-card/item-card.component';
+
+@NgModule({
+  declarations: [
+    FeatureNameComponent,
+    ItemCardComponent,
+  ],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    NgbModule,
+  ],
+  exports: [
+    FeatureNameComponent,
+    ItemCardComponent,
+  ],
+})
+export class FeatureModule {}
+```
+
+## File Structure
+
+```
+feature-name/
+  feature-name.component.ts
+  feature-name.component.html
+  feature-name.component.scss
+  feature-name.component.spec.ts
+  feature-name.module.ts
+```
+
+## Checklist
+
+- [ ] Uses NgModule (NOT standalone)
+- [ ] Uses constructor injection (NOT `inject()`)
+- [ ] Uses `@Input()` / `@Output()` decorators (NOT `input()` / `output()`)
+- [ ] Uses `*ngIf` / `*ngFor` in template (NOT `@if` / `@for`)
+- [ ] Has `trackBy` function for all `*ngFor` loops
+- [ ] Uses Bootstrap 4 classes for layout (NOT Tailwind)
+- [ ] Uses ngx-translate `| translate` pipe for i18n
+- [ ] Has `OnDestroy` with Subject for cleanup
+- [ ] Declared in a module with TranslateModule and NgbModule imports
+- [ ] Has proper TypeScript types