Skills
.Work. You
Rest

web-ui-spec-checker

Community

Verify web UI matches the design spec.

Design & Creative#playwright#visual regression#ui verification#bug reporting#design spec#accessibility snapshot#computed styles
AuthorElvinOuyang
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: web-ui-spec-checker
Download link: https://github.com/ElvinOuyang/claude-skill-collection/archive/main.zip#web-ui-spec-checker

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.