skills.rest
jfoxx
jfoxxCOMMUNITY
Explore all skills by this author →
GitHub

building-blocks

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

Updated Mar 27, 2025
Search Tags:#implementation#javascript#css#block development#aem#edge delivery
One-click install
npx skills add https://github.com/jfoxx/residentportal --skill building-blocks-jfoxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-blocks
Source: https://github.com/jfoxx/residentportal/tree/main/.skills/building-blocks
Command: npx skills add https://github.com/jfoxx/residentportal --skill building-blocks-jfoxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of implementing code changes for AEM Edge Delivery Services, ensuring adherence to best practices for both new block development and core functionality modifications.

Core Features & Use Cases

  • Block Development: Guides through creating and modifying AEM blocks, including JavaScript decoration and CSS styling.
  • Core Functionality Updates: Assists with changes to essential files like scripts.js, styles.css, and delayed.js.
  • Use Case: When a new content component needs to be translated into a functional AEM block, this Skill provides the step-by-step guidance from structure creation to styling and testing.

Quick Start

Use the building-blocks skill to create a new block named 'hero-banner' with associated JavaScript and CSS files.

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 with JavaScript and CSS?▼

Implementing an AEM Edge Delivery block requires creating the block structure, adding JavaScript for DOM decoration, and applying CSS styling. This provides a functional content component that adheres to best practices for Edge Delivery Services.

What is the process for modifying core functionality in AEM Edge Delivery Services?▼

Core functionality updates in AEM Edge Delivery Services require direct modifications to essential files like scripts.js, styles.css, and delayed.js. This alters the site's global behavior and styling rather than individual block components.

Can I update delayed.js for non-blocking scripts in AEM Edge Delivery?▼

Yes, updating delayed.js handles non-blocking scripts in AEM Edge Delivery. This file manages core functionality modifications that load after main content, improving initial page performance and user experience.

What's the best way to style a new content component in AEM Edge Delivery?▼

The best way to style a new content component is applying CSS styling within the block development workflow. This involves creating specific CSS rules for the block and integrating them with the site's styles.css file.

Does AEM Edge Delivery block development require JavaScript decoration?▼

Yes, JavaScript decoration is a core part of AEM Edge Delivery block development. It manipulates the block's DOM structure and adds dynamic behavior, transforming static content into fully functional components.

Why does my AEM block need changes to both scripts.js and styles.css?▼

Your AEM block needs changes to both scripts.js and styles.css when implementing core functionality updates alongside block development. scripts.js handles structural logic, while styles.css manages the visual presentation of the site.

Related Skills

Explore More Software Engineering Skills→
aemsitesaemsites
1

content-modeling

Design semantic content models for AEM Edge Delivery Services blocks.

Official
Intermediate
paolomozpaolomoz

Building Blocks

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

Community
Intermediate
blakebaumanblakebauman

Building Blocks

Automate creation and modification of AEM Edge Delivery blocks.

Community
Intermediate
aemsitesaemsites
1

building-blocks

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

Official
Intermediate