skills.rest
Takazudo
TakazudoCOMMUNITY
Explore all skills by this author →
Website𝕏@TakazudoGitHub

verify-ui

Compare computed CSS styles against user-specified UI requirements.

Updated Apr 3, 2026
Search Tags:#ui#css#playwright#verify#headless#tests#styles
One-click install
npx skills add https://github.com/Takazudo/zudo-test-wisdom --skill verify-ui-takazudo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: verify-ui
Source: https://github.com/Takazudo/zudo-test-wisdom/tree/main/.claude/skills/verify-ui
Command: npx skills add https://github.com/Takazudo/zudo-test-wisdom --skill verify-ui-takazudo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright-core, playwright, and includes scripts (resource) components.

What problem does it solve?

Verify that CSS/UI changes actually match what was requested.

Core Features & Use Cases

  • Translate user requests into verifiable CSS properties (e.g., border, alignment, visibility) and confirm them via computed styles.
  • Guard against confirmation bias by focusing on the exact user-specified requirement, not generic UI checks.
  • Use with a headless browser to capture and compare computed properties across viewports and themes.

Quick Start

Run the verification script against the target element to compare its computed styles with the expected values.

Frequently Asked Questions about verify-ui

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

FAQPage Schema
How do I verify CSS changes against specific requirements using a headless browser?▼

You can verify CSS changes by running a script with a headless browser to read computed styles and compare them against expected values, exposing any mismatches in a structured report.

Can I check computed styles across different breakpoints and themes?▼

Yes, the verification script captures and compares computed CSS properties across multiple viewports and themes, ensuring precise style validation for borders, alignment, spacing, and color.

What is the best way to test UI updates deterministically without visual inspection?▼

Deterministic UI testing translates user requests into verifiable CSS properties and confirms them via computed styles, guarding against confirmation bias by focusing on exact requirements.

Do I need Playwright to run headless style checks for frontend changes?▼

Yes, the script depends on Playwright and playwright-core to launch a headless browser, read computed CSS styles, and generate a structured mismatch report.

How do I automate QA workflows for validating spacing and responsiveness in CSS?▼

Automate QA workflows by running the verification script against target elements to compare computed styles like spacing and responsiveness with expected values across breakpoints.

Why does my UI verification test not catch style mismatches effectively?▼

Generic UI checks may miss mismatches; focusing the verification on exact user-specified CSS properties via computed styles ensures precise alignment, border, and color validation.

Related Skills

Explore More Software Engineering Skills→
tusosostusosos

web-scraper

Extract data from web pages using CSS selectors and output JSON or CSV.

Community
Advanced
wagnerra23wagnerra23

module-grades-gate

Detect module grade score regressions and unapproved new modules during PR checks.

Community
Advanced
Hack23Hack23
235

playwright-ui-testing

Automate cross-browser UI tests with Playwright for the CIA platform.

Official
Intermediate
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate