@smartsoft001-mobilems/claude-plugins 2.76.0 → 2.78.0

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

package/plugins/flow-external/skills/browser-capture/SKILL.md

@@ -0,0 +1,68 @@
+---
+name: browser-capture
+description: Manage browser sessions and capture screenshots. Ensures dev server is running, navigates to pages, and captures responsive screenshots.
+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
+
+Capture screenshots of web pages at multiple viewport sizes.
+
+## Server Management
+
+### Detect Port
+
+```bash
+# Check angular.json location and read port
+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
+```
+
+### Start Server if Needed
+
+```bash
+lsof -i :4200 -t || (npm start & for i in {1..15}; do curl -s http://localhost:4200 > /dev/null && break; sleep 2; done)
+```
+
+## Capture Process
+
+1. Ensure server is running
+2. Navigate to URL with `mcp__playwright__browser_navigate`
+3. For each viewport:
+   - `mcp__playwright__browser_resize` → set dimensions
+   - `mcp__playwright__browser_take_screenshot` → capture
+
+### Viewport Sizes
+
+| Name | Width | Height |
+|------|-------|--------|
+| Desktop | 1920 | 1080 |
+| Tablet | 768 | 1024 |
+| Mobile | 375 | 667 |
+
+## Upload
+
+Delegate to `maia-api` agent for upload to temporary storage.
+
+## Output
+
+```json
+{
+  "screenshots": [
+    { "viewport": "desktop", "url": "https://maia-ai-api.smartsoft.biz.pl/files/abc123" },
+    { "viewport": "mobile", "url": "https://maia-ai-api.smartsoft.biz.pl/files/def456" }
+  ]
+}
+```

package/plugins/flow-external/skills/commit/SKILL.md

@@ -0,0 +1,113 @@
+---
+name: commit
+description: Create a conventional commit message based on Linear task and staged changes. Fetches task details, analyzes changes, and generates commit message.
+allowed-tools:
+  - Bash
+  - Read
+  - Glob
+  - Grep
+  - AskUserQuestion
+  - mcp__linear-server__get_issue
+  - mcp__linear-server__list_comments
+---
+
+# Commit Skill
+
+Create a conventional commit message based on Linear task and staged changes.
+
+## Usage
+
+```
+/commit [linearTaskId]
+```
+
+## Parameters
+
+- `linearTaskId` - Linear task ID (e.g., MOB-123)
+
+## Execution Checklist
+
+- [ ] **1. Fetch Linear task** — get title, description, labels/type from MCP Linear server
+- [ ] **2. Analyze staged changes** — run `git diff --cached` to understand scope
+- [ ] **3. Verify completeness** — compare task requirements with staged changes; if incomplete, ask user whether to continue or stop
+- [ ] **4. Determine commit type and scope** — based on changes and task type
+- [ ] **5. Generate commit message** — draft `<type>(<scope>): <subject>` with body and `Refs: <linearTaskId>`
+- [ ] **6. Show message to user** — present commit message for approval before proceeding
+- [ ] **7. Create commit** — execute `git commit` with the approved message
+
+## Commit Message Format
+
+```
+<type>(<scope>): <subject>
+
+<body>
+
+Refs: <linearTaskId>
+```
+
+### Type
+
+| Type | Use when |
+|------|----------|
+| `feat` | New feature or functionality |
+| `fix` | Bug fix |
+| `refactor` | Code restructuring without behavior change |
+| `style` | Styling/CSS changes only |
+| `docs` | Documentation changes |
+| `chore` | Maintenance, config, dependencies |
+| `perf` | Performance improvements |
+
+### Scope
+
+Determine scope from the changed files and project structure. Common scopes for external projects:
+
+- Component name (e.g., `gallery`, `articles`, `navigation`)
+- Feature area (e.g., `wcag`, `i18n`, `auth`)
+- Infrastructure (e.g., `config`, `docker`)
+
+### Subject
+
+- Imperative mood ("add feature" not "added feature")
+- Lowercase first letter
+- No period at end
+- Max 72 characters
+
+### Body
+
+- Explain WHAT changed and WHY
+- Reference Linear task
+- List affected files if helpful
+
+## Example
+
+```
+feat(gallery): add lightbox for exhibition photos
+
+Add lightbox modal for viewing gallery photos in full screen.
+Uses ng-bootstrap modal with keyboard navigation support.
+
+Refs: MOB-548
+```
+
+## Error Handling
+
+### No Staged Changes
+
+```markdown
+## No staged changes
+
+Run `git add` to stage your changes before committing.
+```
+
+### Linear Task Not Found
+
+If linearTaskId is not provided or task not found:
+- Try to detect from branch name
+- If still not found, proceed without Linear context
+
+## Guidelines
+
+1. **Always show commit message for approval** before creating the commit
+2. **Use Polish branch naming** if branch follows MOB-XXX pattern
+3. **Include Refs:** with Linear task ID when available
+4. **Keep subject line under 72 characters**

package/plugins/flow-external/skills/debug-helper/SKILL.md

@@ -0,0 +1,131 @@
+---
+name: debug-helper
+description: Debugging workflows for Angular 6-11 standalone projects
+---
+
+# Debug Helper (Angular 6-11)
+
+Debugging workflows for standalone Angular CLI projects.
+
+## 1. Angular Debugging
+
+### Component Not Rendering
+
+1. Check selector matches template usage
+2. Check NgModule declarations - is component declared?
+3. Check NgModule exports - is it exported for external use?
+4. Check NgModule imports - is the feature module imported?
+
+### BehaviorSubject Issues
+
+```typescript
+// Wrong: mutating array (won't trigger update)
+const items = this._items.getValue();
+items.push(newItem);
+this._items.next(items);
+
+// Correct: create new reference
+this._items.next([...this._items.getValue(), newItem]);
+```
+
+### Memory Leaks
+
+```typescript
+// Always use takeUntil pattern
+private readonly destroy$ = new Subject<void>();
+
+ngOnInit(): void {
+  this.service.data$
+    .pipe(takeUntil(this.destroy$))
+    .subscribe(data => this.data = data);
+}
+
+ngOnDestroy(): void {
+  this.destroy$.next();
+  this.destroy$.complete();
+}
+```
+
+### Change Detection
+
+```typescript
+constructor(private cdr: ChangeDetectorRef) {}
+
+// Force detection
+this.cdr.detectChanges();
+
+// Mark for check (OnPush)
+this.cdr.markForCheck();
+```
+
+### Template Debugging
+
+```html
+<pre>{{ data | json }}</pre>
+<p>isLoading: {{ isLoading }}</p>
+```
+
+## 2. NgRx Debugging
+
+### State Not Updating
+
+1. Verify action is dispatched: add `tap(action => console.log(action))` to effects
+2. Verify reducer handles the action
+3. Verify selector reads correct state slice
+4. Check Redux DevTools (install Chrome extension)
+
+### Effects Not Running
+
+1. Check effect is registered in `EffectsModule.forFeature([Effects])`
+2. Check `ofType` matches dispatched action
+3. Check effect observable completes (use `mergeMap` not `switchMap` for parallel)
+
+## 3. Common Errors
+
+### "Cannot read property of undefined"
+
+```typescript
+// Use optional chaining
+const name = user?.profile?.name ?? 'Unknown';
+
+// In templates
+{{ user?.profile?.name }}
+```
+
+### "Expression has changed after it was checked"
+
+```typescript
+ngAfterViewInit(): void {
+  setTimeout(() => this.value = newValue);
+}
+```
+
+### "NullInjectorError: No provider for X"
+
+```typescript
+// Add to module providers or use providedIn: 'root'
+@Injectable({ providedIn: 'root' })
+export class MyService {}
+```
+
+### "Circular dependency detected"
+
+```typescript
+// Use forwardRef
+@Inject(forwardRef(() => ServiceB))
+private serviceB: ServiceB
+```
+
+## 4. Build Errors
+
+```bash
+# Check TypeScript errors
+npx tsc --noEmit
+
+# Check Angular build
+ng build --prod 2>&1 | head -50
+
+# Common: AOT compilation errors
+# - Private members used in templates (make them public or use getters)
+# - Function calls in templates (extract to component methods)
+```

package/plugins/flow-external/skills/impl/SKILL.md

@@ -0,0 +1,158 @@
+---
+name: impl
+description: Implement plans from Linear task comments. Reads approved implementation plan, orchestrates agents, and executes changes step by step.
+allowed-tools:
+  - Bash
+  - Read
+  - Write
+  - Edit
+  - Glob
+  - Grep
+  - AskUserQuestion
+  - mcp__linear-server__get_issue
+  - mcp__linear-server__list_issues
+  - mcp__linear-server__list_comments
+  - mcp__linear-server__create_comment
+  - mcp__linear-server__update_issue
+  - mcp__linear-server__list_issue_statuses
+  - mcp__playwright__browser_navigate
+  - mcp__playwright__browser_snapshot
+  - mcp__playwright__browser_take_screenshot
+  - mcp__playwright__browser_resize
+  - mcp__playwright__browser_close
+---
+
+# Implementation Skill
+
+Implement changes based on approved plans from Linear task comments.
+
+## Usage
+
+```
+/impl <linearTaskId>
+```
+
+## Parameters
+
+- `linearTaskId` - Linear task ID (e.g., MOB-123)
+
+## CRITICAL: Angular 6-11 + Angular CLI
+
+This is for standalone Angular CLI projects. Key rules:
+
+- Use `ng` commands (NOT `nx`)
+- Use constructor DI (NOT `inject()`)
+- Use `*ngIf`/`*ngFor` (NOT `@if`/`@for`)
+- Use `@Input()`/`@Output()` (NOT `input()`/`output()`)
+- Use BehaviorSubject/NgRx (NOT signals)
+- Use NgModules (NOT standalone components)
+- Styling: follow whatever CSS approach the project uses (check `package.json` for Bootstrap, etc.)
+
+## Execution Steps
+
+### Step 1: Fetch Task and Plan
+
+1. Fetch the Linear task using `mcp__linear-server__get_issue`
+2. Fetch task comments using `mcp__linear-server__list_comments`
+3. Search comments for an approved implementation plan (look for "## Plan" or "## Implementation Plan")
+4. If no plan found, inform user and suggest running `/plan` first
+
+### Step 2: Detect Project Structure
+
+Before implementing, detect the project layout:
+
+```bash
+# Check if angular.json is at root or in app/ subdirectory
+ls angular.json 2>/dev/null && echo "ROOT" || (ls app/angular.json 2>/dev/null && echo "APP_DIR")
+
+# Check package.json for dependencies
+cat package.json 2>/dev/null || cat app/package.json 2>/dev/null
+```
+
+Key things to detect:
+- Angular version (6-11)
+- CSS framework (Bootstrap 4 / custom SCSS / none)
+- NgRx version and patterns
+- i18n setup (ngx-translate)
+- Project structure (app/src/ vs src/)
+
+### Step 3: List Subtasks
+
+If task has subtasks:
+
+1. Fetch subtasks using `mcp__linear-server__list_issues` with parent filter
+2. Sort by priority/creation order
+3. Process each subtask in order
+
+### Step 4: Implement Each Step
+
+For each step in the plan:
+
+1. **Read relevant files** - Understand existing code before modifying
+2. **Follow existing patterns** - Match the codebase style exactly
+3. **Create/modify files** - Implement the planned changes
+4. **Register in modules** - Add declarations/imports to NgModules
+5. **Update subtask status** - Mark as Done when complete
+
+### Step 5: Build Verification
+
+After all steps are complete:
+
+```bash
+# Verify build passes (adapt path based on project structure)
+ng build --prod
+# OR
+cd app && ng build --prod
+```
+
+### Step 6: Report Results
+
+Create a summary comment on the Linear task:
+
+```markdown
+## Raport Implementacji
+
+### Zrealizowane
+
+| Podzadanie | Tytul | Status |
+|-----------|-------|--------|
+| MOB-549 | [title] | Zrealizowane |
+
+### Zmiany
+
+| Plik | Typ | Opis |
+|------|-----|------|
+| `src/app/components/feature.component.ts` | Nowy | Komponent |
+| `src/app/components/feature.module.ts` | Zmodyfikowany | Dodano deklaracje |
+
+### Build
+
+- `ng build --prod` - Sukces
+
+---
+
+_Raport wygenerowany przez Claude Code_
+```
+
+## Agent Selection
+
+| Task Type | Agent |
+|-----------|-------|
+| New component | `angular-component-scaffolder` |
+| New service | `angular-service-builder` |
+| NgRx state | `angular-state-builder` |
+| New directive | `angular-directive-builder` |
+| New pipe | `angular-pipe-builder` |
+| Guard/resolver | `angular-guard-builder` / `angular-resolver-builder` |
+| Styling | `ui-web-designer` |
+
+## Guidelines
+
+1. **Always read existing code first** before making changes
+2. **Follow the project's existing patterns** exactly
+3. **Register everything in NgModules** - declarations, imports, exports
+4. **Use the project's CSS approach** - detect from package.json
+5. **Write all Linear comments in Polish**
+6. **Verify build after implementation**
+7. **Do NOT add tests** unless explicitly requested
+8. **Do NOT modify deployment configuration**

package/plugins/flow-external/skills/linear-suggestion/SKILL.md

@@ -0,0 +1,62 @@
+---
+name: linear-suggestion
+description: Create a Linear issue in the "MobileMS Framework" project with a suggestion for agent or skill improvements.
+allowed-tools: mcp__linear-server__create_issue
+---
+
+# Linear Suggestion
+
+Create a Linear issue in the **MobileMS Framework** project containing a suggestion for improving agent definitions or skills.
+
+## When to Use
+
+- When an automated agent identifies a recurring pattern that could improve an agent or skill
+- When proposing orchestrator rule changes
+- When any non-interactive process needs to suggest framework improvements
+
+## Input Parameters
+
+| Parameter | Required | Description |
+|-----------|----------|-------------|
+| `title` | YES | Short summary (max 100 chars) |
+| `description` | YES | Full markdown description with rationale |
+| `source` | YES | Agent that generated the suggestion |
+| `targetFile` | NO | Path to the file to be modified |
+| `category` | NO | One of: `OPTIMIZATION`, `NEW_RULE`, `PATTERN_UPDATE`, `BUG_FIX` |
+
+## Issue Format
+
+### Title
+
+```
+[Agent Suggestion] {title}
+```
+
+### Description
+
+```markdown
+## Agent Improvement Suggestion
+
+**Source agent**: `{source}`
+**Category**: {category}
+**Target file**: `{targetFile}`
+
+---
+
+{description}
+
+---
+
+_This issue was automatically created by `{source}` via the `linear-suggestion` skill._
+```
+
+## Process
+
+1. Format the issue title with `[Agent Suggestion]` prefix
+2. Build the description using the template
+3. Create the issue using MCP Linear server
+4. Return the issue ID and URL
+
+## Error Handling
+
+If creation fails, log error silently and do NOT block the parent workflow.