e2e-ui-fix

Fixes UI bugs from E2E test reports with Playwright MCP verification and regression tests.

1|Updated Mar 8, 2026
One-click install
npx skills add https://github.com/kubrickcode/cine-mirror --skill e2e-ui-fix-kubrickcode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: e2e-ui-fix
Source: https://github.com/kubrickcode/cine-mirror/tree/main/.agents/skills/e2e-ui-fix
Command: npx skills add https://github.com/kubrickcode/cine-mirror --skill e2e-ui-fix-kubrickcode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When E2E testing uncovers UI bugs, developers need a systematic way to reproduce, diagnose, fix, and verify each bug without losing track of evidence or introducing regressions. This Skill automates that entire bug-fix loop using Playwright MCP. ## Core Features & Use Cases - Guided Bug Fix Workflow: Loads the bug report, reproduces the bug with Playwright MCP, analyzes the root cause, implements a minimal fix, and verifies it in the browser. - Automatic Regression Tests: Generates a Playwright test that would fail before the fix and pass after, placed according to your playwright.config.ts settings. - Bilingual Documentation: Produces Korean and English fix summaries and updates the bug report status. - Use Case: After running E2E tests and finding that Test 3's checkout button does nothing, run the fix workflow to reproduce the click failure, trace it to a missing event handler, patch the component, verify the fix in a live browser, and commit a regression test. ## Quick Start Fix the bug documented in Test 3's bug report and verify it with Playwright MCP.

Frequently Asked Questions about e2e-ui-fix

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix a bug found during Playwright E2E testing?▼

Provide the test number from the bug report, and the workflow reproduces the bug with Playwright MCP, analyzes the root cause using Grep and file reads, implements a minimal fix, and verifies it in the browser before writing a regression test.

How to write a Playwright regression test after fixing a bug?▼

The regression test is generated only after the fix is verified in the browser. It is placed in the test directory from playwright.config.ts, follows the project's testMatch naming pattern, and reproduces the original bug scenario so it fails before the fix and passes after.

What prerequisites are needed to run this bug fix workflow?▼

You need an existing English bug report at docs/e2e-ui/bug-report-test-N.md, a running Playwright MCP server, and a running frontend server. The workflow also reads playwright.config.ts and package.json first to detect the base URL and framework.

What happens if the bug cannot be reproduced with Playwright MCP?▼

If reproduction fails, the workflow notes that the bug may already be fixed and asks whether to continue or skip. It never attempts a fix without first confirming the bug exists, preventing unnecessary code changes.

Does this workflow modify code without verifying the fix?▼

No. Verification with Playwright MCP is mandatory before writing any test. If verification fails, the workflow returns to root cause analysis, documents what did not work, and retries with a different approach.