skills.rest
aemdemos
aemdemosOFFICIAL
Explore all skills by this author →
GitHub

validation-agent

Compare implemented navigation structure against source screenshots and output strict JSON validation results.

Updated Mar 16, 2026
Search Tags:#validation#navigation#quality-assurance#visual-diff#megamenu#page-critique
One-click install
npx skills add https://github.com/aemdemos/summit-dsg --skill validation-agent-aemdemos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: validation-agent
Source: https://github.com/aemdemos/summit-dsg/tree/main/.agents/skills/excat-navigation-orchestrator/validation-agent
Command: npx skills add https://github.com/aemdemos/summit-dsg --skill validation-agent-aemdemos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill compares the implemented navigation and header structure against source screenshots to detect visual and interaction mismatches and prevent silent, incorrect deployments.

Core Features & Use Cases

  • Compares implemented headers and full pages to source screenshots using orchestration with page-critique or block-critique.
  • Detects row, spacing, font, interaction, and megamenu grouping mismatches and extracts a similarityScore and structured mismatch list.
  • Produces strict JSON output that signals PASS/FAIL and whether the orchestrator should trigger a re-analysis loop for migration quality assurance.

Quick Start

Validate the migrated header by providing sourceHeaderScreenshot, migratedPageUrl, and desktopMapping to the validation-agent.

Frequently Asked Questions about validation-agent

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

FAQPage Schema
How do I validate migrated navigation against source screenshots?▼

Validate migrated navigation by supplying a source header screenshot, migrated page URL, and desktop mapping. The agent compares the structures, detects visual mismatches, and outputs strict JSON with pass/fail status and a similarity score.

What is visual diff validation for website migration quality assurance?▼

Visual diff validation for migration quality assurance compares implemented headers and pages against source screenshots. It detects row, spacing, font, and interaction mismatches to prevent silent, incorrect deployments.

How do I detect megamenu grouping mismatches after a header migration?▼

Detect megamenu grouping mismatches by applying the validation agent to migrated page headers. It compares the implemented structure against source screenshots and generates a structured mismatches list within its JSON output.

Does the validation agent support mobile navigation mapping?▼

Yes, the validation agent supports optional mobile mapping. Along with desktop mapping and source screenshots, you can include mobile mappings to validate responsive navigation structures.

How do I trigger a re-analysis loop for failed navigation validation?▼

Trigger a re-analysis loop using the recommendReAnalysis flag in the validation output. When the agent detects navigation mismatches and sets this boolean to true, the orchestrator can initiate the loop.

What JSON output fields are generated by navigation validation?▼

The navigation validation generates strict JSON output including pass/fail status, similarityScore, boolean match flags, a mismatches list, critiqueReportPath, and recommendReAnalysis to signal re-analysis loops.

Related Skills

Explore More Software Engineering Skills→
aemdemosaemdemos

nav-component-critique

Compare header navigation screenshots and generate prioritized CSS fixes.

Official
Advanced
chekoschekos
5

linkedin-post-crafter

Generate LinkedIn posts with hooks, bodies, CTAs, and hashtags.

Community
Basic
dual-devs0dual-devs0
1

critique

Evaluate UX designs on visual hierarchy, information architecture, and emotional resonance.

Community
Advanced
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced