@smartsoft001/pro-claude-plugins 0.2.0

package/plugins/flow/skills/test-unit/SKILL.md

@@ -0,0 +1,456 @@
+---
+name: test-unit
+description: Write unit tests following project conventions. Generates Jest tests for Angular components, services, and NestJS services using AAA pattern.
+allowed-tools:
+  - Bash
+  - Read
+  - Write
+  - Edit
+  - Glob
+  - Grep
+---
+
+# Unit Test Skill
+
+Write unit tests following project conventions using Jest framework with AAA (Arrange-Act-Assert) pattern.
+
+## Testing Framework
+
+- **Framework**: Jest for all unit tests
+- **File naming**: `{name}.spec.ts` alongside source files
+- **Test runner**: Nx (`nx test {project}`)
+
+## Test File Location
+
+Place test files next to the source files they test:
+
+```
+feature/
+├── feature.service.ts
+├── feature.service.spec.ts
+├── feature.component.ts
+└── feature.component.spec.ts
+```
+
+## Naming Convention
+
+- **Describe blocks**: `@{package-name}: ClassName`
+- **Test format**: `it('should...')` with clear behavior description
+
+## Test Structure (AAA Pattern)
+
+Always use Arrange-Act-Assert pattern with blank line separation (no comments):
+
+```typescript
+it('should perform expected operation', () => {
+  const input = 'test';
+
+  const result = service.performOperation(input);
+
+  expect(result).toBe('expected output');
+});
+```
+
+## Angular Component Testing
+
+### Basic Component Test
+
+```typescript
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeatureComponent } from './feature.component';
+
+describe('@mms/shared-angular: FeatureComponent', () => {
+  let component: FeatureComponent;
+  let fixture: ComponentFixture<FeatureComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FeatureComponent], // Standalone components
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FeatureComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display expected content', () => {
+    component.title = 'Test Title';
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Test Title');
+  });
+});
+```
+
+### Testing Signal-based Components
+
+```typescript
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { signal } from '@angular/core';
+
+import { SignalComponent } from './signal.component';
+
+describe('@mms/shared-angular: SignalComponent', () => {
+  let component: SignalComponent;
+  let fixture: ComponentFixture<SignalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SignalComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SignalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should update when signal changes', () => {
+    component.count.set(5);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toContain('5');
+  });
+
+  it('should compute derived value', () => {
+    component.items.set([1, 2, 3]);
+
+    expect(component.total()).toBe(6);
+  });
+});
+```
+
+### Testing Components with input()/output()
+
+```typescript
+describe('@mms/shared-angular: InputOutputComponent', () => {
+  let component: InputOutputComponent;
+  let fixture: ComponentFixture<InputOutputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputOutputComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputOutputComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should accept input value', () => {
+    fixture.componentRef.setInput('value', 'test');
+    fixture.detectChanges();
+
+    expect(component.value()).toBe('test');
+  });
+
+  it('should emit output event', () => {
+    const spy = jest.fn();
+    component.changed.subscribe(spy);
+
+    component.emitChange('new value');
+
+    expect(spy).toHaveBeenCalledWith('new value');
+  });
+});
+```
+
+### Testing with Services
+
+```typescript
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeatureComponent } from './feature.component';
+import { DataService } from './data.service';
+
+describe('@mms/shared-angular: FeatureComponent', () => {
+  let component: FeatureComponent;
+  let fixture: ComponentFixture<FeatureComponent>;
+  let mockDataService: jest.Mocked<DataService>;
+
+  beforeEach(async () => {
+    mockDataService = {
+      getData: jest.fn().mockReturnValue(of(['item1', 'item2'])),
+      saveData: jest.fn().mockReturnValue(of(true)),
+    } as unknown as jest.Mocked<DataService>;
+
+    await TestBed.configureTestingModule({
+      imports: [FeatureComponent],
+      providers: [{ provide: DataService, useValue: mockDataService }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FeatureComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should load data on init', () => {
+    expect(mockDataService.getData).toHaveBeenCalled();
+    expect(component.items()).toEqual(['item1', 'item2']);
+  });
+});
+```
+
+## Angular Service Testing
+
+```typescript
+import { TestBed } from '@angular/core/testing';
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+
+import { DataService } from './data.service';
+
+describe('@mms/shared-angular: DataService', () => {
+  let service: DataService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [DataService, provideHttpClient(), provideHttpClientTesting()],
+    });
+
+    service = TestBed.inject(DataService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should fetch data', () => {
+    const mockData = [{ id: 1, name: 'Test' }];
+
+    service.getData().subscribe((data) => {
+      expect(data).toEqual(mockData);
+    });
+
+    const req = httpMock.expectOne('/api/data');
+    expect(req.request.method).toBe('GET');
+    req.flush(mockData);
+  });
+});
+```
+
+## NestJS Service Testing
+
+### Basic Service Test
+
+```typescript
+import { TestingModule, Test } from '@nestjs/testing';
+
+import { FeatureService } from './feature.service';
+
+describe('@mms/module-name: FeatureService', () => {
+  let service: FeatureService;
+  let module: TestingModule;
+
+  beforeEach(async () => {
+    module = await Test.createTestingModule({
+      providers: [FeatureService],
+    }).compile();
+
+    service = module.get<FeatureService>(FeatureService);
+  });
+
+  afterEach(async () => {
+    await module.close();
+  });
+
+  it('should be defined', () => {
+    expect(service).toBeDefined();
+  });
+
+  it('should perform expected operation', () => {
+    const input = 'test';
+
+    const result = service.performOperation(input);
+
+    expect(result).toBe('expected output');
+  });
+});
+```
+
+### Service with Repository
+
+```typescript
+import { TestingModule, Test } from '@nestjs/testing';
+import { getRepositoryToken } from '@nestjs/typeorm';
+
+import { UserService } from './user.service';
+import { User } from './user.entity';
+
+describe('@mms/module-name: UserService', () => {
+  let service: UserService;
+  let module: TestingModule;
+  let mockRepository: Record<string, jest.Mock>;
+
+  beforeEach(async () => {
+    mockRepository = {
+      findOne: jest.fn(),
+      find: jest.fn(),
+      save: jest.fn(),
+      update: jest.fn(),
+      delete: jest.fn(),
+    };
+
+    module = await Test.createTestingModule({
+      providers: [
+        UserService,
+        {
+          provide: getRepositoryToken(User),
+          useValue: mockRepository,
+        },
+      ],
+    }).compile();
+
+    service = module.get<UserService>(UserService);
+  });
+
+  afterEach(async () => {
+    await module.close();
+  });
+
+  it('should find user by id', async () => {
+    const mockUser = { id: '1', name: 'Test User' };
+    mockRepository.findOne.mockResolvedValue(mockUser);
+
+    const result = await service.findById('1');
+
+    expect(result).toEqual(mockUser);
+    expect(mockRepository.findOne).toHaveBeenCalledWith({ where: { id: '1' } });
+  });
+});
+```
+
+## Mocking Patterns
+
+### HTTP Client Mock
+
+```typescript
+const mockHttpClient = {
+  get: jest.fn(),
+  post: jest.fn(),
+  put: jest.fn(),
+  delete: jest.fn(),
+};
+```
+
+### Service Mock
+
+```typescript
+const mockService = {
+  getData: jest.fn().mockReturnValue(of(mockData)),
+  createItem: jest.fn().mockReturnValue(of(mockItem)),
+  updateItem: jest.fn().mockReturnValue(of(updatedMockItem)),
+};
+```
+
+### LocalStorage Mock
+
+```typescript
+let localStorageMock: any;
+
+beforeEach(() => {
+  localStorageMock = (() => {
+    let store: Record<string, string> = {};
+    return {
+      getItem: jest.fn((key: string) => store[key] || null),
+      setItem: jest.fn((key: string, value: string) => {
+        store[key] = value;
+      }),
+      removeItem: jest.fn((key: string) => {
+        delete store[key];
+      }),
+      clear: jest.fn(() => {
+        store = {};
+      }),
+    };
+  })();
+  Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+});
+```
+
+## Test Data Factory Pattern
+
+```typescript
+export const createMockUser = (overrides: Partial<User> = {}): User => ({
+  id: 'test-id',
+  login: 'testuser',
+  name: 'Test',
+  surname: 'User',
+  email: 'test@example.com',
+  phoneNumber: '+1234567890',
+  del: false,
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  ...overrides,
+});
+```
+
+## Test Commands
+
+```bash
+# Run tests for specific project
+nx test web
+nx test shared-angular
+
+# Run tests in watch mode
+nx test web --watch
+
+# Run tests with coverage
+nx test web --coverage
+
+# Run all tests
+nx run-many --target=test
+
+# Run specific test file
+nx test shared-angular --testFile=feature.service.spec.ts
+```
+
+## What to Test
+
+- Business logic in services
+- Component behavior and state changes
+- Public API contracts
+- Error handling scenarios
+- Input validation
+- Edge cases and boundary conditions
+
+## What NOT to Test
+
+- Third-party libraries
+- Framework internals (Angular/NestJS)
+- Simple getters/setters without logic
+- Auto-generated code
+- Private methods directly (test through public API)
+
+## Workflow
+
+1. **Read source file** to understand the code being tested
+2. **Create test file** with `.spec.ts` extension next to source
+3. **Write describe block** with package and class name
+4. **Add beforeEach** with TestBed/Test setup
+5. **Write tests** using AAA pattern
+6. **Run tests** with `nx test {project}`
+7. **Fix failures** and ensure all pass
+
+## Best Practices
+
+1. **One assertion per test** when practical
+2. **Descriptive test names** that explain behavior
+3. **Independent tests** - no shared state between tests
+4. **Mock external dependencies** - isolate unit under test
+5. **Test edge cases** - empty arrays, null values, boundaries
+6. **Keep tests fast** - avoid real HTTP calls or timers
+7. **Clean up** - use afterEach for cleanup when needed

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

@@ -0,0 +1,146 @@
+# Flow-External Plugin for Claude Code
+
+Development flow skills for **standalone Angular 6-11 projects** without the Pro 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 Angular 6-11 projects without the Pro framework — typical use case: legacy client apps using Angular CLI with their own styling and project layout.
+
+### 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@smart-pro": true
+  }
+}
+```
+
+### 2. Merge permissions from template
+
+Run the merge script:
+
+```bash
+node node_modules/@smartsoft001/pro-claude-plugins/plugins/flow-external/.claude-plugin/merge-permissions.js
+```
+
+## Required MCP Servers
+
+Configure these in your `.mcp.json`:
+
+- `linear` - Linear API integration (MCP prefix `mcp__linear__`)
+- `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,94 @@
+#!/usr/bin/env node
+/**
+ * Merge flow-external plugin permissions into project's .claude/settings.json
+ *
+ * Usage:
+ *   npx @smartsoft001/pro-claude-plugins flow-external:merge-permissions
+ *
+ * Or directly:
+ *   node node_modules/@smartsoft001/pro-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@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-external@smart-pro`);
+  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 projects without framework (Angular CLI, Karma/Jasmine, Bootstrap 4)",
+  "version": "0.0.1"
+}