Gate 5 of frontend development cycle - ensures all user flows from product-designer have passing E2E tests with Playwright across browsers.
npx claudepluginhub lerianstudio/ringThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Ensure all user flows from ring:product-designer have passing Playwright E2E tests across Chromium, Firefox, and WebKit with responsive viewport coverage.
Core principle: If the product-designer defined a user flow, it must have an E2E test. If the user can encounter an error, it must be tested.
<block_condition>
This skill ORCHESTRATES. Frontend QA Analyst Agent (e2e mode) EXECUTES.
| Who | Responsibility |
|---|---|
| This Skill | Gather requirements, dispatch agent, track iterations |
| QA Analyst Frontend Agent | Write Playwright tests, run cross-browser, verify flows |
MANDATORY: Load testing-e2e.md standards via WebFetch.
<fetch_required> https://raw.githubusercontent.com/LerianStudio/ring/main/dev-team/docs/standards/frontend/testing-e2e.md </fetch_required>
REQUIRED INPUT:
- unit_id: [task/subtask being tested]
- implementation_files: [files from Gate 0]
OPTIONAL INPUT:
- user_flows_path: [path to user-flows.md]
- backend_handoff: [endpoints, contracts from backend cycle]
- gate4_handoff: [full Gate 4 output]
if any REQUIRED input is missing:
→ STOP and report: "Missing required input: [field]"
if user_flows_path provided:
→ Load user flows as E2E test scenarios
→ All flows MUST be covered
if backend_handoff provided:
→ Verify E2E tests exercise backend endpoints
→ Verify request payloads match contracts
Task tool:
subagent_type: "ring:qa-analyst-frontend"
prompt: |
**MODE:** E2E TESTING (Gate 5)
**Standards:** Load testing-e2e.md
**Input:**
- Unit ID: {unit_id}
- Implementation Files: {implementation_files}
- User Flows: {user_flows_path or "N/A"}
- Backend Handoff: {backend_handoff or "N/A"}
**Requirements:**
1. Create Playwright tests for all user flows
2. Test happy path + error paths (API 500, timeout, validation)
3. Run on Chromium, Firefox, WebKit
4. Test responsive viewports (mobile, tablet, desktop)
5. Use data-testid or semantic role selectors only
6. Run 3x consecutively to verify no flaky tests
**Output Sections Required:**
- ## E2E Testing Summary
- ## Flow Coverage
- ## Handoff to Next Gate
Parse agent output:
if "Status: PASS" in output:
→ Gate 5 PASSED
→ Return success with metrics
if "Status: FAIL" in output:
→ If flow not covered: re-dispatch agent to add missing tests
→ If browser failure: re-dispatch implementation agent to fix
→ If flaky: re-dispatch agent to stabilize tests
→ Re-run E2E tests (max 3 iterations)
→ If still failing: ESCALATE to user
## E2E Testing Summary
**Status:** {PASS|FAIL}
**Flows Tested:** {X/Y}
**Happy Path Tests:** {count}
**Error Path Tests:** {count}
**Browsers Passed:** {X/3}
**Consecutive Passes:** {X/3}
## Flow Coverage
| User Flow | Happy Path | Error Paths | Browsers | Viewports | Status |
|-----------|------------|-------------|----------|-----------|--------|
| {flow} | {PASS|FAIL} | {descriptions} | {X/3} | {X/3} | {PASS|FAIL} |
## Backend Handoff Verification
| Endpoint | Method | Contract Verified | Status |
|----------|--------|-------------------|--------|
| {endpoint} | {method} | {fields} | {PASS|FAIL} |
## Handoff to Next Gate
- Ready for Gate 6 (Performance Testing): {YES|NO}
- Iterations: {count}
| Severity | Criteria | Examples |
|---|---|---|
| CRITICAL | User flow completely broken, data corruption | Transaction fails, user data lost, checkout blocked |
| HIGH | Missing user flow tests, flaky tests, browser failure | Untested flow from product-designer, test fails intermittently |
| MEDIUM | Error path gaps, viewport issues | Missing error handling test, mobile viewport untested |
| LOW | Selector improvements, test organization | Non-semantic selectors, test file structure |
Report all severities. CRITICAL = immediate fix. HIGH = fix before gate pass. MEDIUM = fix in iteration. LOW = document.
See shared-patterns/shared-anti-rationalization.md for universal anti-rationalizations. Gate-specific:
| Rationalization | Why It's WRONG | Required Action |
|---|---|---|
| "Unit tests cover the flow" | Unit tests don't test real browser interaction. | Write E2E tests |
| "Only Chromium matters" | Firefox and Safari have different behavior. | Test all 3 browsers |
| "Happy path is enough" | Users encounter errors. Test error handling. | Add error path tests |
| "CSS selectors are fine" | CSS changes with refactors. Use semantic selectors. | Use roles and testids |
| "Product-designer flows are suggestions" | Flows define acceptance criteria. Cover all. | Test all flows |
| "Test is flaky, skip it" | Flaky tests indicate real instability. | Fix the test |
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.