qa-visual-testing

Validate shaders, materials, and UI with Playwright screenshot comparisons and Vision MCP.

1|Updated Jan 20, 2026
One-click install
npx skills add https://github.com/feliperyba/ralph-orchestra --skill qa-visual-testing
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: qa-visual-testing
Source: https://github.com/feliperyba/ralph-orchestra/tree/main/.claude/skills/qa-visual-testing
Command: npx skills add https://github.com/feliperyba/ralph-orchestra --skill qa-visual-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Validates visual quality across shaders, materials, and UI by automated end-to-end tests to catch regressions that manual checks miss.

Core Features & Use Cases

  • E2E visual regression testing using Playwright screenshot API
  • Qualitative GDD compliance using Vision MCP helpers
  • State-aware validation across menus, gameplay, and UI elements

Quick Start

Run the visual validation suite to validate shaders, materials, and UI against the GDD using Playwright and Vision MCP helpers.

Frequently Asked Questions about qa-visual-testing

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

FAQPage Schema
How do I automate visual regression testing for game shaders and UI?

Automate visual regression testing by running Playwright screenshot comparisons alongside Vision MCP qualitative analysis. This validates shaders, materials, and UI consistency against GDD guidelines to catch visual regressions that manual checks miss.

Can I validate color-mode variations across different game states using E2E tests?

Validate color-mode variations across game states using state-aware E2E tests. Playwright captures screenshots across menus and gameplay, while Vision MCP verifies visual compliance against your GDD baseline.

What's the best way to check material appearance consistency against design guidelines?

Check material appearance consistency by integrating Vision MCP qualitative analysis with your GDD guidelines. This approach validates material rendering output against baseline expectations to detect visual drift.

How does Vision MCP qualitative analysis work with Playwright screenshots?

Vision MCP qualitative analysis works with Playwright by evaluating screenshots captured during E2E test runs. It assesses visual quality and GDD compliance, moving beyond pixel diffing to understand contextual visual states.

Does this visual testing approach require baseline management for UI consistency checks?

Visual testing requires baseline management to effectively track UI consistency. The validation suite compares current Playwright screenshots against managed baselines to identify unintended visual regressions across game states.

Why use automated E2E tests for shader validation instead of manual checks?

Automated E2E tests for shader validation catch regressions that manual checks miss. By standardizing screenshot comparisons and qualitative analysis, you ensure consistent visual quality across materials and UI without human error.