@smartsoft001/pro-claude-plugins 0.2.0

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

@@ -0,0 +1,268 @@
+---
+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,182 @@
+---
+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,74 @@
+---
+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,114 @@
+---
+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__get_issue
+  - mcp__linear__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., FRA-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: FRA-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 FRA-XXX pattern
+3. **Include Refs:** with Linear task ID when available
+4. **Keep subject line under 72 characters**