skills.rest
aemsites
aemsitesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

building-blocks

Implement AEM Edge Delivery Services block code with JavaScript decoration and CSS styling.

1|6|Updated Feb 10, 2026
Search Tags:#frontend#javascript#css#blocks#aem#edge-delivery#content-driven-development
One-click install
npx skills add https://github.com/aemsites/summit-portal --skill building-blocks-aemsites
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-blocks
Source: https://github.com/aemsites/summit-portal/tree/main/skills/aem/edge-delivery-services/building-blocks
Command: npx skills add https://github.com/aemsites/summit-portal --skill building-blocks-aemsites

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide removes uncertainty and ad-hoc patterns when implementing AEM Edge Delivery blocks and related core changes by providing a clear, developer-focused workflow, patterns, and testing requirements so implementations are consistent, performant, and maintainable.

Core Features & Use Cases

  • Block Development: Create or modify block directories with JavaScript decoration and scoped CSS to turn authored content into interactive UI.
  • Core Functionality Changes: Safely update scripts.js, styles.css, lazy-styles.css, or delayed.js when blocks require shared utilities or global styles.
  • Integrated Testing: Validate changes using the testing-blocks guidance and verify with live test content URLs and the running dev server.
  • Use Case: Add a new image-carousel block that reuses platform picture elements, implements lazy loading in scripts.js, and introduces responsive styles using the project's CSS variables.

Quick Start

Implement a new or modified AEM Edge Delivery block following the CDD workflow and run testing-blocks after completing decoration and styling.

Frequently Asked Questions about building-blocks

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

FAQPage Schema
How do I implement a new AEM Edge Delivery block with JavaScript and CSS?▼

To implement an AEM Edge Delivery block, you create or modify a block directory applying JavaScript decoration conventions and scoped CSS custom properties to turn authored content into interactive UI components.

What is the content-driven-development workflow for styling AEM Edge blocks?▼

The content-driven-development workflow for styling AEM Edge blocks involves applying scoped CSS custom properties and block-specific styling during the implementation step to ensure consistent, performant, and maintainable UI components.

Can I modify core files like scripts.js and styles.css for AEM Edge Delivery block development?▼

Yes, you can safely update core files like scripts.js, styles.css, lazy-styles.css, and delayed.js when AEM Edge Delivery blocks require shared utilities or global styles.

How do I test AEM Edge Delivery blocks during front-end development?▼

You test AEM Edge Delivery blocks by following the testing-blocks workflow and verifying changes with live test content URLs and a running local dev server to validate decoration and styling.

Do I need a running dev server to verify AEM Edge Delivery block changes?▼

Yes, a running dev server and a live test content URL are required to verify AEM Edge Delivery block changes through the testing-blocks workflow and ensure proper JavaScript decoration and CSS styling.

Why should I use CSS custom properties and block scoping for AEM Edge Delivery projects?▼

Using CSS custom properties and block scoping for AEM Edge Delivery projects removes ad-hoc patterns, ensuring that block implementations remain consistent, performant, and maintainable across your front-end codebase.

Related Skills

Explore More Software Engineering Skills→
jfoxxjfoxx

find-test-content

Search AEM Edge Delivery pages for blocks and variants via query-index.

Community
Intermediate
treevestreeves

Building Blocks

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

Community
Intermediate
jfoxxjfoxx

building-blocks

Guide AEM Edge Delivery Services block development and core file modifications.

Community
Intermediate
samircaussamircaus

AEM Block Development

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

Community
Advanced