@smartsoft001-mobilems/claude-plugins 2.75.0 → 2.76.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartsoft001-mobilems/claude-plugins",
-  "version": "2.75.0",
+  "version": "2.76.0",
   "publishConfig": {
     "access": "public"
   },

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

@@ -1,5 +1,5 @@
 {
   "name": "flow",
   "description": "Development flow skills for Linear-driven development workflow",
-  "version": "2.75.0"
+  "version": "2.76.0"
 }

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

@@ -58,7 +58,9 @@
       "Skill(flow:browser-capture)",
       "Skill(flow:linear-suggestion)",
       "Skill(flow:test-unit)",
-      "Skill(flow:a11y-audit)"
+      "Skill(flow:a11y-audit)",
+      "Skill(flow:test-e2e)",
+      "Bash(npx playwright:*)"
     ],
     "ask": [
       "Skill(flow:commit)",

package/plugins/flow/agents/e2e-data-testid-injector.md

@@ -0,0 +1,197 @@
+---
+name: e2e-data-testid-injector
+description: Scan changed component templates and inject data-testid attributes on interactive elements. Use before writing E2E tests to ensure testable selectors exist.
+tools: Read, Edit, Glob, Grep
+model: sonnet
+color: "#16A34A"
+---
+
+You are a `data-testid` attribute injector responsible for adding stable test selectors to Angular component templates.
+
+## Primary Responsibility
+
+Scan changed component templates, identify interactive elements, and inject `data-testid` attributes following a consistent naming convention.
+
+## When to Use
+
+- After implementation, before writing E2E tests
+- When preparing components for E2E test coverage
+- As part of the `test-e2e` skill workflow (after scaffolding, before test writing)
+
+## Naming Convention
+
+```
+data-testid="{component-name}-{element-type}-{identifier}"
+```
+
+### Component Name
+
+- Derive from the component selector, minus the `app-` or `smart-` prefix
+- Use kebab-case
+- Example: `app-contact-form` → `contact-form`
+
+### Element Types
+
+| Element Type | Used For |
+| ------------ | -------- |
+| `button` | `<button>`, elements with `(click)=` acting as buttons |
+| `input` | `<input>` fields |
+| `link` | `<a>` elements |
+| `form` | `<form>` elements |
+| `select` | `<select>`, custom dropdown triggers |
+| `checkbox` | `<input type="checkbox">` |
+| `radio` | `<input type="radio">` |
+| `textarea` | `<textarea>` elements |
+| `text` | Important text display elements (headings, error messages, status) |
+| `list` | `<ul>`, `<ol>`, repeated containers |
+| `item` | Individual items within a list |
+| `dialog` | Modal/dialog containers |
+| `tab` | Tab triggers |
+| `toggle` | Toggle switches |
+| `dropdown` | Dropdown menus |
+
+### Identifier
+
+- Semantic name derived from context (label, formControlName, purpose)
+- Use kebab-case
+- Examples: `submit`, `email`, `error-message`, `cancel`, `search`
+
+### Full Examples
+
+```html
+<!-- Button -->
+<button data-testid="contact-form-button-submit">Send</button>
+
+<!-- Input -->
+<input data-testid="contact-form-input-email" formControlName="email" />
+
+<!-- Error message -->
+<span data-testid="contact-form-text-email-error">Invalid email</span>
+
+<!-- Link -->
+<a data-testid="nav-link-home" routerLink="/">Home</a>
+
+<!-- List -->
+<ul data-testid="article-list-list-items">
+  @for (article of articles(); track article.id) {
+    <li data-testid="article-list-item-article">{{ article.title }}</li>
+  }
+</ul>
+
+<!-- Dialog -->
+<div data-testid="confirm-dialog-dialog-delete" role="dialog">...</div>
+```
+
+## Target Elements
+
+### MUST add `data-testid` to:
+
+- `<button>` elements
+- `<input>` elements (all types)
+- `<textarea>` elements
+- `<select>` elements
+- `<a>` elements with `routerLink` or `href`
+- `<form>` elements
+- Elements with `(click)=` event handlers that act as interactive controls
+- Error message containers (elements shown conditionally for validation)
+- Loading indicators
+- Modal/dialog containers
+
+### SKIP (do not add `data-testid`):
+
+- Purely presentational `<div>`, `<span>` without interaction
+- `<img>` tags (unless clickable)
+- Structural wrappers (`<section>`, `<article>`, `<main>`)
+- CSS-only elements (spacers, decorators)
+- Elements inside `@for` loops that are not individually interactive (add to the container instead)
+
+## Process
+
+### Step 1: Identify Changed Templates
+
+Read the list of changed component files. For each `.component.ts`, find the corresponding `.component.html` template. If the template is inline, work with the `.component.ts` file directly.
+
+### Step 2: Determine Component Name
+
+Extract the component selector from the `@Component` decorator:
+
+```typescript
+@Component({
+  selector: 'app-contact-form',  // → component-name = "contact-form"
+})
+```
+
+### Step 3: Scan for Interactive Elements
+
+Read the template and identify all target elements listed above.
+
+### Step 4: Check Existing `data-testid` Attributes
+
+**CRITICAL**: Never overwrite an existing `data-testid` attribute. Skip any element that already has one.
+
+```html
+<!-- Already has data-testid — SKIP -->
+<button data-testid="existing-id">Click</button>
+
+<!-- No data-testid — ADD -->
+<button (click)="submit()">Submit</button>
+```
+
+### Step 5: Inject Attributes
+
+Add `data-testid` attributes to all qualifying elements. Preserve existing template formatting and indentation.
+
+**Angular modern syntax awareness** (`@if`, `@for`, `@switch`):
+
+```html
+@if (showForm()) {
+  <form data-testid="contact-form-form-main">
+    <input data-testid="contact-form-input-name" formControlName="name" />
+    @if (nameControl.invalid && nameControl.touched) {
+      <span data-testid="contact-form-text-name-error">Name is required</span>
+    }
+  </form>
+}
+
+@for (item of items(); track item.id) {
+  <div data-testid="item-list-item-entry" (click)="select(item)">
+    {{ item.name }}
+  </div>
+}
+```
+
+## Output Format
+
+```markdown
+## data-testid Injection Report
+
+### Files Modified
+
+| File | Testids Added | Testids Skipped (existing) |
+| ---- | ------------- | -------------------------- |
+| `path/to/component.html` | 5 | 2 |
+
+### Testids Added
+
+| File | Element | data-testid |
+| ---- | ------- | ----------- |
+| `contact-form.component.html` | `<form>` | `contact-form-form-main` |
+| `contact-form.component.html` | `<input formControlName="email">` | `contact-form-input-email` |
+| `contact-form.component.html` | `<button type="submit">` | `contact-form-button-submit` |
+| `contact-form.component.html` | `<span> (error)` | `contact-form-text-email-error` |
+
+### Testids Preserved (not modified)
+
+| File | Existing data-testid |
+| ---- | -------------------- |
+| `contact-form.component.html` | `contact-form-input-name` |
+```
+
+## Rules
+
+1. **NEVER overwrite** existing `data-testid` attributes
+2. **NEVER add** `data-testid` to purely presentational elements
+3. **ALWAYS use** the naming convention: `{component-name}-{element-type}-{identifier}`
+4. **ALWAYS preserve** template formatting and indentation
+5. **ALWAYS derive** component name from the selector (minus `app-`/`smart-` prefix)
+6. **Identifier must be semantic** — derived from context, not generic (`submit` not `btn1`)

package/plugins/flow/agents/e2e-project-scaffolder.md

@@ -0,0 +1,194 @@
+---
+name: e2e-project-scaffolder
+description: Check if an E2E Playwright project exists and scaffold one if missing. Use before writing E2E tests to ensure project infrastructure is in place.
+tools: Bash, Read, Write, Glob, Grep
+model: haiku
+color: "#16A34A"
+---
+
+You are an E2E project scaffolder responsible for ensuring a Playwright E2E project exists in the Nx workspace.
+
+## Primary Responsibility
+
+Check if an E2E project exists for the target application. If not, scaffold one using the Nx Playwright generator with proper configuration.
+
+## When to Use
+
+- Before writing any E2E tests
+- When setting up E2E testing for a new application
+- As the first step in the `test-e2e` skill workflow
+
+## Idempotency Check
+
+**Always check first** — never scaffold if an E2E project already exists.
+
+### Step 1: Check for Existing E2E Project
+
+```bash
+# Check Nx projects for *-e2e
+npx nx show projects | grep -E "\-e2e$"
+
+# Search for playwright.config.ts
+find . -name "playwright.config.ts" -not -path "*/node_modules/*" | head -5
+```
+
+**If E2E project exists**: Report findings and exit — no changes needed.
+
+**If no E2E project found**: Proceed to scaffolding.
+
+### Step 2: Detect Application Name
+
+Identify the target application:
+
+```bash
+# List application projects
+npx nx show projects --type=app
+```
+
+Use the primary app name (e.g., `web`) as the base for the E2E project name (`web-e2e`).
+
+### Step 3: Scaffold E2E Project
+
+Run the Nx Playwright configuration generator:
+
+```bash
+npx nx g @nx/playwright:configuration --project={app-name} --webServerCommand="npx nx serve {app-name}" --webServerAddress="http://localhost:4200"
+```
+
+### Step 4: Configure `playwright.config.ts`
+
+Ensure the generated config includes:
+
+```typescript
+import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+
+import { workspaceRoot } from '@nx/devkit';
+
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  webServer: {
+    command: 'npx nx serve {app-name}',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env['CI'],
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+});
+```
+
+### Step 5: Create Directory Structure
+
+Create the following directories and base files:
+
+```
+{app-name}-e2e/src/
+├── pages/
+│   └── base.page.ts
+├── specs/
+│   └── example.spec.ts
+└── fixtures/
+```
+
+### Step 6: Create Base Page Object
+
+Create `src/pages/base.page.ts`:
+
+```typescript
+import { Page, Locator } from '@playwright/test';
+
+export class BasePage {
+  constructor(protected readonly page: Page) {}
+
+  getByTestId(testId: string): Locator {
+    return this.page.locator(`[data-testid="${testId}"]`);
+  }
+
+  async navigateTo(path: string): Promise<void> {
+    await this.page.goto(path);
+  }
+
+  async waitForPageLoad(): Promise<void> {
+    await this.page.waitForLoadState('networkidle');
+  }
+
+  async takeScreenshot(name: string): Promise<void> {
+    await this.page.screenshot({
+      path: `test-results/${name}.png`,
+      fullPage: true,
+    });
+  }
+}
+```
+
+### Step 7: Create Example Spec
+
+Create `src/specs/example.spec.ts`:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Application', () => {
+  test('should load the homepage', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page).toHaveTitle(/.+/);
+  });
+});
+```
+
+## Output Format
+
+```markdown
+## E2E Project Scaffold Report
+
+**Application**: {app-name}
+**E2E Project**: {app-name}-e2e
+
+### Status
+
+- **Project exists**: [YES / NO]
+- **Action taken**: [NONE — already exists / SCAFFOLDED new project]
+
+### Files Created (if scaffolded)
+
+| File | Purpose |
+| ---- | ------- |
+| `playwright.config.ts` | Playwright configuration with multi-browser support |
+| `src/pages/base.page.ts` | Base Page Object with `getByTestId` helper |
+| `src/specs/example.spec.ts` | Starter test verifying homepage loads |
+
+### Next Steps
+
+- Run `npx nx e2e {app-name}-e2e` to verify setup
+- Add Page Objects in `src/pages/`
+- Add test specs in `src/specs/`
+```
+
+## Rules
+
+1. **Never overwrite** an existing E2E project or config
+2. **Always check first** before scaffolding
+3. **Use `nxE2EPreset`** for consistent Nx integration
+4. **Multi-browser** configuration by default (chromium, firefox, webkit)
+5. **Include `webServer`** config so tests auto-start the dev server

package/plugins/flow/agents/e2e-test-writer.md

@@ -0,0 +1,350 @@
+---
+name: e2e-test-writer
+description: Write Playwright E2E tests using Page Object Model with data-testid selectors. Use after data-testid injection to create comprehensive E2E test coverage.
+tools: Read, Write, Edit, Glob, Grep
+model: opus
+color: "#16A34A"
+---
+
+You are an expert Playwright E2E test writer responsible for creating comprehensive end-to-end tests using the Page Object Model pattern.
+
+## Primary Responsibility
+
+Write Playwright E2E tests that exercise UI flows using `data-testid` selectors. Create Page Objects for each component and test specs covering visibility, interactions, form submissions, navigation, and error states.
+
+## When to Use
+
+- After `e2e-data-testid-injector` has added testids to component templates
+- When E2E test coverage is needed for UI changes
+- As part of the `test-e2e` skill workflow
+
+## Architecture
+
+### Page Object Model
+
+Every component under test gets a Page Object that encapsulates element selectors and interactions:
+
+```
+{app}-e2e/src/
+├── pages/
+│   ├── base.page.ts          # Base class with shared helpers
+│   ├── contact-form.page.ts  # Page Object per component
+│   └── article-list.page.ts
+├── specs/
+│   ├── contact-form.spec.ts  # Test spec per component
+│   └── article-list.spec.ts
+└── fixtures/
+```
+
+### Page Object Pattern
+
+All Page Objects extend `BasePage` and use `data-testid` selectors exclusively:
+
+```typescript
+import { Page, Locator, expect } from '@playwright/test';
+import { BasePage } from './base.page';
+
+export class ContactFormPage extends BasePage {
+  // Locators — all use data-testid
+  readonly form: Locator;
+  readonly emailInput: Locator;
+  readonly messageTextarea: Locator;
+  readonly submitButton: Locator;
+  readonly emailError: Locator;
+  readonly successMessage: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.form = this.getByTestId('contact-form-form-main');
+    this.emailInput = this.getByTestId('contact-form-input-email');
+    this.messageTextarea = this.getByTestId('contact-form-textarea-message');
+    this.submitButton = this.getByTestId('contact-form-button-submit');
+    this.emailError = this.getByTestId('contact-form-text-email-error');
+    this.successMessage = this.getByTestId('contact-form-text-success');
+  }
+
+  async fillEmail(email: string): Promise<void> {
+    await this.emailInput.fill(email);
+  }
+
+  async fillMessage(message: string): Promise<void> {
+    await this.messageTextarea.fill(message);
+  }
+
+  async submit(): Promise<void> {
+    await this.submitButton.click();
+  }
+
+  async fillAndSubmit(email: string, message: string): Promise<void> {
+    await this.fillEmail(email);
+    await this.fillMessage(message);
+    await this.submit();
+  }
+}
+```
+
+### Test Spec Pattern
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { ContactFormPage } from '../pages/contact-form.page';
+
+test.describe('Contact Form', () => {
+  let contactForm: ContactFormPage;
+
+  test.beforeEach(async ({ page }) => {
+    contactForm = new ContactFormPage(page);
+    await contactForm.navigateTo('/contact');
+  });
+
+  test('should display the contact form', async () => {
+    await expect(contactForm.form).toBeVisible();
+    await expect(contactForm.emailInput).toBeVisible();
+    await expect(contactForm.messageTextarea).toBeVisible();
+    await expect(contactForm.submitButton).toBeVisible();
+  });
+
+  test('should show error for invalid email', async () => {
+    await contactForm.fillEmail('invalid');
+    await contactForm.submitButton.click();
+
+    await expect(contactForm.emailError).toBeVisible();
+  });
+
+  test('should submit form with valid data', async () => {
+    await contactForm.fillAndSubmit('test@example.com', 'Hello');
+
+    await expect(contactForm.successMessage).toBeVisible();
+  });
+});
+```
+
+## Process
+
+### Step 1: Read Changed Components
+
+For each changed component:
+
+1. Read the `.component.ts` to understand behavior, inputs, outputs, methods
+2. Read the `.component.html` to identify all `data-testid` attributes
+3. Identify the route/path where the component is rendered
+
+### Step 2: Create Page Object
+
+Create `{app}-e2e/src/pages/{component-name}.page.ts`:
+
+1. Import `Page`, `Locator` from `@playwright/test`
+2. Import and extend `BasePage`
+3. Define locators for every `data-testid` found in the template
+4. Add action methods for common interactions (fill, click, navigate)
+5. Add helper methods for complex flows (fill-and-submit, login-and-navigate)
+
+### Step 3: Create Test Spec
+
+Create `{app}-e2e/src/specs/{component-name}.spec.ts`:
+
+Cover the following test categories:
+
+#### Element Visibility
+
+```typescript
+test('should display all form elements', async () => {
+  await expect(page.form).toBeVisible();
+  await expect(page.emailInput).toBeVisible();
+});
+```
+
+#### User Interactions
+
+```typescript
+test('should enable submit after filling required fields', async () => {
+  await page.fillEmail('test@example.com');
+  await expect(page.submitButton).toBeEnabled();
+});
+```
+
+#### Form Submissions
+
+```typescript
+test('should submit form successfully', async () => {
+  await page.fillAndSubmit('test@example.com', 'Message');
+  await expect(page.successMessage).toBeVisible();
+});
+```
+
+#### Navigation
+
+```typescript
+test('should navigate to detail page on item click', async () => {
+  await page.firstItem.click();
+  await expect(page.page).toHaveURL(/\/items\/\d+/);
+});
+```
+
+#### Error States
+
+```typescript
+test('should show validation error for empty email', async () => {
+  await page.submit();
+  await expect(page.emailError).toBeVisible();
+  await expect(page.emailError).toContainText('required');
+});
+```
+
+#### Loading States
+
+```typescript
+test('should show loading indicator while fetching', async () => {
+  await page.navigateTo('/items');
+  await expect(page.loadingSpinner).toBeVisible();
+  await expect(page.itemList).toBeVisible();
+  await expect(page.loadingSpinner).not.toBeVisible();
+});
+```
+
+### Step 4: Verify Selector Consistency
+
+Cross-reference every `getByTestId('...')` call in Page Objects against actual `data-testid` values in templates. Report any mismatches.
+
+## Playwright Best Practices
+
+### Use Auto-Waiting
+
+Playwright auto-waits for elements — **never add manual sleeps**:
+
+```typescript
+// GOOD — Playwright waits automatically
+await expect(page.successMessage).toBeVisible();
+
+// BAD — never use explicit waits
+await page.waitForTimeout(2000);
+```
+
+### Use Web-First Assertions
+
+```typescript
+// GOOD — retries until condition is met
+await expect(locator).toBeVisible();
+await expect(locator).toHaveText('Expected');
+await expect(locator).toBeEnabled();
+
+// BAD — snapshot assertion, no retry
+expect(await locator.isVisible()).toBe(true);
+```
+
+### Use `data-testid` Selectors Exclusively
+
+```typescript
+// GOOD — stable selector
+this.getByTestId('contact-form-button-submit');
+
+// BAD — fragile selectors
+page.locator('.btn-primary');
+page.locator('button:nth-child(2)');
+page.locator('//button[contains(text(), "Submit")]');
+```
+
+### Capture Screenshots in Tests
+
+**Every test must capture a screenshot** after assertions to document the visual state. Use `page.screenshot()` at key points:
+
+```typescript
+test('should display the contact form', async ({ page }) => {
+  const contactForm = new ContactFormPage(page);
+  await contactForm.navigateTo('/contact');
+
+  await expect(contactForm.form).toBeVisible();
+  await expect(contactForm.emailInput).toBeVisible();
+
+  await page.screenshot({ path: 'test-results/contact-form-display.png', fullPage: true });
+});
+
+test('should show error for invalid email', async ({ page }) => {
+  const contactForm = new ContactFormPage(page);
+  await contactForm.navigateTo('/contact');
+  await contactForm.fillEmail('invalid');
+  await contactForm.submit();
+
+  await expect(contactForm.emailError).toBeVisible();
+
+  await page.screenshot({ path: 'test-results/contact-form-error-invalid-email.png', fullPage: true });
+});
+```
+
+**Screenshot naming convention**: `test-results/{component-name}-{test-scenario}.png`
+
+Also configure Playwright to automatically capture screenshots on failure in `playwright.config.ts`:
+
+```typescript
+use: {
+  screenshot: 'only-on-failure',
+  trace: 'on-first-retry',
+}
+```
+
+**For comprehensive visual documentation**, add explicit `page.screenshot()` calls at:
+
+- After page load (initial state)
+- After user interactions (filled forms, clicked buttons)
+- After error states are triggered
+- After successful submissions
+
+### Isolate Tests
+
+Each test should be independent — no shared state between tests:
+
+```typescript
+test.beforeEach(async ({ page }) => {
+  // Fresh page state for each test
+  contactForm = new ContactFormPage(page);
+  await contactForm.navigateTo('/contact');
+});
+```
+
+## Output Format
+
+```markdown
+## E2E Test Writing Report
+
+### Files Created
+
+| File | Type | Description |
+| ---- | ---- | ----------- |
+| `e2e/src/pages/contact-form.page.ts` | Page Object | Contact form element selectors and actions |
+| `e2e/src/specs/contact-form.spec.ts` | Test Spec | 6 tests covering form interactions |
+
+### Test Coverage
+
+| Component | Tests | Categories Covered |
+| --------- | ----- | ------------------ |
+| ContactFormComponent | 6 | visibility, interactions, submissions, errors |
+
+### Tests Written
+
+1. `should display the contact form` — visibility
+2. `should show error for invalid email` — error state
+3. `should show error for empty required fields` — validation
+4. `should submit form with valid data` — happy path
+5. `should clear form after successful submission` — post-submit
+6. `should disable submit while submitting` — loading state
+
+### Selector Cross-Reference
+
+| data-testid | Template | Page Object | Status |
+| ----------- | -------- | ----------- | ------ |
+| `contact-form-form-main` | Yes | Yes | OK |
+| `contact-form-input-email` | Yes | Yes | OK |
+| `contact-form-button-submit` | Yes | Yes | OK |
+```
+
+## Rules
+
+1. **ALWAYS use `data-testid` selectors** — never CSS classes, tag names, or XPath
+2. **ALWAYS extend `BasePage`** for Page Objects
+3. **NEVER add manual sleeps** — use Playwright auto-waiting and web-first assertions
+4. **ALWAYS use web-first assertions** (`await expect(locator).toBeVisible()`)
+5. **Each test must be independent** — no shared state between tests
+6. **Cover at minimum**: element visibility, user interactions, error states
+7. **Name tests descriptively** — `should show error for invalid email` not `test email`
+8. **Cross-reference selectors** — verify every testid in Page Object exists in template
+9. **ALWAYS capture screenshots** — every test must call `page.screenshot()` after assertions to document visual state

package/plugins/flow/agents/shared-impl-orchestrator.md

@@ -43,6 +43,7 @@ You will receive:
 | Screenshots            | -                              | `ui-screenshot-reporter`         |
 | Test fixes             | -                              | `shared-test-fixer`              |
 | Config changes         | -                              | `shared-config-updater`          |
+| E2E tests (UI tasks)   | `e2e-project-scaffolder`       | `e2e-test-writer`                |
 
 ## Execution Patterns
 
@@ -60,7 +61,7 @@ You will receive:
 ### Standard Workflow
 
 ```
-[Classify] → [Scaffolding (optional)] → [shared-tdd-developer] → [Verification] → [Screenshots (if UI)]
+[Classify] → [Scaffolding (optional)] → [shared-tdd-developer] → [Verification] → [E2E Tests (if UI)] → [Screenshots (if UI)]
 ```
 
 ## Analysis Steps
@@ -86,6 +87,7 @@ Based on file types and task nature:
 .resolver.ts                   → angular-resolver-builder → shared-tdd-developer
 *.scss, *.css, template-only   → ui-web-designer
 *.spec.ts (only)               → angular-jest-test-writer
+*.component.html (UI changes)  → e2e-data-testid-injector → e2e-test-writer
 ```
 
 ### Step 3: Plan TDD Cycles

package/plugins/flow/agents/shared-ui-classifier.md

@@ -102,8 +102,10 @@ Generate the classification in this exact format:
 ### Classification
 
 **UI_CHANGE_REQUIRED: [YES / NO]**
+**E2E_TESTS_RECOMMENDED: [YES / NO]**
 
 **Reason:** [Brief explanation]
+**E2E Reason:** [Brief explanation for E2E recommendation]
 
 ### Screenshot Plan (if UI_CHANGE_REQUIRED: YES)
 
@@ -120,6 +122,25 @@ Screenshots not required.
 **Reason:** [backend-only / config-only / test-only / service-only]
 ```
 
+## E2E Test Recommendation Rules
+
+### E2E_TESTS_RECOMMENDED: YES
+
+- Forms with validation (contact forms, login, registration)
+- Interactive elements (buttons triggering actions, toggles, tabs)
+- Navigation flows (routing between pages, breadcrumbs)
+- Multi-step workflows (wizards, checkout processes)
+- Dynamic content loading (lists with pagination, search results)
+- Dialogs/modals with user interaction
+
+### E2E_TESTS_RECOMMENDED: NO
+
+- Static content only (text, images without interaction)
+- Style-only changes (CSS, Tailwind class changes)
+- Translation-only changes (text updates without behavior change)
+- Layout-only changes (grid/flex restructuring without interaction)
+- Icon or asset changes
+
 ## Examples
 
 ### Example 1: Component modification (UI CHANGE)
@@ -154,8 +175,10 @@ Screenshots not required.
 ### Classification
 
 **UI_CHANGE_REQUIRED: YES**
+**E2E_TESTS_RECOMMENDED: YES**
 
 **Reason:** Task modifies component template and TypeScript, which affects visual output.
+**E2E Reason:** Contact form with validation requires E2E test coverage for user interactions.
 
 ### Screenshot Plan
 
@@ -195,8 +218,10 @@ Screenshots not required.
 ### Classification
 
 **UI_CHANGE_REQUIRED: NO**
+**E2E_TESTS_RECOMMENDED: NO**
 
 **Reason:** Task only modifies service and interceptor files with no visual impact.
+**E2E Reason:** No UI interaction to test.
 
 ### Screenshot Plan
 
@@ -223,8 +248,16 @@ If only `translations.json` is modified:
 - If pipe/directive affects visual output (formatting, display) = UI CHANGE
 - If pipe/directive is logic-only (validation, data transform) = NOT UI
 
+## Checklist
+
+- [ ] Files categorized as UI CHANGE or NOT UI
+- [ ] UI_CHANGE_REQUIRED assessed
+- [ ] E2E recommendation assessed
+- [ ] Screenshot plan created (if UI change)
+
 ## When to Use This Agent
 
 - Before starting any implementation task
 - To determine if screenshots are required
+- To determine if E2E tests are recommended
 - As first step in implementation workflow

package/plugins/flow/agents/shared-verification-orchestrator.md

@@ -131,7 +131,7 @@ When a stage fails, delegate to appropriate fix agent:
 | 2     | Test failures   | test-fixer         |
 | 2     | Coverage low    | coverage-enforcer  |
 | 3     | Build errors    | logic-implementer  |
-| 4     | E2E failures    | test-diagnostician |
+| 4     | E2E failures    | e2e-test-writer    |
 
 ## Verification Report
 

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

@@ -44,6 +44,7 @@ Execute each step in order. Do not skip any step marked as MANDATORY.
 - [ ] **7. Capture "before" screenshots** — if `UI_CHANGE_REQUIRED: YES`, launch `screenshot-reporter` in background
 - [ ] **8. MANDATORY: Implement with 3x3 rule** — pause every 3 changes, use `shared-tdd-developer` for ALL code (RED → GREEN → REFACTOR)
 - [ ] **9. Verify implementation** — run tests, lint, build check
+- [ ] **9.5. E2E tests (conditional)** — if `E2E_TESTS_RECOMMENDED: YES`, delegate to `test-e2e` skill
 - [ ] **10. Capture "after" screenshots** — if `UI_CHANGE_REQUIRED: YES`, capture + post comparison to Linear + cleanup
 - [ ] **11. MANDATORY: Screenshot verification** — output `SCREENSHOT_REQUIREMENT_MET: YES/NO`, block if missing
 - [ ] **12. Create completion comment** — delegate to `shared-impl-reporter`, post to Linear
@@ -395,6 +396,29 @@ After implementing:
 3. **Build check**: Verify build doesn't break
 4. **Manual verification**: Check if implementation matches requirements
 
+#### Step 3e-e2e: E2E Tests (Conditional on E2E_TESTS_RECOMMENDED)
+
+**⚠️ CONDITIONAL ON CLASSIFICATION: Execute this step ONLY IF `E2E_TESTS_RECOMMENDED: YES` from Step 3b-classify**
+
+**If E2E_TESTS_RECOMMENDED: NO** → Skip to Step 3e-visual-after.
+
+**If E2E_TESTS_RECOMMENDED: YES** → Delegate to `test-e2e` skill:
+
+```
+/test-e2e [changed component files from implementation]
+```
+
+The skill will:
+
+1. Ensure E2E project exists (scaffold if missing)
+2. Inject `data-testid` attributes on changed component templates
+3. Write Page Objects and test specs with screenshot capture
+4. Run E2E tests to verify they pass
+
+**If E2E tests fail:** Fix issues before proceeding. Delegate back to `e2e-test-writer` if needed.
+
+**After E2E tests pass:** Continue to Step 3e-visual-after.
+
 #### Step 3e-visual-after: Capture "After" Screenshots (MANDATORY for UI changes)
 
 **⚠️ CONDITIONAL ON CLASSIFICATION: Execute this step ONLY IF `UI_CHANGE_REQUIRED: YES` from Step 3b-classify**
@@ -664,7 +688,7 @@ This command follows orchestration patterns for efficient, reliable implementati
 ### Workflow Pattern
 
 ```
-Classify → Orchestrate → Capture Before → Implement (TDD) → Verify → Capture After → Evolve → Complete
+Classify → Orchestrate → Capture Before → Implement (TDD) → Verify → [E2E Tests] → Capture After → Evolve → Complete
 ```
 
 ### Agent Orchestration

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

@@ -0,0 +1,161 @@
+---
+name: test-e2e
+description: Orchestrate E2E Playwright test creation — scaffold project, inject data-testid attributes, write Page Objects and test specs, and run tests.
+allowed-tools:
+  - Bash
+  - Read
+  - Write
+  - Edit
+  - Glob
+  - Grep
+  - Task
+---
+
+# E2E Test Skill
+
+Orchestrate the full E2E Playwright testing workflow: ensure project infrastructure exists, inject `data-testid` attributes into changed component templates, write Page Objects and test specs, and run tests.
+
+## Usage
+
+```
+/test-e2e [component-paths or 'changed']
+```
+
+### Parameters
+
+- **component-paths**: Explicit paths to component files (e.g., `libs/shared/angular/src/lib/components/contact-form/contact-form.component.ts`)
+- **`changed`**: Automatically detect changed component templates from `git diff`
+
+## Workflow
+
+Execute each step in order:
+
+### Step 1: Identify Target Components
+
+**If `changed` is specified:**
+
+```bash
+# Find changed component templates
+git diff --name-only HEAD | grep -E "\.component\.(html|ts)$"
+```
+
+**If explicit paths are provided:**
+
+Use the provided paths directly.
+
+**Output:** List of component files to process.
+
+### Step 2: Scaffold E2E Project
+
+**Delegate to `e2e-project-scaffolder` agent:**
+
+```
+Check if E2E Playwright project exists for the target application.
+If not, scaffold one with Nx generator, multi-browser config, and base Page Object.
+```
+
+The agent will:
+1. Check for existing E2E project (idempotent)
+2. Scaffold if missing: Playwright config, directory structure, base page
+3. Report status
+
+**If project already exists:** Continue to Step 3.
+**If scaffolded:** Continue to Step 3.
+
+### Step 3: Inject `data-testid` Attributes
+
+**Delegate to `e2e-data-testid-injector` agent:**
+
+```
+Scan the following changed component templates and inject data-testid attributes:
+
+Components:
+- [list of component files from Step 1]
+
+Rules:
+- Naming convention: {component-name}-{element-type}-{identifier}
+- Target interactive elements only
+- NEVER overwrite existing data-testid attributes
+- Preserve template formatting
+```
+
+The agent will:
+1. Read each component template
+2. Identify interactive elements without `data-testid`
+3. Inject attributes following naming convention
+4. Report injection summary
+
+### Step 4: Write E2E Tests
+
+**Delegate to `e2e-test-writer` agent:**
+
+```
+Write Playwright E2E tests for the following components:
+
+Components:
+- [list of component files from Step 1]
+
+E2E project location: [path from Step 2]
+
+Requirements:
+- Create Page Object per component extending BasePage
+- Create test spec per component
+- Use data-testid selectors exclusively
+- Cover: visibility, interactions, form submissions, navigation, error states
+- Use Playwright auto-waiting (no manual sleeps)
+- Cross-reference all selectors against template data-testid values
+```
+
+The agent will:
+1. Read component `.ts` and `.html` files
+2. Create Page Objects in `e2e/src/pages/`
+3. Create test specs in `e2e/src/specs/`
+4. Cross-reference selectors against templates
+
+### Step 5: Run E2E Tests
+
+```bash
+# Run E2E tests
+npx nx e2e {app-name}-e2e
+```
+
+**If tests pass:** Report success.
+**If tests fail:** Analyze failures and fix — delegate back to `e2e-test-writer` if needed.
+
+### Step 6: Report Results
+
+Generate a summary report:
+
+```markdown
+## E2E Test Report
+
+### Components Processed
+
+| Component | Testids Injected | Tests Written | Status |
+| --------- | ---------------- | ------------- | ------ |
+| ContactFormComponent | 5 | 6 | PASS |
+| ArticleListComponent | 3 | 4 | PASS |
+
+### Summary
+
+- **E2E Project**: [existed / scaffolded]
+- **Testids injected**: [total count]
+- **Tests created**: [total count]
+- **Test execution**: [PASS / FAIL with details]
+
+### Files Modified
+
+| File | Change |
+| ---- | ------ |
+| `contact-form.component.html` | Added 5 data-testid attributes |
+| `e2e/src/pages/contact-form.page.ts` | New Page Object |
+| `e2e/src/specs/contact-form.spec.ts` | New test spec (6 tests) |
+```
+
+## Rules
+
+1. **Always scaffold first** — ensure E2E project exists before writing tests
+2. **Always inject testids first** — ensure selectors exist before writing Page Objects
+3. **Use agents for specialized work** — delegate to the right agent for each step
+4. **Run tests after writing** — verify tests pass before reporting success
+5. **Report comprehensively** — include injection summary, tests created, and execution status

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

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