skills.rest
redpanda-data
redpanda-dataOFFICIAL
Explore all skills by this author →
Website𝕏@redpandadataGitHub

visual-review

Automate visual and accessibility reviews of frontend UI changes with Playwright.

34|4|Updated Apr 20, 2026
Search Tags:#accessibility#performance testing#UI consistency#visual review#cross-browser testing
One-click install
npx skills add https://github.com/redpanda-data/ui-harness --skill visual-review-redpanda-data
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-review
Source: https://github.com/redpanda-data/ui-harness/tree/main/visual-review
Command: npx skills add https://github.com/redpanda-data/ui-harness --skill visual-review-redpanda-data

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the visual review of frontend UI changes across different browsers and devices, helping to catch inconsistencies and regressions before they reach production.

Core Features & Use Cases

  • Cross-Browser Testing: Automatically check UI changes on multiple browsers (Chromium, Firefox, Safari) and devices.
  • Accessibility Checks: Validate accessibility issues such as focus order, ARIA attributes, and keyboard navigation.
  • Performance Insights: Identify layout shifts, performance bottlenecks, and Core Web Vitals issues.
  • Use Case: Before merging a PR, use this Skill to ensure that new changes do not introduce visual bugs or accessibility issues on both desktop and mobile platforms.

Quick Start

Run the visual review skill by executing the command /visual-review.

Frequently Asked Questions about visual-review

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

FAQPage Schema
How do I automate cross-browser testing for UI consistency?▼

Automating cross-browser testing for UI consistency is done by executing the visual review command, which uses Playwright to simulate user interactions and validate rendering across Chromium, Firefox, and Safari.

Can I check frontend accessibility violations and keyboard navigation before merging a PR?▼

Checking frontend accessibility violations and keyboard navigation before merging a PR is supported, validating focus order and ARIA attributes automatically during the visual review process.

What is the best way to detect layout shifts and performance bottlenecks in frontend changes?▼

Detecting layout shifts and performance bottlenecks in frontend changes is handled by running the visual review, which identifies Core Web Vitals issues and performance regressions across different browsers and devices.

Do I need Playwright installed to run visual and accessibility reviews?▼

You need Playwright installed and configured to run visual and accessibility reviews, as it provides the required browser automation to simulate interactions and validate UI rendering.

Does cross-browser testing work for both desktop and mobile platforms?▼

Cross-browser testing works for both desktop and mobile platforms, automatically checking UI changes and visual regressions across multiple browsers and simulated devices.

Related Skills

Explore More Software Engineering Skills→
JonathanMitchell1234JonathanMitchell1234

webapp-testing

Test local web applications with automated Playwright scripts.

Community
Intermediate
badbsallyybadbsallyy

merge-pr

Merge GitHub pull requests via squash and clean up worktrees.

Community
Advanced
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
cslsoftwarescslsoftwares

quality-regression-guard

Capture baseline module behavior and compare test results to detect regressions.

Community
Advanced