Verified: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

Ready to run

npx skills add https://github.com/ElvinOuyang/claude-skill-collection --skill web-ui-spec-checker

💬 Prompt for ChatGPT / Claude Chat▼

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.