skills.rest
Cheggin
ChegginCOMMUNITY
Explore all skills by this author →
Website𝕏@reagan_hsuGitHub

visual-qa-pipeline

Capture Playwright screenshots of every page and report design evaluation results to Slack.

1|1|Updated Apr 13, 2026
Search Tags:#playwright#ui testing#e2e testing#build validation#visual qa#design preset#slack reporting
One-click install
npx skills add https://github.com/Cheggin/request-for-startups --skill visual-qa-pipeline
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-qa-pipeline
Source: https://github.com/Cheggin/request-for-startups/tree/main/skills/visual-qa-pipeline
Command: npx skills add https://github.com/Cheggin/request-for-startups --skill visual-qa-pipeline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Screenshot every page with Playwright, feed to visual QA agent for design evaluation, report results to Slack. Use after every build phase to verify UI matches the chosen design preset. Integrates with the Playwright skill and the website-creation preset system.

Core Features & Use Cases

  • Automated full-page screenshots using Playwright for all routes.
  • Design preset validation with a visual QA agent and Slack reporting.
  • Integrates with the website-creation workflow for end-to-end quality checks.

Quick Start

Run the visual QA pipeline after every build to capture screenshots, evaluate them against the design preset, and post results to Slack.

Frequently Asked Questions about visual-qa-pipeline

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

FAQPage Schema
How do I automate visual QA with Playwright after a build?▼

Automate visual QA by configuring Playwright to capture full-page screenshots of every route. The pipeline evaluates these screenshots against a design preset to verify UI consistency after build phases.

Can I send Playwright screenshot validation results to Slack?▼

Yes, you can send Playwright screenshot validation results to Slack. The pipeline integrates a Slack notification workflow to report visual QA evaluations directly to your team channels.

What is a design preset in automated visual testing?▼

A design preset in automated visual testing defines the expected UI parameters for pixel-perfect validation. The visual QA agent compares captured Playwright screenshots against this preset to detect visual inconsistencies across routes.

Do I need a local dev server to run e2e visual testing?▼

Yes, a local dev server is required to run e2e visual testing. The pipeline needs a running local dev server to navigate routes, capture per-page screenshots, and validate the UI against design presets.

How does automated build validation work for UI consistency?▼

Automated build validation for UI consistency works by capturing screenshots across all application routes post-build. A visual QA agent evaluates these screenshots against a design preset to verify pixel-perfect UI.

What is the best way to verify pixel-perfect UI across multiple routes?▼

The best way to verify pixel-perfect UI across multiple routes is using an automated visual QA pipeline. It captures per-page screenshots with Playwright, evaluates them against a design preset, and reports results to Slack.

Related Skills

Explore More Design & Creative Skills→
smallnestsmallnest
295

Playwright Browser Automation

Automate browser tasks and testing with Playwright for web QA.

Community
Advanced
kenlckkenlck
5

polish-ui

Fix alignment, spacing, and micro-details in UI before release.

Community
Advanced
edfentonedfenton
3

nean-design-review

Capture UI screenshots across breakpoints with Playwright and evaluate against the nean-styleguide.

Community
Advanced
HCMUTE-RTICHCMUTE-RTIC

ui-visual-validator

Validate UI modifications for design system compliance and accessibility via screenshot analysis.

Official
Advanced