frontend-bug-verification

Create Git worktrees, run Playwright tests, and capture before and after screenshots.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/Youngger9765/career-creator --skill frontend-bug-verification
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-bug-verification
Source: https://github.com/Youngger9765/career-creator/tree/main/.claude/skills/frontend-bug-verification
Command: npx skills add https://github.com/Youngger9765/career-creator --skill frontend-bug-verification

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of verifying frontend bug fixes by running both the buggy and fixed versions of the application simultaneously in isolated environments, ensuring bugs are truly resolved before merging.

Core Features & Use Cases

  • Simultaneous Environment Testing: Compares the buggy state (detached HEAD of the commit before the fix) against the fixed state (feature branch) using Git worktrees.
  • Automated Verification: Executes Playwright tests on both environments to capture BEFORE and AFTER screenshots, ensuring the bug is reproducible and then fixed.
  • Use Case: When a bug is reported on GitHub, this Skill can be invoked to automatically set up local environments, run reproduction steps, capture evidence, and create a Pull Request with verification details.

Quick Start

Use the frontend-bug-verification skill to verify bug fix for GitHub issue number 123.

Frequently Asked Questions about frontend-bug-verification

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

FAQPage Schema
How do I verify a frontend bug fix using isolated environments?

To verify a frontend bug fix, you can automate environment isolation by creating dual Git worktrees for buggy and fixed code versions. The process executes Playwright tests to capture before and after screenshots for comparison.

What is the best way to automate frontend bug reproduction with Playwright?

The best way to automate frontend bug reproduction with Playwright is by running tests against a detached HEAD commit of the buggy state. This captures the initial error, which can then be compared against the feature branch's fixed state.

Do I need GitHub CLI to automate bug verification and create pull requests?

Yes, you need GitHub CLI to automate bug verification and create pull requests. The process requires GitHub CLI, Git, Node.js, npm, Python, pip, and Playwright to post evidence to issues and generate PRs.

How does Git worktree work for testing simultaneous application states?

Git worktree enables testing simultaneous application states by checking out the buggy version as a detached HEAD and the fixed version as a feature branch in separate directories. This allows Playwright to execute tests concurrently on both states.

Can I automatically post bug reproduction screenshots to GitHub issues?

Yes, you can automatically post bug reproduction screenshots to GitHub issues. After executing Playwright tests on isolated worktrees, the captured before and after screenshots are posted directly to the corresponding GitHub issue as evidence.

When should I not use dual worktrees for frontend debugging?

You should not use dual worktrees for frontend debugging if your environment lacks the required dependencies. If you do not have Git, Node.js, Python, pip, Playwright, and GitHub CLI installed, the automated verification process will fail.