skills.rest
gyarra
gyarraCOMMUNITY
Explore all skills by this author →
GitHub

s-frontend-visual-review

Drive a real browser via Playwright CLI to validate UI changes and capture screenshots.

Updated Aug 23, 2026
Search Tags:#performance#accessibility#frontend#browser-testing#visual-review#qa-automation#playwright-cli
One-click install
npx skills add https://github.com/gyarra/cine_medallo_2 --skill s-frontend-visual-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: s-frontend-visual-review
Source: https://github.com/gyarra/cine_medallo_2/tree/main/.claude/skills/s-frontend-visual-review
Command: npx skills add https://github.com/gyarra/cine_medallo_2 --skill s-frontend-visual-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pa' Cine frontend teams need a reliable way to validate UI changes visually across browsers and ensure interactions and accessibility cues render correctly before merging.

Core Features & Use Cases

  • Drive a real browser via Playwright CLI (default) to verify UI elements, navigation, and layout across viewports.
  • Escalate to Chrome DevTools MCP for deeper performance, accessibility, and network diagnostics when needed.
  • Follow a structured workflow with a state-tracker gate and standardized artifacts (screenshots, logs) to gate PR reviews.
  • Support authenticated admin pages and multi-page flows through snapshot-driven checks.

Quick Start

Open the target frontend page with Playwright CLI and capture a desktop screenshot to start the visual review.

Frequently Asked Questions about s-frontend-visual-review

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

FAQPage Schema
How do I automate visual frontend review for a PR?▼

Automate visual frontend review by driving a Playwright CLI browser to capture screenshots and validate UI changes. It outputs standardized audit artifacts to gate PR reviews and ensure layout consistency.

Can I test authenticated admin pages and multi-page flows?▼

Yes, you can test authenticated admin pages and multi-page flows using snapshot-driven checks. The workflow drives a real browser to verify navigation and interactions behind authentication barriers.

How do I check frontend accessibility and performance during UI testing?▼

Check frontend accessibility and performance by escalating from Playwright CLI to Chrome DevTools MCP. This provides deeper diagnostics for network, rendering, and accessibility cues during UI testing.

Does this visual review workflow support multiple device viewports?▼

Yes, visual review supports multiple device viewports. The workflow drives a real browser to verify UI elements, navigation, and layout across different screen sizes during design QA.

What is the best way to gate PR reviews with visual UI tests?▼

Gate PR reviews by following a structured workflow with a state-tracker gate. It generates standardized artifacts like screenshots and logs to verify layout, accessibility, and performance before merging.

Related Skills

Explore More Software Engineering Skills→
pablitonogpablitonog
1

image-creator

Render HTML and CSS content into PNG images with Playwright.

Community
Intermediate
evalstateevalstate
3.9k

pr-writing-review

Extract and analyze writing suggestions from GitHub PR review comments.

Community
Advanced
tmchowtmchow
60

chrome-devtools-axi

Automates browser tasks via Chrome DevTools Protocol with accessibility snapshots and performance diagnostics.

Community
Advanced
abretonc7sabretonc7s

visual-testing

Capture screenshots before and after UI interactions to detect visual regressions.

Community
Intermediate