nav-component-critique

What problem does it solve?

This Skill automates targeted visual validation of individual header navigation components during site migrations, removing manual screenshot comparison and guesswork by producing similarity scores, difference reports, and actionable CSS/JS fixes.

Core Features & Use Cases

• Per-component capture of source and migrated screenshots with Playwright MCP and interaction support (hover, click) for dynamic states.
• Visual comparison scoring with a structured differences list, prioritized CSS fixes, remediation loop, and updates to style-register.json until each component reaches ≥95% similarity.
• Orchestrator-driven parallel execution for four key components plus optional runs for skipped components; outputs include source.png, migrated.png, and critique-report.json for audit and automated remediation.
• Use cases: validating header logo, CTA buttons, nav links row, and mobile menu panels during migration verification; running targeted fixes in header.css/header.js and re-scoring automatically.

Quick Start

Critique nav component row-0-logo to capture source and migrated screenshots, compare them, generate CSS fixes, and iterate until similarity is at least 95%.