Building Blocks

Create and modify AEM Edge Delivery blocks with JavaScript and CSS.

Updated Feb 10, 2026

Search Tags:#development #javascript #css #blocks #aem #cdd

Ready to run

npx skills add https://github.com/paolomoz/quasar --skill building-blocks-paolomoz

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Building Blocks
Source: https://github.com/paolomoz/quasar/tree/main/.skills/building-blocks
Command: npx skills add https://github.com/paolomoz/quasar --skill building-blocks-paolomoz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation and modification of AEM Edge Delivery blocks, ensuring adherence to Content Driven Development (CDD) principles and maintaining high code quality.

Core Features & Use Cases

New Block Creation: Guides through setting up new block files, structure, and boilerplate.
JavaScript Decoration: Implements DOM transformations and dynamic behavior.
CSS Styling: Applies scoped, responsive styles using best practices.
Use Case: When developing a new "testimonial" block for an AEM site, this Skill will help you create the necessary .js and .css files, implement the JavaScript to display testimonials fetched from content, and style them according to the project's design system.

Quick Start

Use the Building Blocks skill to create a new block named 'product-card' following the CDD process.

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 new AEM Edge Delivery block using Content Driven Development?▼

AEM Edge Delivery blocks are created by setting up new block files, defining the content structure, and applying JavaScript decoration and CSS styling following Content Driven Development principles. This ensures blocks remain reusable and maintainable.

What is the process for modifying an existing AEM block's JavaScript decoration?▼

Modifying AEM block JavaScript involves updating the DOM transformations and dynamic behavior within the existing block files. You need to understand the current content model and test content URLs to ensure the changes maintain reusability.

Do I need a test content URL to develop AEM Edge Delivery blocks?▼

A test content URL is required for AEM Edge Delivery block development. It provides the content model data necessary to implement JavaScript decoration and CSS styling accurately, ensuring the block renders correctly according to Content Driven Development principles.

How do I apply scoped and responsive CSS styles to AEM blocks?▼

AEM block CSS styling is applied using scoped selectors and responsive best practices within the block's CSS file. This approach ensures the styles remain maintainable and do not interfere with other components on the page.

What is the best way to structure AEM block files for reusability?▼

AEM block files should be structured by creating separate JavaScript and CSS files for each block, adhering to Content Driven Development principles. This ensures the blocks are reusable across different pages and maintainable throughout the project lifecycle.