skills.rest
salvamolaso
salvamolasoCOMMUNITY
Explore all skills by this author →
GitHub

Building Blocks

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
One-click install
npx skills add https://github.com/salvamolaso/movistar-poc-aem-eds --skill building-blocks-salvamolaso
Or copy as Structured Prompt for Agent▼
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

  1. Prepare your environment and prerequisites, including a named block and its content model.
  2. Create or modify the block folder structure (blocks/{block-name}/) and add the initial HTML.
  3. 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.

Related Skills

Explore More Software Engineering Skills→
initialyzeinitialyze

Building Blocks

Scaffold and refine AEM Edge Delivery blocks with standardized structure and styling.

Official
Advanced
ddttomddttom
2

Building Blocks

Create and update AEM Edge Delivery blocks with JavaScript decoration, CSS, and content models.

Community
Intermediate
pragyaP17pragyaP17

Using Content Driven Development

Orchestrate AEM Edge Delivery development with content-first requirements and test content modeling.

Community
Intermediate
finsilabsfinsilabs
44

content-commerce

Embed shoppable product cards with UTM revenue tracking in CMS platforms.

Official
Intermediate