# Aem Template Page Structure

> AEM Template & Page Structure

- Skill: `gabrielmoreira/aem-template-page-structure` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gabrielmoreira/aem-template-page-structure`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/aem-template-page-structure/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/gabrielmoreira/aem-template-page-structure

---

# AEM Template & Page Structure

## Purpose
Design and implement editable templates, page components, and structural policies that define the authoring experience and content hierarchy in AEM.

## When to Use (Triggers)
- User mentions "create a template," "page template," or "page structure"
- References to editable templates, template policies, or page properties
- File paths containing `/conf/*/settings/wcm/templates/` or `/conf/*/settings/wcm/policies/`
- Questions about page component hierarchy, structural components, or layout containers
- Requests involving initial content, template types, or template thumbnails

## Core Capabilities
- Create editable templates with structure, initial content, and policies
- Define page component hierarchy with proper sling:resourceSuperType chains
- Configure layout container policies and allowed components
- Implement responsive grid configurations and breakpoints
- Set up page properties dialogs with custom tabs

## Domain Knowledge Required
### Technical Foundation
- AEM editable template editor and its three layers (structure, initial content, policies)
- Page component inheritance chain (project page → core page → foundation page)
- Responsive grid system and layout mode configuration
- JCR node types: cq:Template, cq:Page, cq:PageContent

### AEM-Specific Context
- Template types vs. template instances in /conf
- Content policies and their assignment to layout containers
- Allowed component filtering at template, policy, and container levels
- Page property inheritance and `cq:hierarchyNode` behavior
- Locked vs. unlocked components in template structure

## Implementation Approach
### Step 1: Template Type Definition
Define the blueprint that templates are created from.
- Create template type under `/conf/<project>/settings/wcm/template-types/`
- Define structure node with required structural components
- Set thumbnail and description for template picker

### Step 2: Page Component Setup
Create the page-level component with proper inheritance.
- Define page component extending Core Page Component
- Configure `customheaderlibs.html` and `customfooterlibs.html`
- Set up page properties dialog with project-specific tabs
- Define body.html with responsive grid containers

### Step 3: Template Creation
Build the actual template with structure and policies.
- Create template under `/conf/<project>/settings/wcm/templates/`
- Define structural components (header, footer, navigation)
- Configure locked components vs. author-editable areas
- Set initial content for new page instances

### Step 4: Policy Configuration
Assign component policies to define allowed behaviors.
- Create policies under `/conf/<project>/settings/wcm/policies/`
- Map policies to template containers
- Configure allowed components lists per container
- Define style system options per component policy

### Step 5: Responsive Configuration
Set up breakpoints and responsive grid behavior.
- Configure responsive grid columns (default 12)
- Define breakpoints (phone, tablet, desktop)
- Set responsive policy for layout container
- Configure responsive behavior for structural components

## Quality Checklist
- [ ] Template appears in page creation wizard with correct thumbnail
- [ ] All structural components are locked and non-deletable by authors
- [ ] Allowed components properly filtered per content area
- [ ] Page properties dialog includes all required custom tabs
- [ ] Responsive grid functions correctly across breakpoints
- [ ] Template supports all required page types (content, landing, article)
- [ ] Initial content provides sensible defaults for new pages
- [ ] Page component inherits correctly from Core Components page

## Related Skills
- aem-component-development (components used in templates)
- aem-content-strategy-architecture (content model drives templates)
- aem-msm-multi-site-manager (templates across sites)

## Example Use Cases
1. **Multi-Brand Template System:** Create a template hierarchy supporting 5 brands with shared structural components (global header/footer) but brand-specific policy configurations for allowed components and style options.
2. **Article Page Template:** Design a long-form article template with fixed hero area, flexible body content zone with restricted component palette, and structured sidebar for related content.
3. **Landing Page Template:** Build a marketing-focused template with full-width sections, no navigation constraints, and pre-configured initial content blocks for rapid page creation.

## Notes
- Editable templates are stored under `/conf/`, not `/apps/` — they are content, not code
- Always test template changes on a content page before deploying to production
- Template policies are inherited — child pages get parent template policies unless overridden
- AEM Cloud Service does not support static (legacy) templates; always use editable templates