tribunal-kit 9.2.4 → 9.2.5

package/skills/playwright-ai-e2e/SKILL.md

@@ -1,52 +1,52 @@
----
-name: playwright-ai-e2e
-description: "Use when Modern Playwright 1.45+ E2E web testing, resilient ARIA locators, visual regression testing, network mocking, and AI-assisted flakiness detection."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - playwright-best-practices
-  - webapp-testing
-  - testing-patterns
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/test_runner.js
-  - .agent/scripts/visual_audit.js
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Playwright AI E2E Testing — 2026 Standards
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
-## Resilient E2E API Route Mocking & Interaction Test
-
-```typescript
-import { test, expect } from '@playwright/test';
-
-test.describe('Dashboard Features', () => {
-  test.beforeEach(async ({ page }) => {
-    // Intercept external analytics API to avoid flaky network calls
-    await page.route('**/api/analytics', async route => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({ visits: 1042, conversions: 88 }),
-      });
-    });
-  });
-
-  test('user views analytics dashboard', async ({ page }) => {
-    await page.goto('/dashboard');
-
-    // Resilient ARIA locators
-    const heading = page.getByRole('heading', { name: 'Analytics' });
-    await expect(heading).toBeVisible();
-
-    const visitsText = page.getByText('1042');
-    await expect(visitsText).toBeVisible();
-  });
-});
-```
+---
+name: playwright-ai-e2e
+description: "Use when Modern Playwright 1.45+ E2E web testing, resilient ARIA locators, visual regression testing, network mocking, and AI-assisted flakiness detection."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - playwright-best-practices
+  - webapp-testing
+  - testing-patterns
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/test_runner.js
+  - .agent/scripts/visual_audit.js
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Playwright AI E2E Testing — 2026 Standards
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+## Resilient E2E API Route Mocking & Interaction Test
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Dashboard Features', () => {
+  test.beforeEach(async ({ page }) => {
+    // Intercept external analytics API to avoid flaky network calls
+    await page.route('**/api/analytics', async route => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ visits: 1042, conversions: 88 }),
+      });
+    });
+  });
+
+  test('user views analytics dashboard', async ({ page }) => {
+    await page.goto('/dashboard');
+
+    // Resilient ARIA locators
+    const heading = page.getByRole('heading', { name: 'Analytics' });
+    await expect(heading).toBeVisible();
+
+    const visitsText = page.getByText('1042');
+    await expect(visitsText).toBeVisible();
+  });
+});
+```

package/skills/playwright-best-practices/SKILL.md

@@ -1,149 +1,149 @@
----
-name: playwright-best-practices
-description: "Use when Playwright End-to-End (E2E) testing mastery. Resilient selectors, auto-waiting mechanisms, parallel test execution, mocking network requests, fixture management, and cross-browser CI configurations. Use when configuring, deploying, or writing E2E web tests."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - testing-patterns
-  - webapp-testing
-  - qa-automation-engineer
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/test_runner.js
-  - .agent/scripts/verify_all.js
-  - .agent/scripts/lint_runner.js
----
-
-# Playwright E2E — Bulletproof Testing Mastery
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
-## Hallucination Traps (Read First)
-
-- ❌ Using `page.waitForTimeout(3000)` for synchronization -> ✅ Use `page.waitForSelector()`, `expect(locator).toBeVisible()`, or auto-waiting locators
-- ❌ Using CSS selectors or XPath for test locators -> ✅ Use `getByRole()`, `getByLabel()`, `getByTestId()` for resilient selectors
-- ❌ Running tests without `--workers=1` in CI debug mode -> ✅ Parallel tests with shared state cause flaky failures; isolate tests properly
-- ❌ Not using `test.describe.configure({ mode: 'serial' })` when tests have ordering dependencies -> ✅ Explicitly mark serial when needed
-
----
-
----
-
-## 1. Resilience & Auto-Waiting
-
-Playwright automatically waits for elements to be actionable (visible, stable, not obscured).
-
-```typescript
-// ❌ FLAKY: Hardcoded sleeps. Fails on slow CI, wastes time on fast local rings.
-await page.waitForTimeout(3000);
-
-// ❌ FLAKY: CSS selectors tied to layout/styling changes
-await page.locator('.btn-primary > span').click();
-
-// ✅ ROBUST: Playwright auto-waits for actionability based on user-centric selectors
-await page.getByRole('button', { name: 'Submit Checkout' }).click();
-
-// ✅ ROBUST: Testing for expected states
-await expect(page.getByText('Order confirmed')).toBeVisible();
-```
-
-### The Selector Hierarchy (Best to Worst)
-
-1. `page.getByRole()` — Checks accessibility simultaneously.
-2. `page.getByText()` — Finds elements by raw text values.
-3. `page.getByTestId()` — Resilient to text/translation updates (`data-testid`).
-4. `page.locator('css')` — Brittle, bound to DOM structures. Use only as last resort.
-
----
-
-## 2. Test Isolation & Fixtures
-
-Do not cascade tests (where Test B requires Test A to pass first). Playwright gives every test a blank browser context isolated from the rest.
-
-```typescript
-import { test, expect } from '@playwright/test';
-
-// ❌ BAD: Cascading state
-test.describe('Dashboard', () => {
-  test('Login', async ({ page }) => {
-    await login(page); // Next test assumes this succeeded
-  });
-  test('Action', async ({ page }) => {
-    await page.getByRole('button', { name: 'Save' }).click();
-  });
-});
-
-// ✅ GOOD: Isolated tests via beforeEach or Custom Fixtures
-test.beforeEach(async ({ page }) => {
-  // Login directly via API to bypass slow UI login, seeding cookies
-  await performFastApiLogin(page);
-  await page.goto('/dashboard');
-});
-
-test('Should save settings', async ({ page }) => {
-  await page.getByRole('button', { name: 'Save' }).click();
-  await expect(page.getByRole('alert')).toHaveText('Saved successfully');
-});
-```
-
----
-
-## 3. Network Mocking
-
-E2E tests that rely on external 3rd party APIs (Stripe, SendGrid) will fail randomly due to network latency outside your control.
-
-```typescript
-test('Should block invalid credit cards', async ({ page }) => {
-  // Intercept the outgoing request to the payment processor
-  await page.route('**/api/v1/charge*', async route => {
-    // Return a mocked failure response immediately
-    const json = { status: 'declined', message: 'Insufficient funds' };
-    await route.fulfill({ status: 400, json });
-  });
-
-  await page.getByRole('button', { name: 'Purchase' }).click();
-  await expect(page.getByText('Insufficient funds')).toBeVisible();
-});
-```
-
----
-
-## 4. Configuration for CI/CD
-
-```typescript
-// playwright.config.ts
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-  testDir: './tests/e2e',
-  fullyParallel: true, // Run tests concurrently
-  forbidOnly: !!process.env.CI, // Fail build if `.only` was left in code
-  retries: process.env.CI ? 2 : 0, // Retry flakes on CI only
-  workers: process.env.CI ? 1 : undefined, // Reduce CI overload
-  reporter: 'html',
-
-  use: {
-    trace: 'on-first-retry', // Record trace viewer ONLY on failure to save space
-    video: 'retain-on-failure',
-    baseURL: 'http://localhost:3000',
-  },
-
-  projects: [
-    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
-    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
-    // Mobile Viewport Example
-    { name: 'Mobile Safari', use: { ...devices['iPhone 13'] } },
-  ],
-
-  // Spin up local server before running tests
-  webServer: {
-    command: 'npm run build && npm run start',
-    url: 'http://localhost:3000',
-    reuseExistingServer: !process.env.CI,
-  },
-});
-```
+---
+name: playwright-best-practices
+description: "Use when Playwright End-to-End (E2E) testing mastery. Resilient selectors, auto-waiting mechanisms, parallel test execution, mocking network requests, fixture management, and cross-browser CI configurations. Use when configuring, deploying, or writing E2E web tests."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - testing-patterns
+  - webapp-testing
+  - qa-automation-engineer
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/test_runner.js
+  - .agent/scripts/verify_all.js
+  - .agent/scripts/lint_runner.js
+---
+
+# Playwright E2E — Bulletproof Testing Mastery
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## Hallucination Traps (Read First)
+
+- ❌ Using `page.waitForTimeout(3000)` for synchronization -> ✅ Use `page.waitForSelector()`, `expect(locator).toBeVisible()`, or auto-waiting locators
+- ❌ Using CSS selectors or XPath for test locators -> ✅ Use `getByRole()`, `getByLabel()`, `getByTestId()` for resilient selectors
+- ❌ Running tests without `--workers=1` in CI debug mode -> ✅ Parallel tests with shared state cause flaky failures; isolate tests properly
+- ❌ Not using `test.describe.configure({ mode: 'serial' })` when tests have ordering dependencies -> ✅ Explicitly mark serial when needed
+
+---
+
+---
+
+## 1. Resilience & Auto-Waiting
+
+Playwright automatically waits for elements to be actionable (visible, stable, not obscured).
+
+```typescript
+// ❌ FLAKY: Hardcoded sleeps. Fails on slow CI, wastes time on fast local rings.
+await page.waitForTimeout(3000);
+
+// ❌ FLAKY: CSS selectors tied to layout/styling changes
+await page.locator('.btn-primary > span').click();
+
+// ✅ ROBUST: Playwright auto-waits for actionability based on user-centric selectors
+await page.getByRole('button', { name: 'Submit Checkout' }).click();
+
+// ✅ ROBUST: Testing for expected states
+await expect(page.getByText('Order confirmed')).toBeVisible();
+```
+
+### The Selector Hierarchy (Best to Worst)
+
+1. `page.getByRole()` — Checks accessibility simultaneously.
+2. `page.getByText()` — Finds elements by raw text values.
+3. `page.getByTestId()` — Resilient to text/translation updates (`data-testid`).
+4. `page.locator('css')` — Brittle, bound to DOM structures. Use only as last resort.
+
+---
+
+## 2. Test Isolation & Fixtures
+
+Do not cascade tests (where Test B requires Test A to pass first). Playwright gives every test a blank browser context isolated from the rest.
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+// ❌ BAD: Cascading state
+test.describe('Dashboard', () => {
+  test('Login', async ({ page }) => {
+    await login(page); // Next test assumes this succeeded
+  });
+  test('Action', async ({ page }) => {
+    await page.getByRole('button', { name: 'Save' }).click();
+  });
+});
+
+// ✅ GOOD: Isolated tests via beforeEach or Custom Fixtures
+test.beforeEach(async ({ page }) => {
+  // Login directly via API to bypass slow UI login, seeding cookies
+  await performFastApiLogin(page);
+  await page.goto('/dashboard');
+});
+
+test('Should save settings', async ({ page }) => {
+  await page.getByRole('button', { name: 'Save' }).click();
+  await expect(page.getByRole('alert')).toHaveText('Saved successfully');
+});
+```
+
+---
+
+## 3. Network Mocking
+
+E2E tests that rely on external 3rd party APIs (Stripe, SendGrid) will fail randomly due to network latency outside your control.
+
+```typescript
+test('Should block invalid credit cards', async ({ page }) => {
+  // Intercept the outgoing request to the payment processor
+  await page.route('**/api/v1/charge*', async route => {
+    // Return a mocked failure response immediately
+    const json = { status: 'declined', message: 'Insufficient funds' };
+    await route.fulfill({ status: 400, json });
+  });
+
+  await page.getByRole('button', { name: 'Purchase' }).click();
+  await expect(page.getByText('Insufficient funds')).toBeVisible();
+});
+```
+
+---
+
+## 4. Configuration for CI/CD
+
+```typescript
+// playwright.config.ts
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true, // Run tests concurrently
+  forbidOnly: !!process.env.CI, // Fail build if `.only` was left in code
+  retries: process.env.CI ? 2 : 0, // Retry flakes on CI only
+  workers: process.env.CI ? 1 : undefined, // Reduce CI overload
+  reporter: 'html',
+
+  use: {
+    trace: 'on-first-retry', // Record trace viewer ONLY on failure to save space
+    video: 'retain-on-failure',
+    baseURL: 'http://localhost:3000',
+  },
+
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+    // Mobile Viewport Example
+    { name: 'Mobile Safari', use: { ...devices['iPhone 13'] } },
+  ],
+
+  // Spin up local server before running tests
+  webServer: {
+    command: 'npm run build && npm run start',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});
+```

package/skills/polish/SKILL.md

@@ -1,39 +1,39 @@
----
-name: polish
-description: "Use when Final production quality pass for spacing, alignment, visual rhythm, dark mode consistency, and edge states. Use before shipping or merging a feature to ensure 100% UI fidelity."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - better-ui
-  - harden
-  - baseline-ui
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Polish — Final Pre-Ship UI Quality Pass
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
----
-
-## Pre-Ship 10-Point Polish Checklist
-
-| #      | Inspection Item       | Verification Rule                                                                                         |
-| ------ | --------------------- | --------------------------------------------------------------------------------------------------------- |
-| **1**  | **Grid Alignment**    | All paddings, margins, and flex gaps use strict 4px/8px multiples.                                        |
-| **2**  | **Typography Scale**  | Headings use `text-wrap: balance`; body copy limit max `65ch` per line.                                   |
-| **3**  | **Tabular Data**      | All numbers in tables, badges, and stats use `font-variant-numeric: tabular-nums`.                        |
-| **4**  | **Focus States**      | Keyboard tab navigation shows visible, non-clipped `:focus-visible` ring.                                 |
-| **5**  | **Press Feedback**    | All buttons, links, and cards have explicit `:active` press feedback.                                     |
-| **6**  | **Dark Mode**         | Dark theme uses relative surface lightness steps and subtle borders instead of dark shadows.              |
-| **7**  | **Overflow Handling** | Long text strings, email addresses, and filenames use proper text truncation (`truncate` / `line-clamp`). |
-| **8**  | **Empty States**      | Lists, tables, and search results handle zero-item empty states gracefully.                               |
-| **9**  | **Loading Skeletons** | Slow data loads show matching skeleton pulses instead of sudden layout shifts (CLS).                      |
-| **10** | **Reduced Motion**    | CSS animations and JS motion respect `@media (prefers-reduced-motion: reduce)`.                           |
+---
+name: polish
+description: "Use when Final production quality pass for spacing, alignment, visual rhythm, dark mode consistency, and edge states. Use before shipping or merging a feature to ensure 100% UI fidelity."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - better-ui
+  - harden
+  - baseline-ui
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Polish — Final Pre-Ship UI Quality Pass
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+---
+
+## Pre-Ship 10-Point Polish Checklist
+
+| #      | Inspection Item       | Verification Rule                                                                                         |
+| ------ | --------------------- | --------------------------------------------------------------------------------------------------------- |
+| **1**  | **Grid Alignment**    | All paddings, margins, and flex gaps use strict 4px/8px multiples.                                        |
+| **2**  | **Typography Scale**  | Headings use `text-wrap: balance`; body copy limit max `65ch` per line.                                   |
+| **3**  | **Tabular Data**      | All numbers in tables, badges, and stats use `font-variant-numeric: tabular-nums`.                        |
+| **4**  | **Focus States**      | Keyboard tab navigation shows visible, non-clipped `:focus-visible` ring.                                 |
+| **5**  | **Press Feedback**    | All buttons, links, and cards have explicit `:active` press feedback.                                     |
+| **6**  | **Dark Mode**         | Dark theme uses relative surface lightness steps and subtle borders instead of dark shadows.              |
+| **7**  | **Overflow Handling** | Long text strings, email addresses, and filenames use proper text truncation (`truncate` / `line-clamp`). |
+| **8**  | **Empty States**      | Lists, tables, and search results handle zero-item empty states gracefully.                               |
+| **9**  | **Loading Skeletons** | Slow data loads show matching skeleton pulses instead of sudden layout shifts (CLS).                      |
+| **10** | **Reduced Motion**    | CSS animations and JS motion respect `@media (prefers-reduced-motion: reduce)`.                           |