code-ai-installer 1.5.5 → 2.0.1

package/locales/en/.agents/skills/qa-browser-testing/SKILL.md

@@ -0,0 +1,255 @@
+---
+name: qa-browser-testing
+description: Visual E2E testing via the built-in Antigravity Browser — Pre-Auth Handoff, browser_subagent, screenshots, visual parity, evidence collection.
+last_verified: 2026-03-11
+version: 1.0
+---
+
+# Skill: Antigravity Browser Testing
+
+## Purpose
+
+Testing via **the built-in Google Antigravity browser** (`browser_subagent`).
+The main tool of the Tester agent for visual verification, UI parity, and DEMO gate.
+
+> [!IMPORTANT]
+> This skill is for **manual-automated** testing within Antigravity.
+> For CI/CD automation (spec files, pipeline) → `$qa-e2e-playwright`.
+
+---
+
+## When to use
+
+- Testing Wix Dashboard / Shopify Admin (closed environment)
+- Visual parity: comparing implementation with the design source (Stitch / Figma / HTML-ref)
+- DEMO gate: verifying DEV-xx slices
+- Quick UI regression check
+- Evidence collection (screenshots + video) for QA Report
+
+## When NOT to use
+
+- Automation in CI/CD pipeline is needed → `$qa-e2e-playwright`
+- Unit/integration testing → Vitest
+- API contract testing → `$qa-api-contract-tests`
+- Computational logic → unit tests
+
+---
+
+## Tools
+
+| Tool | What it does | When |
+|-----------|-----------|-------|
+| `browser_subagent` | Opens a page, clicks, enters text, checks UI | Main |
+| `capture_browser_screenshot` | Takes a screenshot of the current page | Every verification step |
+| `open_browser_url` | Navigates to a URL | Navigation |
+| `read_browser_page` | Reads the DOM/text of the page | Content verification |
+| `click_browser_element` | Clicks on an element | Interactive verification |
+
+> [!NOTE]
+> Every call to `browser_subagent` automatically records a `.webp` video.
+> Video = evidence for the QA report and walkthrough.
+
+---
+
+## Pre-Auth Handoff (Wix / Shopify)
+
+> **Trigger:** the user specifies **"Wix"** or **"Shopify"** when transitioning to the TEST gate.
+
+### Protocol
+
+**Step 1 — Request authorization:**
+```
+🌐 Pre-Auth Handoff: trigger [Wix/Shopify] detected.
+Please:
+1. Open the Antigravity browser
+2. Login to [Wix Dashboard / Shopify Admin]
+3. Navigate to the page that needs to be tested
+4. Write: "Browser is ready"
+```
+
+**Step 2 — User authorizes and opens the relevant page.**
+
+**Step 3 — Tester runs `browser_subagent` with strict rules:**
+- ❌ DO NOT open new URLs (only work with the current page)
+- ❌ DO NOT try to navigate to localhost
+- ✅ Take a screenshot at EVERY verification step
+- ✅ Click, toggle, verify UI
+- ✅ Record video (`.webp`) for evidence
+
+**Step 4 — Analyze screenshots and formulate findings.**
+
+### Constraints
+
+| Works ✅ | Doesn't work ❌ |
+|------------|---------------|
+| `manage.wix.com` | `localhost` |
+| `admin.shopify.com` | Self-signed SSL |
+| Any URL with a valid SSL | Wix sandbox iFrame API |
+| Auth state persists | Session expires (~24h) |
+
+---
+
+## Visual Parity via Antigravity Browser
+
+> [!IMPORTANT]
+> **Source of truth is determined by the UX Designer** (mandatory question #2 Clarification Protocol).
+> If not specified — request before verification.
+
+### Algorithm
+
+```
+1. Get reference screenshot (depends on Source of Truth):
+   (a) Stitch → get_screen() → download screenshot via browser_subagent
+   (b) Figma → user provides PNG export
+   (c) HTML-ref → open HTML file in browser_subagent → capture_screenshot
+
+2. Get actual screenshot:
+   → browser_subagent: open implementation → capture_screenshot
+
+3. Visually compare (Tester analyzes both screenshots):
+   → Structure: are elements in place?
+   → Typography: font, size, color?
+   → Spacing: do paddings/margins match?
+   → Colors: is the palette correct?
+   → States: are all implemented?
+
+4. Format finding:
+   → UX-PARITY-xx: PASS / FAIL + screenshot + description
+```
+
+### Example: Stitch as Source of Truth
+
+```
+Step 1: get_screen(projectId, screenId) → get screenshot URL
+Step 2: browser_subagent → open screenshot URL → capture_screenshot → save as reference
+Step 3: browser_subagent → open implementation (Wix Dashboard) → capture_screenshot → save as actual
+Step 4: Compare reference vs actual → record discrepancies
+```
+
+### Example: Figma as Source of Truth
+
+```
+Step 1: User provides PNG export from Figma
+Step 2: browser_subagent → open implementation → capture_screenshot
+Step 3: Compare Figma PNG vs actual screenshot
+Step 4: Format findings
+```
+
+### Example: HTML-ref as Source of Truth
+
+```
+Step 1: browser_subagent → open popup_templates/glassmorphism.html → capture_screenshot
+Step 2: browser_subagent → open implementation → capture_screenshot
+Step 3: Compare reference vs actual
+Step 4: Format findings
+```
+
+---
+
+## DEMO Gate via Browser
+
+### DEMO-xx Protocol
+
+```
+1. Get DEMO instructions from Dev (DEMO-xx)
+2. Pre-Auth (if Wix/Shopify) or open URL directly
+3. browser_subagent: execute steps from DEMO
+4. capture_screenshot at EVERY step
+5. Record: PASS/FAIL + screenshot + description
+6. Embed in walkthrough.md
+```
+
+### Evidence format
+
+```markdown
+### DEMO-01: Template Selection
+
+![Step 1: Open editor](path/to/screenshot_step1.png)
+Status: ✅ PASS — editor opened, templates loaded
+
+![Step 2: Select Glassmorphism](path/to/screenshot_step2.png)
+Status: ✅ PASS — preview updated correctly
+
+![Step 3: Save changes](path/to/screenshot_step3.png)
+Status: ❌ FAIL — toast did not appear after saving
+```
+
+---
+
+## browser_subagent Best Practices
+
+### Call rules
+
+```
+browser_subagent(
+  Task: "Detailed description of what to check and what to return",
+  TaskName: "Short descriptive name",
+  RecordingName: "lowercase_with_underscores"
+)
+```
+
+### What to include in Task
+
+- **Specific elements** to check (data-testid, text, CSS)
+- **Expected result** (what should be visible)
+- **Return condition** (when to consider the task complete)
+- **Screenshots** — exactly when to take them
+
+### Example of a good Task
+
+```
+Navigate to the Widget Design page. Verify that:
+1. Template selector shows at least 3 templates
+2. Click on "Glassmorphism" template
+3. Verify live preview updates with glassmorphism styling
+4. Take a screenshot after each step.
+Return: screenshot paths and PASS/FAIL status for each step.
+```
+
+### Example of a bad Task ❌
+
+```
+Check if the page works.
+```
+
+---
+
+## Anti-patterns
+
+- ❌ `browser_subagent` without specific steps — "check the page" is too vague
+- ❌ Opening new URLs after Pre-Auth — will lose auth state
+- ❌ Not taking screenshots — no evidence = no proof
+- ❌ Visual verification without a reference — need a baseline (Stitch/Figma/HTML)
+- ❌ Ignoring `.webp` recordings — that's ready-made evidence
+- ❌ Testing business logic via browser — use unit tests
+
+---
+
+## Artifacts (Deliverables)
+
+| Artifact | Format | Where |
+|----------|--------|-----|
+| Screenshots of steps | `.png` | Embed in walkthrough.md |
+| Video recordings | `.webp` | Embed in walkthrough.md |
+| DEMO Results | Table | In QA Report |
+| UX Parity Results | Table | In QA Report |
+| Findings | P0/P1/P2 blocks | In QA Report |
+
+---
+
+## Output (format)
+
+### Browser Test Summary
+| Step | Action | Expected | Actual | Screenshot | Status |
+|------|--------|----------|--------|------------|--------|
+| 1 | ... | ... | ... | 📸 link | PASS/FAIL |
+
+### UX Parity Results
+| UX-PARITY-xx | Screen | Source of Truth | Findings | Status |
+|--------------|--------|----------------|----------|--------|
+| ... | ... | Stitch / Figma / HTML-ref | ... | PASS/FAIL |
+
+### DEMO Results
+| DEMO-xx | Steps verified | Issues | Status |
+|---------|---------------|--------|--------|
+| ... | 5/5 | none | ✅ PASS |

package/locales/en/.agents/skills/qa-browser-testing/agents/claude.json

@@ -0,0 +1,19 @@
+{
+  "name": "qa-browser-testing",
+  "display_name": "Antigravity Browser Testing",
+  "description": "Visual E2E testing via the built-in Antigravity Browser — Pre-Auth Handoff, browser_subagent, screenshots, visual parity, evidence collection.",
+  "default_prompt": "Use $qa-browser-testing when the task matches the \"Antigravity Browser Testing\" skill.",
+  "triggers": [
+    "qa-browser-testing",
+    "qa browser testing",
+    "Antigravity Browser Testing",
+    "Visual E2E testing via the built-in Antigravity Browser — Pre-Auth Handoff, browser_subagent, screenshots, visual parity, evidence collection"
+  ],
+  "capabilities": [
+    "qa",
+    "browser",
+    "testing"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/qa-browser-testing/agents/copilot.json

@@ -0,0 +1,19 @@
+{
+  "name": "qa-browser-testing",
+  "display_name": "Antigravity Browser Testing",
+  "description": "Visual E2E testing via the built-in Antigravity Browser — Pre-Auth Handoff, browser_subagent, screenshots, visual parity, evidence collection.",
+  "default_prompt": "Use $qa-browser-testing when the task matches the \"Antigravity Browser Testing\" skill.",
+  "triggers": [
+    "qa-browser-testing",
+    "qa browser testing",
+    "Antigravity Browser Testing",
+    "Visual E2E testing via the built-in Antigravity Browser — Pre-Auth Handoff, browser_subagent, screenshots, visual parity, evidence collection"
+  ],
+  "capabilities": [
+    "qa",
+    "browser",
+    "testing"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/qa-browser-testing/agents/gemini.json

@@ -0,0 +1,19 @@
+{
+  "name": "qa-browser-testing",
+  "display_name": "Antigravity Browser Testing",
+  "description": "Visual E2E testing via the built-in Antigravity Browser — Pre-Auth Handoff, browser_subagent, screenshots, visual parity, evidence collection.",
+  "default_prompt": "Use $qa-browser-testing when the task matches the \"Antigravity Browser Testing\" skill.",
+  "triggers": [
+    "qa-browser-testing",
+    "qa browser testing",
+    "Antigravity Browser Testing",
+    "Visual E2E testing via the built-in Antigravity Browser — Pre-Auth Handoff, browser_subagent, screenshots, visual parity, evidence collection"
+  ],
+  "capabilities": [
+    "qa",
+    "browser",
+    "testing"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/qa-browser-testing/agents/openai.yaml

@@ -0,0 +1,8 @@
+interface:
+  display_name: "Antigravity Browser Testing"
+  short_description: "Visual E2E testing via the built-in Antigravity Browser — Pre-Auth Handoff, browser_subagent, s…"
+  default_prompt: "Use $qa-browser-testing when the task matches the \"Antigravity Browser Testing\" skill."
+dependencies:
+  tools: []
+policy:
+  allow_implicit_invocation: true

package/locales/en/.agents/skills/qa-browser-testing/agents/qwen.json

@@ -0,0 +1,19 @@
+{
+  "name": "qa-browser-testing",
+  "display_name": "Antigravity Browser Testing",
+  "description": "Visual E2E testing via the built-in Antigravity Browser — Pre-Auth Handoff, browser_subagent, screenshots, visual parity, evidence collection.",
+  "default_prompt": "Use $qa-browser-testing when the task matches the \"Antigravity Browser Testing\" skill.",
+  "triggers": [
+    "qa-browser-testing",
+    "qa browser testing",
+    "Antigravity Browser Testing",
+    "Visual E2E testing via the built-in Antigravity Browser — Pre-Auth Handoff, browser_subagent, screenshots, visual parity, evidence collection"
+  ],
+  "capabilities": [
+    "qa",
+    "browser",
+    "testing"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}

package/locales/en/.agents/skills/qa-browser-testing/agents/skill.yaml

@@ -0,0 +1,23 @@
+version: 1
+name: "qa-browser-testing"
+display_name: "Antigravity Browser Testing"
+description: "Visual E2E testing via the built-in Antigravity Browser — Pre-Auth Handoff, browser_subagent, screenshots, visual parity, evidence collection."
+default_prompt: "Use $qa-browser-testing when the task matches the \"Antigravity Browser Testing\" skill."
+triggers:
+  - "qa-browser-testing"
+  - "qa browser testing"
+  - "Antigravity Browser Testing"
+  - "Visual E2E testing via the built-in Antigravity Browser — Pre-Auth Handoff, browser_subagent, screenshots, visual parity, evidence collection"
+capabilities:
+  - "qa"
+  - "browser"
+  - "testing"
+tools: []
+invocation:
+  explicit: true
+  implicit: true
+localization:
+  default_locale: "en"
+  available_locales:
+    - "ru"
+    - "en"

package/locales/en/.agents/skills/qa-e2e-playwright/SKILL.md

@@ -0,0 +1,313 @@
+---
+name: qa-e2e-playwright
+description: E2E testing via Playwright for CI/CD — automated spec files, page objects, visual regression, pipeline integration. For manual testing in Antigravity → $qa-browser-testing.
+last_verified: 2026-03-11
+version: 2.0
+---
+
+# Skill: E2E Playwright (CI/CD Automated)
+
+## Purpose
+
+Automated E2E regression suite via **Playwright** for CI/CD pipeline.
+Page Objects, spec files, visual snapshot comparison, GitHub Actions.
+
+> [!IMPORTANT]
+> This skill is for **automated tests in CI/CD**.
+> For interactive testing in Google Antigravity → `$qa-browser-testing`.
+
+---
+
+## When to use
+
+- Project has grown to a CI/CD pipeline with an E2E gate
+- Automatic regression is needed on every PR/deploy
+- Visual regression: pixel-perfect comparison in CI
+- Stable UI that won't be frequently flaky
+
+## When NOT to use
+
+- Testing within Antigravity → `$qa-browser-testing`
+- Wix/Shopify sandbox (no access from CI) → `$qa-browser-testing`
+- Unit/integration → Vitest
+- First slice / unstable UI → tests will be flaky
+
+---
+
+## Project Stack (SCR)
+
+| Component | Technology | Location |
+|-----------|-----------|-------------|
+| Unit/Integration | **Vitest** | `apps/*/vitest.config.js` |
+| E2E | **Playwright** | `apps/dashboard/e2e/` (create) |
+| Wix Test Utils | `@wix/wix-ui-test-utils` | In node_modules |
+| Wix UniDriver | `@wix/unidriver-playwright` | In node_modules |
+
+---
+
+## Setup
+
+### 1. Installation
+
+```bash
+cd apps/dashboard
+npm init playwright@latest -- --yes --browser=chromium --lang=js
+```
+
+### 2. Configuration: `playwright.config.js`
+
+```js
+// apps/dashboard/playwright.config.js
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  timeout: 30_000,
+  expect: { timeout: 5_000 },
+  fullyParallel: false,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: [['html', { open: 'never' }], ['list']],
+
+  use: {
+    baseURL: process.env.BASE_URL || 'https://manage.wix.com',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'wix-dashboard',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});
+```
+
+### 3. Directory structure
+
+```
+apps/dashboard/e2e/
+├── fixtures/
+│   ├── auth.fixture.js      # Auth (storageState)
+│   └── test-data.js          # Test data
+├── pages/
+│   ├── BasePage.js            # Base page object
+│   ├── WidgetDesignPage.js    # Widget Design Editor
+│   ├── RulesTriggersPage.js   # Rules & Triggers
+│   └── CouponsPage.js         # Coupons Management
+├── specs/
+│   ├── widget-design.spec.js  # Widget editor E2E
+│   ├── coupon-flow.spec.js    # Coupon CRUD
+│   └── visual-parity.spec.js  # Screenshot comparison
+└── screenshots/
+    └── expected/              # Baseline screenshots
+```
+
+---
+
+## Page Object Model
+
+### BasePage
+
+```js
+/**
+ * Base page object for all dashboard pages.
+ */
+export class BasePage {
+  /**
+   * @param {import('@playwright/test').Page} page - Playwright page instance.
+   */
+  constructor(page) {
+    this.page = page;
+  }
+
+  /**
+   * Waits for the page to load.
+   * @param {string} contentSelector - CSS selector of the main content.
+   * @param {number} [timeout=10000] - wait timeout in ms.
+   */
+  async waitForPageLoad(contentSelector, timeout = 10_000) {
+    await this.page.waitForSelector(contentSelector, {
+      state: 'visible',
+      timeout,
+    });
+  }
+
+  /**
+   * Takes a component screenshot for visual parity.
+   * @param {string} name - screenshot name.
+   * @returns {Promise<Buffer>} screenshot.
+   */
+  async takeScreenshot(name) {
+    return this.page.screenshot({
+      path: `e2e/screenshots/actual/${name}.png`,
+      fullPage: true,
+    });
+  }
+}
+```
+
+---
+
+## Test Patterns
+
+### Happy Path
+
+```js
+import { test, expect } from '@playwright/test';
+import { WidgetDesignPage } from '../pages/WidgetDesignPage.js';
+
+test.describe('Widget Design Editor', () => {
+  test('should select template and save', async ({ page }) => {
+    const editor = new WidgetDesignPage(page);
+    await editor.waitForPageLoad('[data-testid="widget-editor"]');
+    await editor.selectTemplate('Glassmorphism');
+    await editor.fillFields({ headline: 'Special Offer!', coupon: 'SAVE20' });
+    await editor.save();
+
+    await expect(editor.livePreview).toContainText('Special Offer!');
+  });
+});
+```
+
+### Error Path
+
+```js
+test('should show validation error for empty coupon', async ({ page }) => {
+  const editor = new WidgetDesignPage(page);
+  await editor.waitForPageLoad('[data-testid="widget-editor"]');
+  await editor.fillFields({ coupon: '' });
+  await editor.save();
+
+  const error = page.locator('[data-testid="coupon-error"]');
+  await expect(error).toBeVisible();
+});
+```
+
+### UI States
+
+```js
+test('should show empty state when no templates', async ({ page }) => {
+  await page.route('**/api/templates', (route) =>
+    route.fulfill({ status: 200, body: '[]', headers: { 'Content-Type': 'application/json' } }),
+  );
+  await page.reload();
+  await expect(page.locator('[data-testid="empty-state"]')).toContainText('No templates');
+});
+```
+
+---
+
+## Visual Regression
+
+> [!IMPORTANT]
+> **Source of truth is determined by the UX Designer** (mandatory question #2).
+> Baseline screenshots depend on the chosen source.
+
+```js
+test('visual parity: popup matches design', async ({ page }) => {
+  await page.goto('/preview/glassmorphism');
+  const popup = page.locator('[data-testid="popup-container"]');
+  await expect(popup).toHaveScreenshot('glassmorphism-popup.png', {
+    maxDiffPixelRatio: 0.05,
+    threshold: 0.2,
+  });
+});
+```
+
+```bash
+# Update baseline
+npx playwright test --update-snapshots
+```
+
+---
+
+## Naming Convention
+
+```
+[feature].spec.js             — tests
+[feature].visual.spec.js      — visual regression
+[PageName].js                  — page objects
+
+# Test IDs (data-testid)
+[component]-[element]          → popup-container
+[component]-[element]-[state]  → save-button-disabled
+```
+
+> [!WARNING]
+> DEV must add `data-testid` for all interactive elements.
+
+---
+
+## Execution
+
+```bash
+npx playwright test                              # All
+npx playwright test e2e/specs/widget-design.spec.js  # One spec
+npx playwright test --ui                         # Debug UI
+npx playwright test --headed                     # Headed
+npx playwright test --update-snapshots           # Update baseline
+npx playwright show-report                       # Report
+```
+
+---
+
+## CI/CD Pipeline
+
+```yaml
+# .github/workflows/e2e.yml
+e2e-tests:
+  runs-on: ubuntu-latest
+  steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with: { node-version: 20 }
+    - run: npm ci
+      working-directory: apps/dashboard
+    - run: npx playwright install --with-deps chromium
+      working-directory: apps/dashboard
+    - run: npx playwright test
+      working-directory: apps/dashboard
+    - uses: actions/upload-artifact@v4
+      if: failure()
+      with:
+        name: playwright-report
+        path: apps/dashboard/playwright-report/
+```
+
+---
+
+## Anti-patterns
+
+- ❌ CSS selectors (`.class-name`) — brittle, use only `data-testid`
+- ❌ `page.waitForTimeout(3000)` — use `waitForSelector`
+- ❌ E2E for logic covered by unit tests — redundant
+- ❌ Tests depending on each other — each test is isolated
+- ❌ Hard-coded data in specs — move to `fixtures/test-data.js`
+- ❌ Ignoring flaky tests — stabilize or delete
+- ❌ Screenshot of the whole page — screenshot the **specific component**
+
+---
+
+## Definition of Done
+
+- [ ] Critical flows from Test Plan are covered by E2E
+- [ ] Each test: happy path + ≥1 error path
+- [ ] Page Objects for key pages
+- [ ] `data-testid` added (DEV)
+- [ ] Baseline screenshots approved
+- [ ] No flaky tests (3 runs stable)
+- [ ] CI pipeline configured
+- [ ] Run command in README
+
+---
+
+## Deliverables
+
+- Spec files: `apps/dashboard/e2e/specs/`
+- Page Objects: `apps/dashboard/e2e/pages/`
+- `playwright.config.js`
+- CI/CD pipeline config
+- List of `data-testid` (request from DEV)

package/locales/en/.agents/skills/qa-e2e-playwright/agents/claude.json

@@ -0,0 +1,19 @@
+{
+  "name": "qa-e2e-playwright",
+  "display_name": "E2E Playwright (CI/CD Automated)",
+  "description": "E2E testing via Playwright for CI/CD — automated spec files, page objects, visual regression, pipeline integration. For manual testing in Antigravity → $qa-browser-testing.",
+  "default_prompt": "Use $qa-e2e-playwright when the task matches the \"E2E Playwright (CI/CD Automated)\" skill.",
+  "triggers": [
+    "qa-e2e-playwright",
+    "qa e2e playwright",
+    "E2E Playwright (CI/CD Automated)",
+    "E2E testing via Playwright for CI/CD — automated spec files, page objects, visual regression, pipeline integration"
+  ],
+  "capabilities": [
+    "qa",
+    "e2e",
+    "playwright"
+  ],
+  "tools": [],
+  "implicit_invocation": true
+}