skills.rest
0xrafasec
0xrafasecCOMMUNITY
Explore all skills by this author →
Website𝕏@0xrafasecGitHub

verify-design

Compare UI against Paper design references using Playwright and fix mismatches in place.

9|2|Updated Apr 8, 2026
Search Tags:#Playwright#UI consistency#UI fixes#Paper design#fidelity checks
One-click install
npx skills add https://github.com/0xrafasec/ai-workflow --skill verify-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: verify-design
Source: https://github.com/0xrafasec/ai-workflow/tree/main/skills/verify-design
Command: npx skills add https://github.com/0xrafasec/ai-workflow --skill verify-design

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates UI consistency checks by comparing the current UI against Paper design references, ensuring fidelity across different viewports and fixing mismatches in place.

Core Features & Use Cases

  • Real-Browser Fidelity Checks: Compares the UI with Paper design references using Playwright to ensure desktop and mobile viewports are consistent.
  • Fix-In-Place Mismatches: Directly fixes UI mismatches without generating reports, allowing users to address issues in the same session.
  • Use Case: Ideal for developers and designers who need to maintain UI consistency as the application evolves.

Quick Start

Run /verify-design to automatically check and fix UI mismatches against Paper design references.

Frequently Asked Questions about verify-design

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

FAQPage Schema
How do I automate UI consistency checks against Paper design references?▼

Automate UI consistency checks by using Playwright to compare your current UI against Paper design references across desktop and mobile viewports, directly fixing mismatches in place.

Do I need Playwright to perform real-browser fidelity checks for my UI?▼

Yes, Playwright is required to perform real-browser fidelity checks, enabling the Skill to render and verify your UI against Paper design references across different viewports.

Can I fix UI mismatches in place during a Playwright testing session?▼

Yes, you can fix UI mismatches in place during a Playwright testing session, directly applying corrections without generating intermediate reports or leaving the development environment.

What is the best way to maintain UI fidelity across different viewports?▼

The best way to maintain UI fidelity is to run automated real-browser checks using Playwright to compare your evolving application against Paper design references across desktop and mobile viewports.

Are UI consistency checks limited to specific development environments?▼

UI consistency checks are applicable in development environments where maintaining design fidelity is critical, and require applicable editing tools for fix-in-place actions alongside Playwright.

Related Skills

Explore More Software Engineering Skills→
Spectra29115Spectra29115

testing

Execute automated end-to-end UI tests with Playwright and capture screenshots.

Community
Intermediate
RYN6666999RYN6666999

major-change-autogit-guard

Route major code changes into pending decision queues for human approval.

Community
Intermediate
tedtv1007-ctrltedtv1007-ctrl

playwright-testing

Automate browser-based end-to-end testing with Playwright.

Community
Advanced
r3dlexr3dlex
2

visual-verdict

Compare UI screenshots against reference images to detect layout, style, and content discrepancies.

Community
Intermediate