skills.rest
ak8458
ak8458COMMUNITY
Explore all skills by this author →
GitHub

Building Blocks

Create and refine AEM Edge Delivery blocks with JavaScript decoration and CSS styling.

Updated Jan 13, 2026
Search Tags:#testing#css#blocks#decoration#aem#edge-delivery#content-driven-development
One-click install
npx skills add https://github.com/ak8458/abc-boilerplate --skill building-blocks-ak8458
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Building Blocks
Source: https://github.com/ak8458/abc-boilerplate/tree/main/.skills/building-blocks
Command: npx skills add https://github.com/ak8458/abc-boilerplate --skill building-blocks-ak8458

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating and modifying AEM Edge Delivery blocks traditionally requires coordinating structure, decoration logic, styles, and testing across multiple steps; this skill consolidates guidance to streamline that work.

Core Features & Use Cases

  • Block creation and modification: establish file structure, scaffolding, and updated content models.
  • JavaScript decoration and CSS integration: implement DOM transformations and scoped styling following best practices.
  • CDD-aligned workflow and testing: enforce content-driven development patterns with validation and testing steps.

Quick Start

Provide the required test content URL and content model, then run through the block creation, decoration, styling, and testing steps.

Frequently Asked Questions about Building Blocks

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

FAQPage Schema
How do I create and style AEM Edge Delivery blocks from scratch?▼

To create AEM Edge Delivery blocks, you establish the file structure, implement DOM transformations with JavaScript decoration, and apply scoped CSS styling to align with your content model.

What is the best way to modify existing AEM Edge Delivery blocks without breaking content models?▼

Modifying existing AEM Edge Delivery blocks requires updating the content model, adjusting the JavaScript decoration logic, and refining the scoped CSS while validating changes through coordinated testing.

How does content-driven development work when building AEM Edge Delivery blocks?▼

Content-driven development for AEM Edge Delivery blocks works by defining the block structure and content model first, then implementing DOM decoration and styling to satisfy those structural requirements.

Do I need to provide a test content URL before generating AEM Edge Delivery block scaffolding?▼

Yes, you need to provide a test content URL and content model to initiate the block creation workflow, which then runs through decoration, styling, and validation steps.

Why does my AEM Edge Delivery block decoration logic fail to render correctly?▼

Block decoration fails when the JavaScript DOM transformations do not align with the defined content model or when scoped CSS styling is incorrectly applied, requiring validation and testing to resolve.

Related Skills

Explore More Software Engineering Skills→
adobe-summit2026-l613adobe-summit2026-l613

content-modeling

Standardize content modeling for author-friendly blocks in AEM Edge Delivery.

Official
Advanced
adobeadobe
45

Building Blocks

Create or modify AEM Edge Delivery blocks with JavaScript decoration and scoped CSS.

Official
Intermediate
samircaussamircaus

AEM Block Development

Implement AEM Edge Delivery blocks with decorate functions and consistent structure.

Community
Advanced
treevestreeves

Building Blocks

Automate creation and modification of AEM Edge Delivery blocks with JavaScript, CSS, tests, and documentation.

Community
Intermediate