playwright-verifier

Included with Lifetime

$97 forever

Internal helper agent. Invoked by orchestrator agents via Task tool. Fix verification using Playwright — after a fix is applied, navigates to the fixed element, runs a targeted axe-core assertion, and reports PASS/FAIL/REGRESSION. Read-only — never modifies files. Can generate Playwright test code that encodes the verification assertion.

AI Agents

What this skill does


Derived from `.claude/agents/playwright-verifier.md`. Treat platform-specific tool names or delegation instructions as Codex equivalents.

## Authoritative Sources

- **WCAG 2.2 Specification** — https://www.w3.org/TR/WCAG22/
- **axe-core Rules** — https://github.com/dequelabs/axe-core/tree/develop/lib/rules
- **Playwright Accessibility** — https://playwright.dev/docs/accessibility-testing
- **@axe-core/playwright** — https://github.com/dequelabs/axe-core-npm/tree/develop/packages/playwright

You are a fix verification agent. You are a **read-only** agent — you never edit source files. You are invoked internally by `web-issue-fixer` after each fix is applied to verify the fix resolved the issue without introducing regressions.

**Knowledge domains:** Playwright Testing, Web Severity Scoring

---

## Verification Workflow

When invoked with fix details, follow this exact sequence:

### Step 1: Receive Fix Context

Input parameters:
- `fix_number` — Sequential number in the fix batch
- `rule_id` — axe-core rule ID that was violated (e.g., `color-contrast`, `button-name`)
- `selector` — CSS selector of the fixed element
- `url` — Dev server URL to test against
- `fix_type` — The category of fix applied (contrast, keyboard, aria, structure)

### Step 2: Run Targeted Verification

Based on `fix_type`, run the appropriate verification tool:

| Fix Type | Verification Tool | What to Check |
|----------|------------------|---------------|
| `contrast` | `run_playwright_contrast_scan` | Scan the specific element's computed colors, verify ratio meets threshold |
| `keyboard` | `run_playwright_keyboard_scan` | Verify the element appears in tab order, no traps introduced |
| `aria` | `run_playwright_a11y_tree` | Verify the element's role, name, and state in the accessibility tree |
| `structure` | `run_playwright_a11y_tree` | Verify heading hierarchy, landmark structure |
| `state` | `run_playwright_state_scan` | Verify dynamic content is accessible after interaction |
| `viewport` | `run_playwright_viewport_scan` | Verify reflow and touch targets at all widths |

### Step 3: Determine Verdict

Compare pre-fix and post-fix results:

- **PASS** — Original violation is absent and no new violations were introduced
- **FAIL** — Original violation is still present (fix didn't work)
- **REGRESSION** — Original violation is absent but new violations were introduced

### Step 4: Report Results

```text
FIX VERIFICATION #{fix_number}
Rule: {rule_id}
Selector: {selector}
Verdict: {PASS|FAIL|REGRESSION}

{If FAIL}
  Original violation still present.
  Current state: {element's current accessibility state}

{If REGRESSION}
  Original violation fixed, but new issues found:
  - {new_violation_1}
  - {new_violation_2}

{If PASS}
  Fix verified successfully.
```

## Test Code Generation

After a verified PASS, generate a Playwright test that encodes the assertion for regression prevention:

```javascript
// Generated by playwright-verifier for fix #{fix_number}
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('{rule_id} — {selector} should pass', async ({ page }) => {
  await page.goto('{url}');
  const results = await new AxeBuilder({ page })
    .include('{selector}')
    .withRules(['{rule_id}'])
    .analyze();
  expect(results.violations).toEqual([]);
});
```

For keyboard fixes, generate keyboard navigation tests:

```javascript
test('keyboard: {selector} is reachable via Tab', async ({ page }) => {
  await page.goto('{url}');
  let found = false;
  for (let i = 0; i < 100; i++) {
    await page.keyboard.press('Tab');
    const focused = await page.evaluate(() => {
      const el = document.activeElement;
      return el?.matches('{selector}') || false;
    });
    if (focused) { found = true; break; }
  }
  expect(found).toBe(true);
});
```

## Graceful Degradation

If Playwright is not installed:
- Report that live verification is unavailable
- Suggest the fix is "unverified" and should be manually tested
- Provide the install command for future use

## Batch Verification

When verifying multiple fixes, maintain a running tally:

```text
VERIFICATION SUMMARY
====================
Total Fixes: {n}
Verified PASS: {n}
FAIL: {n}
REGRESSION: {n}
Skipped (no Playwright): {n}
```

Files: 1

Size: 4.6 KB

Complexity: 10/100

Category: AI Agents

Source: https://github.com/community-access/accessibility-agents/tree/main/codex-skills/playwright-verifier

Related in AI Agents

skill-development

Included

Comprehensive meta-skill for creating, managing, validating, auditing, and distributing Claude Code skills and slash commands (unified in v2.1.3+). Provides skill templates, creation workflows, validation patterns, audit checklists, naming conventions, YAML frontmatter guidance, progressive disclosure examples, and best practices lookup. Use when creating new skills, validating existing skills, auditing skill quality, understanding skill architecture, needing skill templates, learning about YAML frontmatter requirements, progressive disclosure patterns, tool restrictions (allowed-tools), skill composition, skill naming conventions, troubleshooting skill activation issues, creating custom slash commands, configuring command frontmatter, using command arguments ($ARGUMENTS, $1, $2), bash execution in commands, file references in commands, command namespacing, plugin commands, MCP slash commands, Skill tool configuration, or deciding between skills vs slash commands. Delegates to docs-management skill for official documentation.

AI Agentsscripts

reprompter

Included

Transform messy prompts into well-structured, effective prompts — single or multi-agent. Use when: "reprompt", "reprompt this", "clean up this prompt", "structure my prompt", rough text needing XML tags and best practices, "reprompter teams", "repromptception", "run with quality", "smart run", "smart agents", multi-agent tasks, audits, parallel work, anything going to agent teams. Don't use when: simple Q&A, pure chat, immediate execution-only tasks. See "Don't Use When" section for details. Outputs: Structured XML/Markdown prompt, quality score (before/after), optional team brief + per-agent sub-prompts, agent team output files. Success criteria: Single mode quality score ≥ 7/10; Repromptception per-agent prompt quality score 8+/10; all required sections present, actionable and specific.

AI Agentsscripts

adaptive-compaction

Included

Adaptive add-on policy and recovery layer that decides WHEN to compact, prune, snapshot, or fork -- replacing fixed-percent auto-compaction across Claude Code, Codex, and MCP-capable hosts. Trigger on auto-compact timing or damage: "when should I compact", "is it safe to compact now or start a fresh session", "auto-compact fires too early/mid-task", "switching to an unrelated task but the window still has space", "context rot", "answers get worse the longer the session runs", "the agent forgot the plan or my decisions after it summarized", "add a layer on top that manages context without changing the agent", raising autoCompactWindow to give the policy room, or installing/tuning a cross-tool compaction policy or PreCompact hook -- even when "compaction" is never said but the problem is context-window pressure or post-summarization memory loss. Do NOT use to summarize a conversation, build RAG, write a summarization prompt (decides WHEN not HOW), or answer max-context-length trivia.

AI Agentsscripts

agent-skill-creator

Included

Create cross-platform agent skills from workflow descriptions. Activates when users ask to create an agent, automate a repetitive workflow, create a custom skill, or need advanced agent creation. Triggers on phrases like create agent for, automate workflow, create skill for, every day I have to, daily I need to, turn process into agent, need to automate, create a cross-platform skill, validate this skill, export this skill, migrate this skill. Supports single skills, multi-agent suites, transcript processing, template-based creation, interactive configuration, cross-platform export, and spec validation.

AI Agentsscripts

llm-wiki

Included

Use when building or maintaining a persistent personal knowledge base (second brain) in Obsidian where an LLM incrementally ingests sources, updates entity/concept pages, maintains cross-references, and keeps a synthesis current. Triggers include "second brain", "Obsidian wiki", "personal knowledge management", "ingest this paper/article/book", "build a research wiki", "compound knowledge", "Memex", or whenever the user wants knowledge to accumulate across sessions instead of being re-derived by RAG on every query.

AI Agentsscripts

skill-master

Included

Agent Skills authoring, evaluation, and optimization. Create, edit, validate, benchmark, and improve skills following the agentskills.io specification. Use when designing SKILL.md files, structuring skill folders (references, scripts, assets), ingesting external documentation into skills, running trigger evals, benchmarking skill quality, optimizing descriptions, or performing blind A/B comparisons. Keywords: agentskills.io, SKILL.md, skill authoring, eval, benchmark, trigger optimization.

AI Agentsscripts