skills.rest
thachrocky12345
thachrocky12345COMMUNITY
Explore all skills by this author →
GitHub

visual-pr-audit

Captures Playwright screenshots of frontend PRs, audits diffs for bugs, and applies fixes.

Updated May 11, 2026
Search Tags:#pull request#react#docker#playwright#visual testing#screenshot diff#bug audit
One-click install
npx skills add https://github.com/thachrocky12345/local-agent-train-workstation --skill visual-pr-audit-thachrocky12345
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-pr-audit
Source: https://github.com/thachrocky12345/local-agent-train-workstation/tree/main/.claude/skills/visual-pr-audit
Command: npx skills add https://github.com/thachrocky12345/local-agent-train-workstation --skill visual-pr-audit-thachrocky12345

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve? Frontend PRs often ship with subtle bugs like slug mismatches, undeclared hook variables, and broken test selectors that only surface when the app runs live. This Skill automates the full visual verification loop so regressions are caught and fixed before merge. ## Core Features & Use Cases - Before/After Screenshot Capture: Spins up the feature branch in Docker and captures baseline (main) and feature screenshots with Playwright for visual diffing. - Automated Bug Audit: Scans the branch diff for five known bug patterns including slug/name mismatches, undeclared variables in hook dependency arrays, E2E selector drift, viewport overflow, and off-viewport footer elements. - Fix Implementation and Verification: Applies fixes in structural order, then validates with backend tests, yarn test-all, and isolated Playwright spec runs. - Use Case: A developer opens a PR adding a new navigation mega menu. Run this Skill to capture screenshots on both branches, detect that the component never renders due to a slug mismatch, fix it, and verify the E2E suite passes. ## Quick Start Run a visual audit on the current frontend PR branch, capture before and after screenshots, and fix any bugs found.

Frequently Asked Questions about visual-pr-audit

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

FAQPage Schema
How do I capture before and after screenshots for a frontend PR?▼

Check out main, rebuild the frontend container with Docker Compose, and run the Playwright capture script to save baseline screenshots. Then check out the feature branch, rebuild, and capture again with mode set to feature for visual comparison.

How to audit a React PR diff for common bugs?▼

Run git diff against main and check for five patterns: slug or name string mismatches against DB fixtures, undeclared variables in hook dependency arrays, E2E selector drift, tab bar viewport overflow, and footer elements below the fold.

Why does Playwright click time out on menu tabs?▼

Menus with onMouseLeave handlers close when Playwright moves the mouse, detaching the element between visibility checks and clicks. Use page.evaluate with a direct DOM click and scrollIntoView to bypass pointer events.

Why is my Playwright screenshot blank after page load?▼

The networkidle wait state resolves before Redux nav data loads from the backend API. Use domcontentloaded plus an 8 second waitForTimeout, and check pageerror events for ReferenceError crashes from undeclared hook variables.

What are the prerequisites for running this visual audit?▼

You need a running Docker Compose stack, Playwright installed in the frontend node_modules, both main and the feature branch available locally, and a writable screenshots directory such as C:\Temp\screenshots.

Related Skills

Explore More Software Engineering Skills→
ryoppippiryoppippi
256

pr-workflow-manager

Automate the pull request workflow from local changes to an opened PR.

Community
Intermediate
shekohexshekohex
9

babysit-pr

Monitor GitHub pull requests for CI checks, review comments, and mergeability.

Community
Advanced
Devsoul2026Devsoul2026
150

requesting-code-review

Automate pre-commit verification with static analysis, tests, and lint checks.

Community
Advanced
gfiresgfires

design-review

Audit live interfaces for visual inconsistencies and apply atomic fixes.

Community
Advanced