skills.rest
samircaus
samircausCOMMUNITY
Explore all skills by this author →
Website𝕏@samircausGitHub

AEM Block Development

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

Updated Nov 5, 2024
Search Tags:#javascript#aem#edge-delivery#frontend-patterns#block-development#dom-decoration
One-click install
npx skills add https://github.com/samircaus/elsie --skill aem-block-development
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: AEM Block Development
Source: https://github.com/samircaus/elsie/tree/main/.agents/skills/aem-block-development
Command: npx skills add https://github.com/samircaus/elsie --skill aem-block-development

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides practical guidance for implementing AEM Edge Delivery blocks with consistent patterns for structure, decoration, and maintainable code.

Core Features & Use Cases

  • Guidelines for block structure: JavaScript, CSS, and HTML deliverable blocks.
  • Decoration patterns: create decorate(block) logic to transform and enhance content.
  • Testing and debugging practices for local HTML previews and preview environments.
  • Accessibility and performance considerations in block development.

Quick Start

Create a new block under blocks, add blockname.js and blockname.css, and implement the decorate(block) function to render and decorate the content.

Frequently Asked Questions about AEM Block Development

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

FAQPage Schema
How do I implement a decorate function for AEM Edge Delivery blocks?▼

To implement AEM Edge Delivery blocks, create a block directory, add blockname.js, and use the decorate(block) function to perform DOM transformations and render content with consistent patterns.

What is the standard structure for AEM Edge Delivery blocks?▼

AEM Edge Delivery blocks consist of modular HTML deliverables paired with blockname.js and blockname.css files, utilizing standardized decorate functions to transform content while maintaining accessibility and performance.

How do I test and debug AEM Edge Delivery blocks locally?▼

You test AEM Edge Delivery blocks by validating decoration logic through local HTML previews and preview environments, ensuring the DOM transformations render correctly before deployment.

Does AEM Edge Delivery block development support accessible and responsive patterns?▼

Yes, AEM Edge Delivery block development incorporates accessibility considerations and responsive patterns directly within the decorate function logic to ensure performance-conscious DOM transformations.

What's the best way to handle DOM decoration in AEM Edge Delivery?▼

The best way to handle DOM decoration in AEM Edge Delivery is applying standardized decorate functions that ensure modular block structure, maintainable JavaScript, and performance-conscious content transformations.

Related Skills

Explore More Software Engineering Skills→
paolomozpaolomoz

page-import

Scrape a webpage and generate structured HTML for AEM Edge Delivery Services.

Community
Advanced
ak8458ak8458

preview-import

Preview and validate imported HTML rendering in a local AEM Edge Delivery Services dev server.

Community
Intermediate
amol-anandamol-anand

Building Blocks

Standardize AEM Edge Delivery block creation with JavaScript decoration and CSS styling.

Community
Intermediate
ak8458ak8458

Building Blocks

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

Community
Advanced