@smartsoft001/pro-claude-plugins 0.2.0

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

@@ -0,0 +1,94 @@
+#!/usr/bin/env node
+/**
+ * Merge flow-legacy plugin permissions into project's .claude/settings.json
+ *
+ * Usage:
+ *   npx @smartsoft001/pro-claude-plugins flow-legacy:merge-permissions
+ *
+ * Or directly:
+ *   node node_modules/@smartsoft001/pro-claude-plugins/plugins/flow-legacy/.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-Legacy 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-legacy@smart-pro'] = 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-legacy@smart-pro`);
+  console.log(`\nFile updated: ${SETTINGS_PATH}`);
+}
+
+main();

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

@@ -0,0 +1,5 @@
+{
+  "name": "flow-legacy",
+  "description": "Development flow skills for legacy Angular 14 projects with Linear-driven workflow",
+  "version": "0.0.1"
+}

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

@@ -0,0 +1,79 @@
+{
+  "$schema": "https://raw.githubusercontent.com/anthropics/claude-code/main/schemas/settings.schema.json",
+  "_description": "Template permissions for flow-legacy@smart-pro 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(nx:*)",
+      "Bash(npx nx:*)",
+      "Bash(npx tsc:*)",
+      "Bash(npm start)",
+      "Bash(npm run format:*)",
+      "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__get_issue",
+      "mcp__linear__list_issues",
+      "mcp__linear__list_comments",
+      "mcp__linear__save_comment",
+      "mcp__linear__delete_comment",
+      "mcp__linear__save_issue",
+      "mcp__linear__list_issue_statuses",
+      "mcp__linear__create_attachment",
+      "mcp__linear__get_attachment",
+      "mcp__linear__delete_attachment",
+      "mcp__linear__list_issue_labels",
+      "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-legacy:maia-files-upload)",
+      "Skill(flow-legacy:maia-files-delete)",
+      "Skill(flow-legacy:browser-capture)",
+      "Skill(flow-legacy:linear-suggestion)",
+      "Skill(flow-legacy:test-unit)",
+      "Skill(flow-legacy:a11y-audit)"
+    ],
+    "ask": [
+      "Skill(flow-legacy:commit)",
+      "Skill(flow-legacy:impl)",
+      "Skill(flow-legacy:plan)",
+      "Skill(flow-legacy:push)",
+      "Bash(git commit:*)",
+      "Bash(git push:*)",
+      "Bash(gh pr create:*)"
+    ]
+  },
+  "enabledPlugins": {
+    "flow-legacy@smart-pro": true
+  }
+}

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

@@ -0,0 +1,327 @@
+---
+name: angular-component-scaffolder
+description: Create Angular 14 components with NgModules and legacy patterns. Use when scaffolding new components following Angular 14 best practices (*ngIf/*ngFor, constructor DI, @Input/@Output).
+tools: Read, Write, Glob, Grep
+skills: karpathy-guidelines
+model: sonnet
+color: '#DD0031'
+---
+
+You are an expert at creating Angular 14 components following legacy best practices.
+
+## Primary Responsibility
+
+Create Angular components using Angular 14 patterns including NgModules, `*ngIf`/`*ngFor`, constructor injection, and `@Input()`/`@Output()` decorators.
+
+## When to Use
+
+- Creating new Angular components in legacy projects (Angular 14)
+- Scaffolding component structure with template and styles
+- Setting up component with proper constructor DI
+
+## CRITICAL: Angular 14 Patterns (MANDATORY)
+
+**NEVER use modern Angular 20+ patterns. ALWAYS use these legacy patterns:**
+
+| Feature         | ✅ CORRECT (Angular 14)  | ❌ WRONG (Angular 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         | `signal()`                    |
+| Derived state   | Getters or manual        | `computed()`                  |
+
+## Project-Specific Patterns
+
+This project uses:
+
+- **NgModules** - components must be declared in modules
+- **`*ngIf` and `*ngFor`** for control flow
+- **Constructor injection** for DI
+- **`@Input()` and `@Output()`** decorators
+- **No signals** - use class properties and BehaviorSubject
+- **Tailwind CSS** with `smart-` prefix (if applicable)
+
+## 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 {
+  // Class properties for state (NOT signals)
+  isLoading = false;
+  data: DataType[] = [];
+  error: string | null = null;
+
+  // Destroy subject for cleanup
+  private readonly destroy$ = new Subject<void>();
+
+  // Constructor injection (NOT inject())
+  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;
+        },
+      });
+  }
+
+  // Getter for derived state (NOT computed())
+  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 {
+  // Inputs with @Input() decorator (NOT input())
+  @Input() label!: string; // Required input
+  @Input() item!: Item; // Required input
+  @Input() showActions = true; // Optional with default
+
+  // Outputs with @Output() decorator (NOT output())
+  @Output() selected = new EventEmitter<Item>();
+  @Output() closed = new EventEmitter<void>();
+
+  // Internal state (NOT signals)
+  isOpen = false;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['item']) {
+      // React to input changes
+      console.log('Item changed:', this.item);
+    }
+  }
+
+  onSelect(): void {
+    this.selected.emit(this.item);
+  }
+
+  onClose(): void {
+    this.closed.emit();
+  }
+
+  toggleDropdown(force?: boolean): void {
+    this.isOpen = force ?? !this.isOpen;
+  }
+}
+```
+
+### Two-Way Binding Component
+
+```typescript
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-search-input',
+  templateUrl: './search-input.component.html',
+})
+export class SearchInputComponent {
+  // Two-way binding with @Input + @Output pattern (NOT model())
+  @Input() searchText = '';
+  @Output() searchTextChange = new EventEmitter<string>();
+
+  onSearchChange(value: string): void {
+    this.searchText = value;
+    this.searchTextChange.emit(value);
+  }
+}
+```
+
+Usage in parent:
+
+```html
+<app-search-input [(searchText)]="filterText"></app-search-input>
+```
+
+## Template Patterns
+
+### Control Flow with *ngIf and *ngFor
+
+```html
+<!-- Loading state with *ngIf -->
+<div *ngIf="isLoading" class="loading-spinner">
+  <app-spinner></app-spinner>
+</div>
+
+<!-- Error state with *ngIf -->
+<div *ngIf="error" class="error-message">
+  <app-error [message]="error"></app-error>
+</div>
+
+<!-- Content with *ngIf and *ngFor -->
+<div *ngIf="!isLoading && !error" class="content">
+  <ul *ngIf="hasData; else emptyTemplate">
+    <li *ngFor="let item of data; trackBy: trackByFn">
+      <app-item-card
+        [item]="item"
+        (selected)="onSelect($event)"
+      ></app-item-card>
+    </li>
+  </ul>
+
+  <ng-template #emptyTemplate>
+    <p class="empty-message">{{ 'COMMON.noItems' | translate }}</p>
+  </ng-template>
+</div>
+```
+
+### TrackBy Function
+
+```typescript
+// Always provide trackBy for *ngFor
+trackByFn(index: number, item: Item): string {
+  return item.id;
+}
+```
+
+## Module Declaration
+
+Components MUST be declared in a module:
+
+```typescript
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { FeatureNameComponent } from './feature-name.component';
+import { ItemCardComponent } from './item-card/item-card.component';
+
+@NgModule({
+  declarations: [FeatureNameComponent, ItemCardComponent],
+  imports: [CommonModule, TranslateModule],
+  exports: [FeatureNameComponent, ItemCardComponent],
+})
+export class FeatureModule {}
+```
+
+## File Structure
+
+```
+feature-name/
+  feature-name.component.ts      # Component class
+  feature-name.component.html    # Template
+  feature-name.component.scss    # Styles
+  feature-name.component.spec.ts # Tests
+  feature-name.module.ts         # Module (if standalone feature)
+```
+
+## Scaffolding 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 class properties for state (NOT signals)
+- [ ] Uses getters for derived values (NOT `computed()`)
+- [ ] Has `OnDestroy` with Subject for cleanup
+- [ ] Declared in a module
+- [ ] Imports `TranslateModule` if using translations
+- [ ] Has proper TypeScript types
+
+## Output Format
+
+````markdown
+## Component Scaffolded
+
+### Files Created
+
+| File                             | Purpose         |
+| -------------------------------- | --------------- |
+| `feature-name.component.ts`      | Component class |
+| `feature-name.component.html`    | Template        |
+| `feature-name.component.scss`    | Styles          |
+| `feature-name.component.spec.ts` | Unit tests      |
+
+### Component API
+
+**Inputs:**
+
+- `@Input() item: Item` (required)
+- `@Input() showActions: boolean` (default: true)
+
+**Outputs:**
+
+- `@Output() selected: EventEmitter<Item>`
+
+### Angular 14 Patterns Used
+
+- ✅ Constructor injection
+- ✅ `*ngIf` / `*ngFor` control flow
+- ✅ `@Input()` / `@Output()` decorators
+- ✅ Class properties for state
+- ✅ Getters for derived values
+
+### Module Registration
+
+Add to module declarations:
+
+```typescript
+declarations: [FeatureNameComponent];
+```
+````
+
+### Next Steps
+
+1. Implement component logic
+2. Add to module declarations
+3. Add to routing or parent component
+
+```
+
+```