ui-debug-workflow

Name: ui-debug-workflow
Availability: InStock
Author: pantheon-org

Capture and compare UI evidence with Playwright to debug visual regressions.

9|Updated Feb 21, 2026

Search Tags:#automation #frontend testing #playwright #visual regression #ui debugging #evidence collection

Ready to run

npx skills add https://github.com/pantheon-org/tekhne --skill ui-debug-workflow

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-debug-workflow
Source: https://github.com/pantheon-org/tekhne/tree/main/skills/testing/ui-debug-workflow
Command: npx skills add https://github.com/pantheon-org/tekhne --skill ui-debug-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a structured, evidence-based workflow to systematically debug UI changes, ensuring visual regressions are caught and frontend bugs are reproducibly resolved.

Core Features & Use Cases

Reproducible Evidence Capture: Captures screenshots, DOM snapshots, and logs for both baseline and changed code states under identical conditions.
Automated Comparison: Compares captured artifacts to highlight differences and generate a comparison report.
Use Case: When a frontend developer pushes a UI fix, this Skill can be used to automatically capture before-and-after screenshots and DOM states, compare them, and generate a report confirming the fix or identifying any new visual bugs.

Quick Start

Run the full debug session for the 'main' branch against the 'fix/my-branch' branch at 'http://localhost:3000'.

Frequently Asked Questions about ui-debug-workflow

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

FAQPage Schema

How do I capture before and after evidence for UI debugging with Playwright?▼

You can capture UI debugging evidence by running shell scripts that automate Playwright to collect baseline and changed screenshots, DOM snapshots, and logs under identical conditions. This generates comparable artifacts for visual regression analysis.

What is visual regression testing and how does it document frontend bugs?▼

Visual regression testing identifies unintended UI changes by comparing baseline and updated browser artifacts. This workflow captures screenshots and DOM states, then generates a comparison report highlighting differences to document frontend bugs.

How do I compare DOM snapshots and screenshots between two branches locally?▼

You compare DOM snapshots and screenshots by executing the debug workflow against a baseline branch like 'main' and a target branch like 'fix/my-branch' at a local URL. The Skill outputs a comparison report highlighting the visual differences.

Do I need Playwright installed to automate visual regression workflows?▼

Yes, Playwright and shell scripting are required dependencies to execute this visual regression workflow. The Skill relies on Playwright's browser automation capabilities to capture the baseline and changed code states for artifact comparison.

Can I use this to verify a frontend fix without introducing new visual bugs?▼

Yes, you can verify a frontend fix by capturing before-and-after screenshots and DOM states automatically. The workflow compares these artifacts to confirm the fix while identifying any newly introduced visual regressions.

What's the best way to automate evidence collection for frontend testing?▼

Automating evidence collection for frontend testing is best handled by running repeatable Playwright scripts that capture screenshots and logs under identical conditions. This ensures reproducible artifacts for reliable visual regression identification.