Building Blocks

Name: Building Blocks
Availability: InStock
Author: salvamolaso

Create and modify AEM Edge Delivery blocks with Content Driven Development.

Updated Nov 17, 2025

Search Tags:#javascript #css #AEM #CDD #edge-delivery #block-decoration #block-creation

Ready to run

npx skills add https://github.com/salvamolaso/movistar-poc-aem-eds --skill building-blocks-salvamolaso

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Building Blocks
Source: https://github.com/salvamolaso/movistar-poc-aem-eds/tree/main/.skills/building-blocks
Command: npx skills add https://github.com/salvamolaso/movistar-poc-aem-eds --skill building-blocks-salvamolaso

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams create and modify AEM Edge Delivery blocks following Content Driven Development (CDD), ensuring consistent block scaffolding, decoration, and styling workflows.

Core Features & Use Cases

Block scaffolding and modification: standardizes the structure for new blocks or updates to existing ones.
JavaScript decoration: implements DOM transformations to render authored content into interactive experiences.
CSS styling: applies scoped, responsive styles in line with guidelines.
Content modeling guidance: aligns blocks with content models and validation patterns.
Use Case: a developer needs to add a new reusable block with required content model and test content, then decorate and style it to meet accessibility standards.

Quick Start

Prepare your environment and prerequisites, including a named block and its content model.
Create or modify the block folder structure (blocks/{block-name}/) and add the initial HTML.
Implement the decorate function in the block's JavaScript, add CSS styles, and link any references or assets as needed.

Frequently Asked Questions about Building Blocks

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

FAQPage Schema

How do I create a reusable block for AEM Edge Delivery?▼

Create a reusable AEM Edge Delivery block by scaffolding a block folder under blocks/{block-name}/, adding initial HTML, implementing a decorate function in JavaScript to transform authored content, applying CSS styles, and organizing optional scripts/, references/, and assets/ directories. Include SKILL.md frontmatter with block name and description.

What is Content Driven Development (CDD) and how does it apply to block creation?▼

Content Driven Development (CDD) is an approach that aligns block structure and decoration with content models and validation patterns. It ensures consistent scaffolding, JavaScript decoration, and CSS styling workflows so authored content renders correctly into interactive, accessible experiences across Edge Delivery blocks.

Can I style AEM Edge blocks with scoped CSS and maintain responsive design?▼

Yes, AEM Edge Delivery blocks support scoped, responsive CSS styling applied during the block decoration phase. Styles are managed within the block's CSS file and work alongside JavaScript decoration to render authored content while meeting accessibility standards.

How do I update an existing AEM Edge Delivery block?▼

Modify an existing block by updating its HTML structure, revising the decorate function logic to handle new content transformations, refreshing CSS styles, and adjusting content models as needed. The block lifecycle supports both new creation and iterative updates following the same scaffolding and decoration patterns.

What happens during the JavaScript decoration phase of block development?▼

JavaScript decoration implements DOM transformations that convert authored content into interactive experiences. The decorate function processes the block's HTML and applies dynamic behavior, linking references and assets on demand to render the final user-facing block output.

Do I need to define a content model before building an AEM Edge block?▼

Content modeling is recommended before block creation to align block structure with how authors will compose content and to establish validation patterns. Prepare your named block and its content model as part of environment setup, then structure the block folder and decoration logic to support that model.