skills.rest
ddttom
ddttomCOMMUNITY
Explore all skills by this author →
GitHub

Building Blocks

Create and update AEM Edge Delivery blocks with JavaScript decoration, CSS, and content models.

2|Updated Feb 22, 2024
Search Tags:#javascript#css#components#block development#decoration#aem#content-driven
One-click install
npx skills add https://github.com/ddttom/allaboutv2 --skill building-blocks-ddttom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Building Blocks
Source: https://github.com/ddttom/allaboutv2/tree/main/.claude/skills/building-blocks
Command: npx skills add https://github.com/ddttom/allaboutv2 --skill building-blocks-ddttom

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates the complexity and guesswork from AEM Edge Delivery block development by providing structured guidance for creating and modifying reusable components.

Core Features & Use Cases

  • Block Creation: Guide developers through creating new blocks from scratch with proper structure and conventions.
  • JavaScript & CSS Implementation: Ensure consistent decoration logic and styling patterns across all blocks.
  • Use Case: When your content team needs a new testimonial carousel block, this Skill walks you through the entire implementation process while maintaining code quality standards.

Quick Start

Use the Building Blocks skill to create a new hero block with the test content URL 'https://example.com/test-content'.

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 decoration and CSS styling?▼

Create AEM Edge Delivery blocks by implementing a default decorate(block) function for JavaScript logic, scoping CSS to your block, and aligning your content model with defined structures. Follow mobile-first responsive design and validate with tests within the Content Driven Development workflow.

What's the process for building AEM blocks that support content variants?▼

Build content variants into AEM blocks using classList to support multiple block variants. Structure your decoration logic to handle variant switching, apply conditional CSS classes, and test each variant against your content model to ensure consistent rendering.

Do I need to follow specific conventions when modifying existing AEM blocks?▼

Yes. Significant block modifications require exporting a proper decorate function, maintaining scoped CSS, respecting the content model, and running tests and documentation updates within the CDD workflow to preserve code quality standards.

How do I validate AEM blocks during development?▼

Validate blocks by running tests against your content model, checking mobile-first responsive design behavior, verifying the decorate function exports correctly, and confirming CSS scoping works as expected within the Content Driven Development process.

What are the key differences between creating a block from scratch versus modifying an existing one?▼

Creating blocks from scratch requires establishing structure, decoration logic, and styling patterns from the beginning. Modifying existing blocks focuses on targeted updates to decoration, CSS, or content alignment while preserving established conventions and passing validation tests.

Related Skills

Explore More Software Engineering Skills→
paolomozpaolomoz

Building Blocks

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

Community
Intermediate
paul-hosking-cdw-compaul-hosking-cdw-com

Building Blocks

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

Community
Advanced
treevestreeves

Building Blocks

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

Community
Intermediate
samircaussamircaus

AEM Block Development

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

Community
Advanced