# Aem Component Development

> AEM Component Development

- Skill: `gabrielmoreira/aem-component-development` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gabrielmoreira/aem-component-development`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/aem-component-development/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/gabrielmoreira/aem-component-development

---

# AEM Component Development

## Purpose
Enable the creation, customization, and maintenance of AEM components following best practices for HTL templating, Sling Models, and the component dialog framework.

## When to Use (Triggers)
- User mentions "create a component," "build a component," or "custom component"
- References to HTL, Sling Models, component dialogs, or `.content.xml`
- File paths containing `/apps/*/components/` or `/ui.apps/`
- Questions about component inheritance, proxy components, or resource types
- Requests involving Coral UI or Granite UI dialog fields

## Core Capabilities
- Create complete AEM components with HTL templates, Sling Models, and dialog definitions
- Implement component inheritance and proxy component patterns
- Design responsive component dialogs using Coral UI 3 / Granite UI
- Configure component policies and design dialogs for template editor
- Build composite components using container patterns and data-sly-resource

## Domain Knowledge Required
### Technical Foundation
- HTL (HTML Template Language) syntax including data-sly-use, data-sly-list, data-sly-test, data-sly-resource
- Sling Model injection annotations (@Model, @Inject, @ValueMapValue, @ChildResource)
- JCR node structure and content repository hierarchy
- Maven module structure for ui.apps, core, and ui.frontend

### AEM-Specific Context
- Component resource type resolution and sling:resourceType
- AEM Core Components as foundation (extending vs. proxying)
- Component policies in editable templates
- Client library categories (clientlibs) for CSS/JS bundling
- Experience Fragment and Content Fragment component patterns

## Implementation Approach
### Step 1: Requirements Analysis
Determine component type, authoring needs, and rendering requirements.
- Identify data model (properties, child resources, references)
- Determine dialog complexity (single tab vs. multi-tab, nested multifields)
- Assess if Core Component extension is appropriate

### Step 2: Sling Model Creation
Build the backend model with proper annotations and business logic.
- Define model interface with @Model annotation and adaptables
- Implement injection strategies (@ValueMapValue, @ChildResource, @OSGiService)
- Add @PostConstruct initialization logic
- Include null-safety and default values

### Step 3: HTL Template Development
Create the rendering template with proper structure and semantics.
- Use data-sly-use to bind Sling Model
- Implement conditional rendering with data-sly-test
- Handle empty/unconfigured states with placeholder messaging
- Apply BEM CSS naming conventions

### Step 4: Dialog Definition
Build the authoring dialog using Granite UI components.
- Define .content.xml with cq:dialog node structure
- Configure field types (textfield, pathfield, multifield, select)
- Add field validation (required, pattern, min/max)
- Implement show/hide logic for conditional fields

### Step 5: Client Libraries
Set up CSS and JS bundling for the component.
- Create clientlib folder with css.txt and js.txt
- Define appropriate categories for loading strategy
- Implement component-scoped styles

## Quality Checklist
- [ ] Component renders correctly in author and publish mode
- [ ] Dialog saves all properties to JCR correctly
- [ ] Sling Model handles null/missing data gracefully
- [ ] Component works in Experience Fragments and Content Fragments
- [ ] Accessibility: proper ARIA attributes and semantic HTML
- [ ] Responsive behavior validated across breakpoints
- [ ] Component policy configured for template editor
- [ ] WCM mode handling (edit, preview, disabled)

## Related Skills
- aem-template-page-structure (templates consume components)
- aem-unit-integration-testing (testing Sling Models)
- aem-frontend-build-pipeline (CSS/JS compilation)

## Example Use Cases
1. **Hero Banner Component:** Create a full-width hero with background image, title, description, and CTA button with configurable link, styling variants, and responsive image handling via Dynamic Media.
2. **Product Card Grid:** Build a container component that renders product cards from Content Fragment references with configurable grid layout (2/3/4 columns) and lazy-loading.
3. **Tabbed Content Component:** Implement a container with tab navigation, drag-and-drop authoring of tab panels, and accessible keyboard navigation.

## Notes
- Always extend or proxy AEM Core Components before building from scratch
- AEM Cloud Service requires all components to be editable-template compatible (no static templates)
- Use `cq:isContainer` property for components that allow child component insertion
- Sling Models should target the interface, not the implementation class, for testability