From superpowers-sage
Verifies implemented work meets acceptance criteria by running Lando tests (PHPUnit, PHPCS, Yarn), Playwright visual comparisons to design references (Figma/Paper), accessibility checks, and Blade validation.
npx claudepluginhub codigodoleo/superpowers-sage --plugin superpowers-sageThis skill uses the workspace's default tool permissions.
Compare implemented sections against design reference using visual analysis.
Verifies frontend changes against spec acceptance criteria using Playwright MCP for browser automation. Automates spec intake, dev server/auth checks, and test runs.
Verifies UI component rendering via Storybook snapshots and Playwright browser automation including screenshots and accessibility trees. Use for visual checks.
Conducts 7-phase frontend design review with WCAG 2.1 AA accessibility checks, responsive testing, visual polish for PR reviews, UI audits, layout issues.
Share bugs, ideas, or general feedback.
Compare implemented sections against design reference using visual analysis.
$ARGUMENTS
Before any verification work, ToolSearch for mcp__plugin_playwright_playwright__browser_take_screenshot.
If NOT found:
⛔ Cannot verify without Playwright MCP.
Install: claude mcp add playwright -- npx -y @anthropic/playwright-mcp
Restart session after installing. Stop.
Do NOT proceed to reference source detection.
Priority order:
get_design_context + get_metadataget_computed_styles + get_node_infobatch_get(resolveVariables: true) + batch_get(readDepth: 4)get_screen
Use when the design MCP is active in the session — live reference is always more accurate than cached assets.docs/plans/<active-plan>/assets/section-*-spec.md — read “Verification Inputs” block to get url, selector, and ref pathdocs/plans/<active-plan>/assets/section-*.png — reference image for comparisonWhen the reference source is a design MCP and the component contains a grid with 2+ columns, offset positioning, or nested containers, fetch node geometry before capturing the implementation screenshot:
get_metadata — returns x, y, width, height for each direct childget_node_info — returns width + computed sizes for selected nodebatch_get(readDepth: 4) — returns layout children with dimensionsget_screen responseUse these values to confirm column widths (e.g., a 60/40 split) before comparing screenshots. Skipping this step on multi-column layouts is a common source of false MATCH verdicts.
Verification Inputs block from the spec file — extract url, selector, refplan.md frontmatter (viewport-width field, default 1440 if absent)mcp__plugin_playwright_playwright__browser_resize to {viewport-width} x 900 before navigatingurl: mcp__plugin_playwright_playwright__browser_navigateselector:
mcp__plugin_playwright_playwright__browser_take_screenshotselector fails (element not found), take full-page screenshot and note the differenceRead both reference and implementation images. Compare on these axes:
| Axis | Check |
|---|---|
| Layout | Grid structure, column count, alignment, flex direction |
| Content | Headlines match? Body text match? All items present? |
| Colors | Background, text, accent colors match? |
| Typography | Font size, weight, family approximately correct? |
| Spacing | Padding, margins, gaps reasonable? |
| Icons | Correct icon set? Right icon names? |
| Images | Placeholder or actual? Right aspect ratio? |
| Responsive | Does the layout adapt appropriately? |
This step is additive — it runs only when assets/section-{name}.styles.json exists (i.e., the source was paper). For all other sources, skip silently and proceed to step 4.
docs/plans/<active-plan>/assets/section-{name}.styles.jsonp-6, text-lg, bg-slate-900) — resolve to its real value via the project's Tailwind config (tailwind.config.js or @theme block in resources/css/app.css). For example, p-6 → padding: 1.5rem → 24px.p-[23px]) — capture the literal between brackets.### Style Spot-Check
✓ padding: design=24px, impl=p-6 (24px)
✗ font-size: design=18px, impl=text-base (16px) — DRIFT
✓ color: design=#0F172A, impl=bg-slate-900 (#0F172A)
⚠ gap: design=32px, impl=gap-[31px] — arbitrary value, near-match
### Style Drift subsection. The user decides whether to adjust.Output a structured report:
## Verification: {Section Name}
**Status:** MATCH | DRIFT | MISSING
### Comparison
| Axis | Status | Notes |
|---|---|---|
| Layout | {pass/drift} | {details} |
| Content | {pass/drift} | {details} |
| Colors | {pass/drift} | {details} |
| Typography | {pass/drift} | {details} |
| Spacing | {pass/drift} | {details} |
### Issues Found
- {specific issue with fix suggestion}
### Style Drift
{omit this section if source was not paper, or no drift found.
Otherwise list the ✗ and ⚠ lines from the spot-check.}
### Recommendation
{proceed / fix before continuing}
/building flowverification-before-completion for completion gate