skills.rest
aemgdc
aemgdcOFFICIAL
Explore all skills by this author →
WebsiteGitHub

diff

Compares a source prototype against a built page using Playwright layout and content probes.

1|Updated Jun 22, 2026
Search Tags:#qa#playwright#prototype#content validation#aem#eds#visual diff
One-click install
npx skills add https://github.com/aemgdc/aemdev --skill diff-aemgdc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diff
Source: https://github.com/aemgdc/aemdev/tree/main/.agents/skills/diff
Command: npx skills add https://github.com/aemgdc/aemdev --skill diff-aemgdc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) components.

What problem does it solve? After converting a design prototype into a built web page (e.g., an EDS/AEM site), subtle regressions slip through: stretched images, dropped CTAs, headings rendered in the wrong slot, or fonts silently falling back. Manual eyeballing misses these, and a single pixel-diff tool cannot see structural content errors. ## Core Features & Use Cases - Pixel/Layout Probe: Detects stretched images, dropped max-width wraps, blank renders, surface/ground color flips, and image-count gaps via computed-style metrics and screenshots. - Structural Content + Typography Probe: Extracts an ordered, role-classified inventory (headings, eyebrows, CTAs, body) from each page and diffs them to catch missing content, role swaps, and rendered-font forks using a width probe. - Stack-Agnostic Profiles: Ships with eds and generic profiles so the same engines work for AEM/EDS conversions or any prototype-vs-build fidelity check. - Use Case: After running a prototype-to-EDS conversion, run both probes against the prototype URL and the branch preview URL, fix every red structural flag, and re-run until the pass bar is met. ## Quick Start Ask the AI to run the diff skill comparing your prototype URL against the built page URL with the eds profile and report any layout or content mismatches.

Frequently Asked Questions about diff

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

FAQPage Schema
How do I check if my EDS build matches the prototype design?▼

Run both probes with the eds profile: visual-diff.mjs for layout issues (stretched images, flush-left text, blank renders) and content-diff.mjs for structural issues (missing CTAs, headings, role swaps). Pass both URLs as arguments and fix every red flag before shipping.

What is the difference between visual-diff and content-diff?▼

visual-diff reasons about pixels and geometry via computed-style metrics, catching stretch, blank renders, and color flips. content-diff extracts a role-classified text inventory and catches dropped or mis-slotted content that pixel checks cannot see. Run both for full coverage.

Can I use this diff tool for non-AEM projects?▼

Yes, use the generic profile with --profile generic. The comparison engines are framework-agnostic and work for any two rendered URLs, such as a Figma export versus a React build or a legacy page versus a rebuild.

Why does content-diff report a font fork when the build looks correct?▼

A font fork means matched lines render different typefaces, detected by a width probe. If the source shows a font name with a →sys suffix, the prototype never loaded that font and fell back to system, so the build self-hosting the intended fallback is correct, not a bug.

Why does visual-diff report a blank render on my page?▼

A blank render flag means the built page's main element is hidden, near-zero height, or textless, often caused by an unsatisfied body visibility gate or a failed harness load. Fix the render first because all other metrics are meaningless on a blank page.

When should I not use these diff probes?▼

Do not run them against a single static file with no JavaScript decoration, such as a raw .plain.html export, because undecorated markup has no roles to classify. Always compare against the decorated live, preview, or local harness URL.

Related Skills

Explore More Software Engineering Skills→
Focus-GTSFocus-GTS

block-scaffolder

Generate EDS block scaffolds with JavaScript decoration, scoped CSS, and authoring markup.

Official
Advanced
LerianStudioLerianStudio
205

linting-codebase

Analyze lint results and dispatch parallel AI agents to fix issues until checks pass.

Official
Advanced
aemsitesaemsites
1

code-review

Review AEM Edge Delivery Services code for quality, performance, and accessibility issues.

Official
Advanced
jmaglyjmagly
175

regression-visual

Detect visual and UI regressions via automated screenshot comparison and pixel-diff analysis.

Community
Advanced