design-verify-web
CommunitySpot design layout drift with Playwright diffs.
Authorjoi-fairshare
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Prevents unnoticed visual drift by comparing live web implementations to approved mockups, catching layout, typography, and color discrepancies before release approvals.
Core Features & Use Cases
- Automated Playwright capture: grabs mobile, tablet, and desktop screenshots via the browser lock workflow to keep verification consistent.
- Mockup-aware diffing: diff results are generated against stored mockup baselines with pixel percentages, diff images, and prioritized remediation tips.
- Use Case: Run before a UI handoff to prove the implementation matches the design language and to surface specific fixes in case of regressions.
Quick Start
Use design-verify-web to compare the live dashboard implementation with the approved mockup baseline.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 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: design-verify-web Download link: https://github.com/joi-fairshare/agentic-workflow/archive/main.zip#design-verify-web Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.