superpowers-sage:verifying

Name: superpowers-sage:verifying
Availability: InStock
Author: Hekivo

...

13|Updated Mar 19, 2026

Search Tags:#accessibility #Playwright #WordPress #Tailwind #visual verification #design drift #Blade output

Ready to run

npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-verifying-hekivo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: superpowers-sage:verifying
Source: https://github.com/hekivo/superpowers-sage/tree/main/skills/verifying
Command: npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-verifying-hekivo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents implemented WordPress UI from drifting away from the approved design by verifying layout, content, typography, spacing, and colors before you consider a section “done.”

Core Features & Use Cases

Playwright-based visual comparison: Captures implementation screenshots and compares them to plan or design references.
Design-source priority & fallbacks: Uses live design MCP geometry when available, otherwise falls back to spec assets or user-provided expectations.
Style spot-check for paper sources: When paper style metadata exists, it detects drift by translating Tailwind classes into computed values and reporting mismatches.

Quick Start

Use this skill to verify a single section by running it with the section name or plan path.

Frequently Asked Questions about superpowers-sage:verifying

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

FAQPage Schema

How do I verify a WordPress section matches the original design spec?▼

To verify a WordPress section against a design spec, you can use Playwright screenshots to visually compare Blade-rendered UI output with reference images. This validates layout, content, typography, spacing, and color to detect any design drift.

How do I detect design drift in Tailwind-styled Blade templates?▼

Detecting design drift in Tailwind-styled Blade templates involves translating Tailwind classes into computed values and comparing them against paper style metadata. This spot-check identifies mismatches in spacing, typography, and colors before finalizing UI sections.

Can I use Playwright with WordPress to capture UI screenshots for visual verification?▼

Yes, you can use Playwright with WordPress to capture UI screenshots for visual verification. The Playwright MCP tool captures implementation screenshots and compares them against live design geometry, spec assets, or user-provided reference expectations.

What is the best way to check implemented WordPress UI against live design metadata?▼

The best way to check implemented WordPress UI is by resolving live design MCP geometry and comparing it directly against captured Playwright screenshots. If geometry is unavailable, the verification falls back to spec assets or user-provided reference expectations.

Do I need the Playwright MCP tool to generate a WordPress visual verification report?▼

Yes, you need the Playwright MCP tool available to capture implementation screenshots and generate a structured MATCH, DRIFT, or MISSING visual verification report for your WordPress sections.

Why does my implemented WordPress UI drift away from the approved design?▼

Implemented WordPress UI drifts away from approved designs due to unverified changes in layout, content, typography, spacing, and colors during development. Visual comparison against design references catches this drift before a section is considered done.