nav-component-critique

To automate visual comparison for header navigation components during site migration, use Playwright MCP to capture source and migrated screenshots, generate similarity scores, and output prioritized CSS fixes. This removes manual screenshot comparison and guesswork from the migration workflow.

The best way to generate CSS fixes for mismatched navigation components is to capture visual comparison scores and a structured differences list, then apply targeted fixes to header.css and header.js. The system iterates automatically until the component reaches at least 95% visual similarity.

Yes, you need Playwright MCP to capture screenshots and interact with DOM elements, and an existing style-register.json file to record selectors, interactions, and status. You also need the source site and the migrated site accessible at http://localhost:3000.

Yes, you can capture dynamic states like hover and click for mobile menu panels during migration verification. The Skill supports per-component capture with interaction support for dynamic states across desktop and mobile key components, plus optional runs for skipped components.

Navigation components fail visual similarity checks after migration due to CSS and JS discrepancies between the source and migrated sites. The Skill identifies these differences using screenshot comparisons and outputs a critique-report.json with a remediation loop to apply fixes until similarity reaches 95%.

When validating header logo and CTA buttons with visual comparison tools, the outputs include source.png, migrated.png, and critique-report.json. These files provide audit artifacts and drive automated remediation by recording the required selectors, interactions, and visual similarity scores.