AEM Frontend Specialist Copilot

Builds production-ready Adobe Experience Manager components using HTL templates, Tailwind CSS, and Figma-to-code design token workflows.

When to Use This Agent

Choose this agent when you need to:

• Implement AEM components with HTL templates integrating Sling Models and Core WCM Components
• Convert Figma designs into AEM markup using a BEM + Tailwind CSS hybrid architecture
• Configure ClientLib bundles, component dialogs, and responsive layouts for AEM authoring

Consider alternatives when:

• You are building a headless CMS frontend consuming AEM via GraphQL without HTL rendering
• Your project uses AEM SPA Editor with React or Angular rather than server-side HTL

Quick Start

Configuration

Copy
name: aem-frontend-specialist-copilot
type: agent
category: web-tools

Example Invocation

Copy
claude agent:invoke aem-frontend-specialist-copilot "Create a responsive hero component with background video and CTA buttons"

Example Output

Created: ui.frontend/src/components/hero/hero.html
  - data-sly-resource for Core Image v3
  - BEM: .cmp-hero, .cmp-hero__title, .cmp-hero__actions
  - Tailwind: flex flex-col lg:flex-row min-h-screen
Created: ui.frontend/src/components/hero/hero.pcss
Updated: ui.apps/.../hero/_cq_dialog/.content.xml
Build: mvn clean install -PautoInstallSinglePackage

Core Concepts

AEM Component Stack

Aspect	Details
HTL (Sightly)	Server-side template language with context-aware escaping and data-sly directives
Sling Models	Java POJOs providing structured data to HTL via OSGi injection
ClientLibs	Dependency-managed CSS/JS bundles organized by category with embed strategies
Core Components	Adobe-maintained base components (Image v3, Button, Container) extensible via sling:resourceSuperType
Dialog System	Granite UI authoring dialogs with fieldsets, pathbrowsers, and multifield configs

AEM Frontend Architecture

+-------------------+     +-------------------+     +------------------+
|  Figma Design     |---->|  Design Token     |---->|  HTL Template    |
|  (MCP Server)     |     |  Mapping          |     |  + BEM Classes   |
+-------------------+     +-------------------+     +------------------+
                                                          |
         +-------------------+     +-------------------+  |
         |  AEM Author       |<----|  ClientLib         |<-+
         |  Experience       |     |  Bundle (CSS/JS)   |
         +-------------------+     +-------------------+

Configuration

Parameter	Type	Default	Description
tailwind_version	string	"4.0"	Tailwind CSS version for utility class generation
core_components_version	string	"2.25"	AEM Core WCM Components version for extension
breakpoints	object	{md:768, lg:1024}	Responsive breakpoints matching the design system
figma_mcp_enabled	boolean	false	Enable Figma MCP server for automated token extraction
postcss_reference	string	"../../site/main.pcss"	Path to main PostCSS file for @reference directives

Best Practices

1. Map Tokens by Pixel Values, Not Names - Match exact pixel dimensions and font families from Figma rather than assuming token names correspond to classes. Validate that the CSS custom property produces the correct output before using it.

2. Extend Core Components First - Check if an existing Core Component can be extended with sling:resourceSuperType before building custom. This inherits ongoing security patches and feature updates from Adobe.

3. Reserve PostCSS for Complex Patterns - Apply Tailwind utilities directly in HTL for standard styling. Limit PostCSS to pseudo-element content, keyframe animations, and complex modifier chains unreadable as inline utilities.

4. Guard with data-sly-test - Wrap every optional content block with data-sly-test to prevent empty wrappers. Include placeholder templates via data-sly-call so authors see visual cues for unpopulated fields.

5. Separate JS Hooks from Styling - Attach JavaScript behavior to data-* attributes like data-component="carousel" rather than CSS classes. This prevents styling refactors from breaking interactive functionality.

Common Issues

1. HTL Context Escaping Errors - Wrong context (e.g., context='text' for HTML content) strips markup. Use context='html' for rich text, context='text' for plain strings, and context='attribute' for dynamic attributes.

2. ClientLib Category Conflicts - Same category without proper dependency ordering causes CSS specificity collisions. Follow projectname.components.componentname convention with explicit dependencies.

3. Dialog Validation Gaps - Dialogs without validation let authors save broken states. Add Granite UI validation attributes like required and custom validators to catch errors at authoring time.