skills.rest
ElvinOuyang
ElvinOuyangCOMMUNITY
Explore all skills by this author →
GitHub

web-ui-spec-checker

Compare running web application screens against design specifications using Playwright.

Updated Aug 23, 2026
Search Tags:#playwright#visual regression#ui verification#bug reporting#design spec#accessibility snapshot#computed styles
One-click install
npx skills add https://github.com/ElvinOuyang/claude-skill-collection --skill web-ui-spec-checker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-ui-spec-checker
Source: https://github.com/ElvinOuyang/claude-skill-collection/tree/main/plugins/web-dev-toolkit/skills/web-ui-spec-checker
Command: npx skills add https://github.com/ElvinOuyang/claude-skill-collection --skill web-ui-spec-checker

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill prevents UI regressions by comparing a running web app’s rendered screens against the intended design specification.

Core Features & Use Cases

  • Spec-driven screen verification: Reads the relevant spec section per route before testing.
  • Playwright-based navigation and evidence capture: Takes screenshots and accessibility snapshots while visiting each screen.
  • Style validation with computed styles: Confirms critical colors, spacing, typography, and structural details with DOM + CSS checks.
  • Actionable bug reporting: Produces a structured bug report (with per-screen findings and artifacts) when mismatches are found.
  • Use case: After a CSS refactor, confirm the bottom nav, task cards, and chat screen still match the UX design doc.

Quick Start

Ask your agent to check the UI by navigating to http://localhost:3000, compare Tasks/Chat/Mine screens against your spec file, and save screenshots plus a bug-report.md to the outputs directory.

Frequently Asked Questions about web-ui-spec-checker

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

FAQPage Schema
How do I verify my web UI matches a design spec after a refactor?▼

Spec-driven UI verification compares a running web app's rendered screens against an intended design specification. It navigates routes, captures screenshots, and validates DOM structure to detect visual regressions like token or color drift.

How does Playwright detect visual regression in web applications?▼

Playwright detects visual regression by navigating to specified routes, taking screenshots, capturing accessibility snapshots, and evaluating computed styles against spec-defined properties to confirm critical colors, spacing, and typography remain intact.

Can I check computed styles and DOM structure against a UX design document?▼

Yes, you can check computed styles and DOM structure against a UX design document. The verification process reads relevant spec sections per route and validates CSS properties like colors and spacing alongside structural details.

Do I need Playwright MCP browser tools to check UI against a design spec?▼

Yes, Playwright MCP browser tools are required for UI spec checking. They provide the necessary functionality for browser navigation, screenshotting, DOM snapshotting, and computed-style evaluation against selectors and spec-defined properties.

How do I generate a bug report for UI mismatches found during spec verification?▼

To generate a bug report for UI mismatches, the verification process produces a structured markdown file with per-screen findings and artifacts. This actionable bug report is saved alongside captured screenshots in the outputs directory.

What is the best way to audit component structure across multiple web screens?▼

The best way to audit component structure is by performing a spec-driven screen verification that visits each screen, captures accessibility snapshots, and validates DOM structure against the design specification to identify structural discrepancies.

Related Skills

Explore More Design & Creative Skills→
kobogithubkobogithub

uiux-playwright

Automate UI interaction testing and user flow validation with Playwright.

Community
Advanced
CodePhobiiaCodePhobiia
8

bug-report

Create structured bug reports with repro steps and severity classification.

Community
Intermediate
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced