skills.rest
YunosukeYoshino
YunosukeYoshinoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-evaluation

Automate Playwright end-to-end tests and visual verification for web apps.

Updated Apr 3, 2026
Search Tags:#accessibility#playwright#e2e-testing#visual-qa#ui-verification#qa-report
One-click install
npx skills add https://github.com/YunosukeYoshino/harness --skill ui-evaluation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-evaluation
Source: https://github.com/YunosukeYoshino/harness/tree/main/.claude/skills/ui-evaluation
Command: npx skills add https://github.com/YunosukeYoshino/harness --skill ui-evaluation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Validates user interface correctness by automating end-to-end tests and browser-visual verification, ensuring UI regressions are caught beyond CI signals.

Core Features & Use Cases

  • Playwright-based automated E2E tests across app routes.
  • Agent-browser phase for visual validation, including console/error checks and annotated screenshots.
  • Phase-based QA reporting with a dedicated design-quality assessment section.
  • Optional accessibility snapshots to verify content structure.

Quick Start

Start the web app, run the Playwright E2E tests, then perform agent-browser verification to generate the QA report.

Frequently Asked Questions about ui-evaluation

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

FAQPage Schema
How do I catch UI rendering issues that CI signals miss in modern web apps?▼

End-to-end UI verification catches rendering issues missed by CI by automating Playwright-based E2E tests and performing browser-visual verification across multiple app routes to validate UI correctness.

How do I automate visual QA and generate a structured report for web applications?▼

Automate visual QA by running Playwright E2E tests followed by an agent-browser phase for visual validation, which produces a structured QA report complete with a dedicated design-quality assessment section.

Does Playwright support phase-based E2E testing with console and error checks?▼

Yes, Playwright supports phase-based E2E testing by automating route checks, and the subsequent agent-browser visual verification phase includes console and error checks with annotated screenshots.

Can I verify content structure and accessibility during E2E UI verification?▼

Yes, you can verify content structure during E2E UI verification by using optional accessibility snapshots to assess and validate the application's accessibility alongside visual QA reporting.

What is the best way to perform design-quality assessment during UI testing?▼

Design-quality assessment during UI testing is performed through an agent-browser visual verification phase that annotates screenshots and generates a QA report containing a dedicated design-quality evaluation section.

Why does my CI pipeline miss visual regressions and how do I fix it?▼

CI pipelines miss visual regressions because they lack browser-level visual verification, which you can fix by adding phase-based Playwright E2E tests and agent-browser visual checks to validate UI rendering.

Related Skills

Explore More Design & Creative Skills→
yogogml0035-cpuyogogml0035-cpu

playwright-cli

Automate browser tasks and E2E testing with Playwright CLI.

Community
Advanced
semicolon-devteamsemicolon-devteam

validate-test-cases

Validate test cases against issue acceptance criteria and generate verification reports.

Official
Advanced
lichong-alichong-a

ric-testing-quality

Automate unit, integration, E2E, visual, accessibility, and static analysis tests for RIC applications.

Community
Advanced
alvarettoalvaretto
1

Comparación Visual Inteligente

Compare generated images against originals and report visual differences.

Community
Advanced