skills.rest
specvital
specvitalOFFICIAL
Explore all skills by this author →
GitHub

e2e-ui-fix

Fix UI bugs from E2E tests using Playwright MCP verification.

1|Updated Dec 8, 2025
Search Tags:#root cause analysis#e2e#regression testing#bug reproduction#Playwright MCP#UI bug fix
One-click install
npx skills add https://github.com/specvital/infra --skill e2e-ui-fix
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: e2e-ui-fix
Source: https://github.com/specvital/infra/tree/main/.claude/skills/e2e-ui-fix
Command: npx skills add https://github.com/specvital/infra --skill e2e-ui-fix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill streamlines the process of diagnosing, reproducing, and fixing UI bugs uncovered during end-to-end tests by leveraging Playwright MCP verification and bilingual documentation to ensure regression protection.

Core Features & Use Cases

  • Reproduction & Verification: Reproduce bugs from E2E reports, verify with Playwright MCP, and capture before/after states.
  • Root Cause Analysis & Regression: Analyze cause, implement minimal fixes, and generate regression tests.
  • Documentation & bilingual fixes: Produce bilingual fix summaries and update bug reports.

Quick Start

Start by triggering a bug fix for the latest failing e2e UI test using the bug report identifier, then follow the workflow to reproduce, fix, verify, and document.

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 UI bugs found during Playwright E2E testing?▼

Fixing UI bugs found during E2E testing involves reproducing the issue, performing root cause analysis, applying minimal code fixes, and generating regression tests using Playwright MCP for verification.

Can I automate bug reproduction and verification using Playwright MCP?▼

Yes, you can automate bug reproduction and verification using Playwright MCP. It captures before and after states to systematically verify UI bug fixes and ensure regression protection.

What is the best way to add regression tests after a frontend UI bug fix?▼

The best way to add regression tests after a frontend UI bug fix is to generate them immediately following root cause analysis, ensuring the specific E2E test failure is captured and prevented in future cycles.

Do I need a Playwright MCP server to run E2E UI bug fixes?▼

Yes, you need a Playwright MCP server accessible in your environment. The bug fix workflow relies on Playwright MCP to verify UI states, reproduce failing tests, and validate the applied code fixes.

How does root cause analysis work for E2E UI test failures?▼

Root cause analysis for E2E UI test failures works by reproducing the bug from E2E reports, verifying the failure state with Playwright MCP, and analyzing the cause to implement a targeted minimal code fix.

Does this UI bug fix workflow generate documentation for the changes?▼

Yes, the UI bug fix workflow generates bilingual fix summaries and updates bug reports, ensuring that the root cause analysis, code fixes, and regression test additions are fully documented.

Related Skills

Explore More Software Engineering Skills→
jamditisjamditis
359

test-first-bugs

Enforces a test-first bug-fixing workflow with parallel fix attempts and full-suite verification.

Community
Basic
dohernandezdohernandez

bugfix

Organize structured debugging workflows with reproduce, plan, failing test, fix, and verify phases.

Community
Advanced
tomeraitztomeraitz
8

debugger

Execute automated browser user flows and monitor console logs with Playwright MCP.

Community
Advanced
david-nossebrodavid-nossebro

debug-and-fix

Reproduce web app failures and fix bugs with Playwright regression tests.

Community
Advanced