aem-fe-verify

Screenshot AEM components in wcmmode=disabled and compare against Figma references.

6|3|Updated Mar 21, 2026

Search Tags:#mcp #aem #frontend-testing #qa-automation #visual-verification #chrome-devtools-mcp #wcmmode

Ready to run

npx skills add https://github.com/easingthemes/dx-aem-flow --skill aem-fe-verify

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: aem-fe-verify
Source: https://github.com/easingthemes/dx-aem-flow/tree/main/plugins/dx-aem/skills/aem-fe-verify
Command: npx skills add https://github.com/easingthemes/dx-aem-flow --skill aem-fe-verify

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visually verify a component's frontend rendering on local AEM — screenshots the component in wcmmode=disabled, compares against Figma reference or requirements using multimodal vision, and fixes gaps in a loop. Use after build deploys to local AEM. Trigger on "verify frontend", "visual verify", "fe verify", "check component rendering", "compare AEM with figma".

Core Features & Use Cases

Visual verification of a component's render against a Figma reference or requirements.
Iteration loop: identifies gaps, applies fixes, rebuilds, and re-verifies up to 3 iterations.
Local AEM integration: requires AEM MCP and Chrome DevTools MCP for end-to-end validation.

Quick Start

Trigger on a component name to start a visual verification cycle against your local AEM instance.

Frequently Asked Questions about aem-fe-verify

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

FAQPage Schema

How do I verify AEM frontend rendering against a Figma reference locally?▼

Yes, you can automate QA for AEM components by triggering this Skill to capture screenshots in wcmmode=disabled and compare them against design requirements. It runs an automated iteration loop to identify visual gaps, apply fixes, rebuild, and re-verify rendering up to three times.

Do I need Chrome DevTools MCP and AEM MCP to check component rendering?▼

Yes, you need both AEM MCP and Chrome DevTools MCP to check component rendering. These dependencies are required to capture screenshots from your local AEM instance, compare the visual output against references, and report visual differences automatically.

What is the best way to compare AEM components with Figma requirements during local development?▼

The best way to compare AEM components with Figma requirements is using multimodal vision to evaluate screenshots taken in wcmmode=disabled. This approach visually verifies the frontend rendering directly against the Figma reference during your local development cycle.

How many iterations does the visual verification loop apply when fixing frontend gaps?▼

The visual verification loop applies up to three iterations to fix frontend gaps. During each iteration, it identifies visual differences, applies the necessary fixes, rebuilds the local AEM instance, and re-verifies the component rendering against the reference.

Can I use this visual verification for build validation and regression checks?▼

Yes, you can use this visual verification for build validation and regression checks across iterations. It is specifically designed for component-level QA during local development, ensuring that frontend rendering remains consistent after deploying builds to your local AEM instance.