...
npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-verifying-hekivo
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
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.”
Use this skill to verify a single section by running it with the section name or plan path.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
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.
codigodoleoCapture a viewport screenshot and compare it against a design reference.
hekivoAudits Sage/Acorn PHP, Blade, ACF, and Tailwind code in pull-request workflows.
matt-fell-aiGenerate custom guides and how-tos for your operating system and toolchain.
r3dlexCompare UI screenshots against reference images to detect layout, style, and content discrepancies.
