📋 Copy Blueprint Command { } Inspect JSON API Ground-Truth Source ↗

⚡ 1-Click Agent & Developer Install

Zero Auth · Ready for Grok Bot, Claude Code & Cursor

### 1. The Workflow Bottleneck & Problem Statement Traditional E2E test suites break on every minor CSS refactor and fail to catch broken keyboard navigation or missing screen-reader labels. ### 2. Synthesized Agent Architecture & Connected Stack **Accessibility-Tree E2E Testing & Zero-Flake Playwright Suite** (`epic-stack-e2e-accessibility-gate`) is a verified production blueprint curated from **@kentcdodds**'s real-world implementation. - **Primary Capability:** Replaces brittle CSS/XPath selectors with semantic ARIA role locators (`getByRole`, `getByLabel`) verified against live Playwright accessibility snapshots. - **Connected Tool Stack:** Playwright Official MCP, GitHub MCP - **Execution Governance:** `Read-Only Discovery` → `Deterministic Policy Check` → `Ask-First Human Approval` - **Certified Builder Source:** [@kentcdodds](https://github.com/microsoft/playwright-mcp) ### 3. Step-by-Step Implementation Blueprint 1. **Trigger & Data Ingestion:** Configure your agent routine to watch **Playwright Official MCP** on a scheduled cadence or event webhook. Treat all external text as untrusted data inside XML fences. 2. **Cross-System Enrichment & Verification:** Query **GitHub MCP** to validate live capacity, account status, or code state before generating recommendations. 3. **Human-in-the-Loop Action Staging:** Post a structured summary card to **GitHub MCP** with 1-click approve/edit controls so your team retains full oversight. ### 4. Copy-Paste System Prompt & Routine Configuration ```text Implement the 'Accessibility-Tree E2E Testing & Zero-Flake Playwright Suite' workflow curated with @kentcdodds. 1. OBJECTIVE: Replaces brittle CSS/XPath selectors with semantic ARIA role locators (`getByRole`, `getByLabel`) verified against live Playwright accessibility snapshots. 2. CONNECTED TOOL STACK: Playwright Official MCP, GitHub MCP 3. STEP-BY-STEP EXECUTION LOOP: - Step A (Ingest & Ground): Query live inputs from Playwright Official MCP and cross-reference state in GitHub MCP. - Step B (Analyze & Validate): Apply strict filtering rules, verify schema/policy constraints, and flag any anomalies or missing fields. - Step C (Stage & Report): Prepare the structured output, draft replies/tickets in GitHub MCP, and request human confirmation before executing any external send or production write. ``` ### 5. Measured ROI & Production Impact - **Verified Outcome:** Eliminates flaky selector failures while enforcing WCAG accessibility compliance on every user flow. - **Builder Portfolio:** [Explore all capabilities by @kentcdodds →](/u/kentcdodds)

Tags: #epic-stack-e2e-accessibility-gate#use-case#engineering#kentcdodds#playwright-official-mcp#github-mcp

View All 8 Items by @kentcdodds →

mcp · ⚡ 91

Puppeteer Headless Chromium Rendering & PDF Snapshot MCP Server

Automate headless Chromium via Puppeteer MCP: render SPAs, evaluate client-side JavaScript, capture full-page screenshots, and export clean PDFs.

mcp · ⚡ 90

Puppeteer SSR & Console Error Inspector MCP (mcp-puppeteer)

Inspect hydration warnings, uncaught page exceptions, and failed network requests on staging URLs using Puppeteer's DevTools protocol bindings.

template · ⚡ 86

Review Brief — 2-Minute GitHub Pull Request Risk & Reviewer Triage

Summarizes large GitHub Pull Requests into architectural intent, breaking-change risk, test coverage delta, and recommended code-owner reviewers in under t