@smartsoft001-mobilems/claude-plugins 2.77.0 → 2.78.0

package/plugins/flow-external/agents/ui-web-designer.md

@@ -0,0 +1,179 @@
+---
+name: ui-web-designer
+description: Style components and views using the project's existing styling approach. Detects and follows Bootstrap 4, custom SCSS, or other CSS frameworks already used in the project.
+tools: Read, Write, Edit, Glob, Grep
+model: sonnet
+color: "#7952B3"
+---
+
+You are a web designer for standalone Angular 6-11 projects.
+
+## Primary Responsibility
+
+Style Angular components following the **existing styling approach** of the project. First detect what CSS framework/approach the project uses, then follow it consistently.
+
+## CRITICAL: Detect Project Styling Before Writing
+
+Before writing any styles, check the project's `package.json` for styling dependencies:
+
+```bash
+# Check for Bootstrap
+grep -q "bootstrap" package.json && echo "BOOTSTRAP"
+
+# Check for ng-bootstrap
+grep -q "ng-bootstrap" package.json && echo "NG-BOOTSTRAP"
+
+# Check existing SCSS patterns
+ls src/app/**/*.scss 2>/dev/null | head -5
+```
+
+### If Bootstrap 4 is present (most common)
+
+Use Bootstrap 4 classes and ng-bootstrap components:
+
+```html
+<div class="container">
+  <div class="row">
+    <div class="col-md-8">Main content</div>
+    <div class="col-md-4">Sidebar</div>
+  </div>
+</div>
+```
+
+### If no CSS framework
+
+Use custom SCSS following the project's existing patterns. Check existing `.scss` files for naming conventions and variable patterns.
+
+## Bootstrap 4 Patterns (when applicable)
+
+### Cards
+
+```html
+<div class="card h-100">
+  <img [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 }}</p>
+  </div>
+  <div class="card-footer text-muted">
+    <small>{{ item.date | date }}</small>
+  </div>
+</div>
+```
+
+### Navigation
+
+```html
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <a class="navbar-brand" href="#">
+    <img [src]="logoUrl" height="40" alt="Logo">
+  </a>
+  <button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div [ngbCollapse]="isCollapsed" class="collapse navbar-collapse">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item" *ngFor="let item of menuItems">
+        <a class="nav-link" [routerLink]="item.route">
+          {{ item.label | translate }}
+        </a>
+      </li>
+    </ul>
+  </div>
+</nav>
+```
+
+### Gallery
+
+```html
+<div class="row gallery">
+  <div class="col-md-4 col-sm-6 mb-4" *ngFor="let photo of photos; trackBy: trackByFn">
+    <div class="gallery-item" (click)="openLightbox(photo)">
+      <img [src]="photo.thumbnail" [alt]="photo.alt" class="img-fluid rounded">
+    </div>
+  </div>
+</div>
+```
+
+## WCAG Accessibility (Common for museum/cultural sites)
+
+```html
+<!-- High contrast toggle -->
+<button class="btn btn-outline-secondary" (click)="toggleContrast()"
+        [attr.aria-label]="'WCAG.highContrast' | translate">
+  <i class="fa fa-adjust"></i>
+</button>
+
+<!-- Font size controls -->
+<div class="btn-group" role="group" aria-label="Font size">
+  <button class="btn btn-sm btn-outline-secondary" (click)="decreaseFontSize()">A-</button>
+  <button class="btn btn-sm btn-outline-secondary" (click)="resetFontSize()">A</button>
+  <button class="btn btn-sm btn-outline-secondary" (click)="increaseFontSize()">A+</button>
+</div>
+```
+
+## SCSS Patterns
+
+```scss
+:host {
+  display: block;
+}
+
+// Card hover effects
+.card {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .gallery-item img {
+    height: 150px;
+    object-fit: cover;
+  }
+}
+```
+
+## ng-bootstrap Components (when ng-bootstrap is available)
+
+```html
+<!-- Carousel -->
+<ngb-carousel>
+  <ng-template ngbSlide *ngFor="let slide of slides">
+    <img [src]="slide.image" [alt]="slide.alt">
+  </ng-template>
+</ngb-carousel>
+
+<!-- Modal -->
+<ng-template #modal let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title">{{ title }}</h4>
+    <button type="button" class="close" (click)="modal.dismiss()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">Content</div>
+</ng-template>
+
+<!-- Pagination -->
+<ngb-pagination
+  [collectionSize]="totalItems"
+  [(page)]="currentPage"
+  [pageSize]="pageSize"
+  (pageChange)="onPageChange($event)">
+</ngb-pagination>
+```
+
+## Checklist
+
+- [ ] Detected project's existing styling approach first
+- [ ] Follows existing CSS patterns consistently
+- [ ] Responsive layout
+- [ ] WCAG accessibility considerations
+- [ ] Works with `*ngIf`/`*ngFor` template syntax
+- [ ] Uses `| translate` pipe for user-visible text (when ngx-translate is present)
+- [ ] Proper alt attributes on images

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

@@ -0,0 +1,96 @@
+---
+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.
+
+## Server Management
+
+### Detect Port and Project Structure
+
+```bash
+# Check if angular.json is at root or in app/
+if [ -f "angular.json" ]; then
+  grep -o '"port":[^,}]*' angular.json | head -1
+elif [ -f "app/angular.json" ]; then
+  grep -o '"port":[^,}]*' app/angular.json | head -1
+fi
+# Default: 4200
+```
+
+### Check if Server is Running
+
+```bash
+lsof -i :4200 -t
+```
+
+### Start Server if Needed
+
+```bash
+# Start in background (Angular CLI)
+npm start &
+
+# Wait for server
+for i in {1..15}; do
+  curl -s http://localhost:4200 > /dev/null && break
+  sleep 2
+done
+```
+
+## Audit Process
+
+1. Ensure server is running
+2. Navigate to page with `mcp__playwright__browser_navigate`
+3. Capture accessibility snapshot with `mcp__playwright__browser_snapshot`
+4. Run axe-core with `mcp__playwright__browser_evaluate`:
+
+```javascript
+async () => {
+  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);
+  const results = await axe.run();
+  return {
+    violations: results.violations,
+    passes: results.passes.length,
+    incomplete: results.incomplete,
+  };
+}
+```
+
+## Report Format
+
+```markdown
+## Accessibility Audit Report
+
+**Page**: [URL]
+**Standard**: WCAG 2.1 Level AA
+
+### Critical Issues
+
+| Issue | Elements | WCAG | Fix |
+|-------|----------|------|-----|
+| Missing alt | 3 images | 1.1.1 | Add descriptive alt text |
+
+### Passed Checks
+
+- [x] Page has lang attribute
+- [x] Headings in correct order
+
+### Summary
+
+- Violations: X critical, Y serious
+- Passed: N checks
+```

package/plugins/flow-external/skills/angular-cli-conventions/SKILL.md

@@ -0,0 +1,267 @@
+---
+name: angular-cli-conventions
+description: Angular CLI project conventions for standalone Angular 6-11 projects. Build commands, project structure, and configuration patterns.
+---
+
+# Angular CLI Conventions
+
+This skill provides guidance on Angular CLI project patterns for standalone Angular 6-11 projects.
+
+## CRITICAL: Angular CLI (NOT Nx)
+
+These projects use Angular CLI directly. Do NOT use Nx commands.
+
+| Feature | CORRECT (Angular CLI) | WRONG (Nx) |
+|---------|----------------------|------------|
+| Serve | `ng serve` | `nx serve` |
+| Build | `ng build --prod` | `nx build` |
+| Lint | `ng lint` | `nx lint` |
+| Generate | `ng generate` | `nx generate` |
+| Config | `angular.json` | `project.json` |
+
+## 1. Project Structure
+
+### Standard Layout (most projects)
+
+```
+project-root/
+  app/                          # Frontend application directory
+    src/
+      app/
+        components/             # Shared/feature components
+        services/               # Services
+        pipes/                  # Custom pipes
+        directives/             # Custom directives
+        interceptors/           # HTTP interceptors
+        guards/                 # Route guards
+        state/                  # NgRx store (if used)
+        models/                 # TypeScript interfaces
+        app.module.ts           # Root module
+        app.component.ts        # Root component
+        app-routing.module.ts   # Root routing
+      assets/                   # Static assets
+      environments/             # Environment configs
+        environment.ts
+        environment.prod.ts
+      index.html
+      main.ts
+      polyfills.ts
+      styles.scss               # Global styles
+    angular.json                # Angular CLI config
+    package.json
+    tsconfig.json
+    tsconfig.app.json
+    karma.conf.js               # Karma test config
+    .env                        # Environment variables
+  cli/                          # CLI scripts
+    frontend-cli
+    complete
+    help
+    utils
+  docker/                       # Docker configuration
+    Dockerfile
+    supervisord/
+  .env                          # Root env (Docker registry, tokens)
+```
+
+### Root-Level Layout (older projects)
+
+```
+project-root/
+  src/
+    app/
+      ...
+  angular.json
+  package.json
+  ...
+```
+
+## 2. Common Commands
+
+### Development
+
+```bash
+# Start dev server
+npm start
+# OR
+ng serve
+
+# Start with specific port
+ng serve --port 4201
+
+# Start with proxy
+ng serve --proxy-config proxy.conf.json
+```
+
+### Building
+
+```bash
+# Development build
+ng build
+
+# Production build
+ng build --prod
+
+# Production with specific config
+ng build --configuration=production
+```
+
+### Linting
+
+```bash
+ng lint
+```
+
+### Code Generation
+
+```bash
+# Generate component
+ng generate component components/feature-name
+
+# Generate service
+ng generate service services/feature-name
+
+# Generate module
+ng generate module feature-name
+
+# Generate pipe
+ng generate pipe pipes/feature-name
+
+# Generate directive
+ng generate directive directives/feature-name
+
+# Generate guard
+ng generate guard guards/auth
+
+# Dry run (preview)
+ng generate component feature-name --dry-run
+```
+
+## 3. Configuration Files
+
+### angular.json
+
+Key sections:
+- `projects.<name>.architect.build` - Build configuration
+- `projects.<name>.architect.serve` - Dev server configuration
+- `projects.<name>.architect.lint` - Lint configuration
+
+### Environment Files
+
+```typescript
+// environments/environment.ts (development)
+export const environment = {
+  production: false,
+  apiUrl: 'http://localhost:3000/api',
+};
+
+// environments/environment.prod.ts (production)
+export const environment = {
+  production: true,
+  apiUrl: '/api',
+};
+```
+
+### Dynamic Environment (setEnv.ts pattern)
+
+Many projects use a `setEnv.ts` script to generate environment from `.env`:
+
+```bash
+# Build process often includes:
+npm run config  # Generates environment.ts from .env
+ng build --prod
+```
+
+## 4. Proxy Configuration
+
+```json
+// proxy.conf.json
+{
+  "/api/*": {
+    "target": "http://localhost:3000",
+    "secure": false,
+    "changeOrigin": true
+  }
+}
+```
+
+## 5. Dependencies
+
+### Common dependencies across projects
+
+| Package | Purpose |
+|---------|---------|
+| `@angular/*` | Angular framework (6-11) |
+| `@ngrx/*` | State management |
+| `@ngx-translate/*` | Internationalization |
+| `bootstrap` | CSS framework (when present) |
+| `@ng-bootstrap/ng-bootstrap` | Angular Bootstrap components (when present) |
+| `ngrx-store-localstorage` | NgRx localStorage sync |
+| `@localize-router/*` | Localized routing |
+| `ngx-swiper-wrapper` | Image swipers |
+
+### Common dev dependencies
+
+| Package | Purpose |
+|---------|---------|
+| `@angular/cli` | Angular CLI |
+| `karma` | Test runner |
+| `jasmine` | Test framework |
+| `protractor` | E2E tests (deprecated) |
+| `tslint` or `eslint` | Linting |
+
+## 6. Module Organization
+
+```typescript
+// app.module.ts - Root module
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    TranslateModule.forRoot({...}),
+    StoreModule.forRoot(reducers, { metaReducers }),
+    EffectsModule.forRoot([]),
+    FeatureModule,
+  ],
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: LanguageInterceptor, multi: true },
+    { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true },
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+## 7. i18n Pattern (ngx-translate)
+
+```typescript
+// app.module.ts
+TranslateModule.forRoot({
+  loader: {
+    provide: TranslateLoader,
+    useFactory: HttpLoaderFactory,
+    deps: [HttpClient],
+  },
+  defaultLanguage: 'pl',
+})
+
+// Usage in templates
+{{ 'HEADER.title' | translate }}
+
+// Usage in code
+constructor(private translate: TranslateService) {
+  this.translate.use('pl');
+}
+```
+
+## 8. Best Practices
+
+1. **Use `ng generate`** for scaffolding new code
+2. **Always register in NgModule** - declarations, imports, exports
+3. **Use environment files** for config - never hardcode URLs
+4. **Use proxy.conf.json** for development API proxy
+5. **Check angular.json location** - may be in `app/` subdirectory
+6. **Use `--prod` flag** for production builds
+7. **Follow existing file organization** - don't introduce new folder structures

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

@@ -0,0 +1,170 @@
+---
+name: angular-patterns
+description: Angular 6-11 legacy patterns including *ngIf/*ngFor directives, constructor DI, @Input/@Output decorators, and NgRx state management
+---
+
+# Angular 6-11 Patterns
+
+This skill provides guidance on Angular 6-11 patterns for standalone projects.
+
+## CRITICAL: Use Legacy Patterns ONLY
+
+**DO NOT use modern Angular features (Angular 14+):**
+
+| Feature | CORRECT (Angular 6-11) | 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, NgRx | signals, `signal()` |
+| Derived | `pipe(map())`, getters | `computed()` |
+| Side effects | `subscribe()`, NgRx effects | `effect()` |
+| Components | NgModule-based | standalone |
+
+## 1. Control Flow
+
+```html
+<!-- *ngIf with else -->
+<div *ngIf="isLoading; else content">
+  <app-spinner></app-spinner>
+</div>
+<ng-template #content>
+  <ul>
+    <li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
+  </ul>
+</ng-template>
+```
+
+```typescript
+trackById(index: number, item: Item): string {
+  return item.id;
+}
+```
+
+## 2. BehaviorSubject State Management
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class StateService {
+  private readonly _items = new BehaviorSubject<Item[]>([]);
+  readonly items$ = this._items.asObservable();
+
+  readonly count$ = this._items.pipe(
+    map(items => items.length)
+  );
+
+  setItems(items: Item[]): void {
+    this._items.next(items);
+  }
+}
+```
+
+## 3. Constructor Injection
+
+```typescript
+@Component({
+  selector: 'app-feature',
+  templateUrl: './feature.component.html',
+})
+export class FeatureComponent implements OnInit, OnDestroy {
+  private readonly destroy$ = new Subject<void>();
+
+  constructor(
+    private readonly service: FeatureService,
+    private readonly router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.service.items$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(items => this.items = items);
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
+```
+
+## 4. Input/Output Decorators
+
+```typescript
+@Component({
+  selector: 'app-card',
+  templateUrl: './card.component.html',
+})
+export class CardComponent {
+  @Input() item!: Item;
+  @Input() showActions = true;
+  @Output() selected = new EventEmitter<Item>();
+
+  // Two-way binding
+  @Input() value = '';
+  @Output() valueChange = new EventEmitter<string>();
+}
+```
+
+## 5. NgModule
+
+```typescript
+@NgModule({
+  declarations: [FeatureComponent, CardComponent],
+  imports: [CommonModule, TranslateModule, NgbModule],
+  exports: [FeatureComponent],
+})
+export class FeatureModule {}
+```
+
+## 6. NgRx Patterns
+
+```typescript
+// Actions
+export const loadItems = createAction('[Items] Load');
+export const loadItemsSuccess = createAction('[Items] Load Success', props<{ items: Item[] }>());
+
+// Reducer
+export const reducer = createReducer(
+  initialState,
+  on(loadItems, state => ({ ...state, loading: true })),
+  on(loadItemsSuccess, (state, { items }) => ({ ...state, items, loading: false }))
+);
+
+// Effects
+@Injectable()
+export class ItemEffects {
+  constructor(private actions$: Actions, private service: ItemService) {}
+
+  load$ = createEffect(() => this.actions$.pipe(
+    ofType(loadItems),
+    mergeMap(() => this.service.getAll().pipe(
+      map(items => loadItemsSuccess({ items })),
+      catchError(error => of(loadItemsFailure({ error: error.message })))
+    ))
+  ));
+}
+```
+
+## 7. Async Pipe
+
+```html
+<div *ngIf="isLoading$ | async; else content">Loading...</div>
+<ng-template #content>
+  <li *ngFor="let item of items$ | async; trackBy: trackById">
+    {{ item.name }}
+  </li>
+</ng-template>
+```
+
+## 8. PR Checklist
+
+- [ ] Using `*ngIf`/`*ngFor` (NOT `@if`/`@for`)
+- [ ] Every `*ngFor` has `trackBy`
+- [ ] Using constructor DI (NOT `inject()`)
+- [ ] Using `@Input()`/`@Output()` (NOT `input()`/`output()`)
+- [ ] Using BehaviorSubject/NgRx for state (NOT signals)
+- [ ] Component declared in NgModule
+- [ ] Using `async` pipe in templates
+- [ ] `OnDestroy` with `takeUntil` pattern