building-blocks

Implement AEM Edge Delivery blocks with JavaScript decoration and CSS styling.

Updated Feb 15, 2026
One-click install
npx skills add https://github.com/Permit-Junction/permitjunction-website --skill building-blocks-permit-junction
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: building-blocks
Source: https://github.com/Permit-Junction/permitjunction-website/tree/main/.claude/skills/building-blocks
Command: npx skills add https://github.com/Permit-Junction/permitjunction-website --skill building-blocks-permit-junction

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of implementing and modifying code for AEM Edge Delivery blocks, ensuring adherence to established patterns and best practices.

Core Features & Use Cases

  • Block Development: Create new block files, implement JavaScript decoration, and add CSS styling.
  • Core Functionality Updates: Modify global scripts, styles, and delayed functionalities.
  • Use Case: When developing a new carousel block for an AEM Edge Delivery Services website, use this Skill to scaffold the block's files, write the JavaScript for its interactive behavior, and apply the necessary CSS for its visual presentation.

Quick Start

Use the building-blocks skill to create a new block named 'hero-banner'.

Frequently Asked Questions about building-blocks

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

FAQPage Schema
How do I implement AEM Edge Delivery blocks using content-driven development?

To implement AEM Edge Delivery blocks, you create block files, write JavaScript for DOM decoration, and add CSS styling in styles.css. This approach follows content-driven-development workflows, ensuring blocks render correctly from structured documents.

What is the best way to add JavaScript decoration and CSS styling for an AEM block?

The best way to add JavaScript decoration and CSS styling for an AEM block is by modifying the block's dedicated JavaScript file for interactive behavior and applying visual presentation rules within styles.css, adhering to established Edge Delivery patterns.

Can I modify global scripts and delayed functionalities in AEM Edge Delivery Services?

Yes, you can modify global scripts and delayed functionalities in AEM Edge Delivery Services. This includes updating scripts.js for core site behavior and adjusting delayed.js for deferred loading of non-critical JavaScript execution.

Does this AEM Edge Delivery block development approach require specific core file modifications?

AEM Edge Delivery block development requires modifying core files like scripts.js and styles.css for global updates, alongside creating individual block files to scaffold specific functionalities and ensure proper content rendering.

Why does my AEM Edge Delivery block need JavaScript decoration and separate CSS files?

Your AEM Edge Delivery block needs JavaScript decoration to transform structured content into interactive HTML elements, and separate CSS files to apply visual styling, ensuring the block functions correctly within the content-driven workflow.

When do I need to update delayed.js versus scripts.js for AEM Edge Delivery core functionality changes?

Update scripts.js for core AEM Edge Delivery functionality changes requiring immediate execution, and modify delayed.js for non-critical JavaScript functionalities that can load after the main page content to optimize performance.