Building Blocks
Guide for creating new AEM Edge Delivery blocks or modifying existing blocks. Use this skill whenever you are creating a new block from scratch or making significant changes to existing blocks that involve JavaScript decoration, CSS styling, or content model changes.
Security Assessment
About Building Blocks
The 'Building Blocks' skill is designed to guide users through the process of creating and modifying AEM Edge Delivery blocks, with a focus on content-driven development (CDD). It helps developers create reusable building blocks for AEM sites by transforming content into rich, interactive experiences using JavaScript decoration and CSS styling. This skill is essential when building new blocks from scratch or making significant updates to existing blocks. It ensures that blocks are well-structured, styled correctly, and follow best practices for code quality, enhancing the efficiency of AEM site development.
Main features of this skill include the creation and modification of block structures, the implementation of JavaScript decoration for DOM transformations, and the application of CSS styling. It also emphasizes code quality, testing, and the use of content models. The skill supports a streamlined workflow by guiding users through a step-by-step process, starting with verifying prerequisites and finding similar blocks, followed by the creation of block files, decoration logic, and styling. Testing and documentation are essential components, ensuring that both developers and content authors can easily use and maintain the blocks.
This skill is aimed at developers working with AEM Edge Delivery who need to build new content blocks or modify existing ones. It is ideal for users who are familiar with the content-driven development approach and need a structured way to implement interactive content components. It is best used in conjunction with other skills like 'content-driven-development' and 'block-collection-and-party' to ensure that the necessary content and patterns are in place before starting the block development process.
FAQ
When should I use the Building Blocks skill?
The Building Blocks skill should only be invoked after completing the 'content-driven-development' skill during Phase 2 (Implementation). It ensures that the content and content models are ready before proceeding with block creation or modification.
What are the prerequisites for using the Building Blocks skill?
Before using this skill, you must have test content created (either in CMS or as local drafts), a defined content model, and a test content URL available.
Can I modify an existing block with this skill?
Yes, the Building Blocks skill allows you to modify existing blocks. You will first need to review the current block's implementation and make the necessary changes to the structure, decoration, and styling.
Is there a way to find reference blocks for patterns?
Yes, you can use the 'block-collection-and-party' skill to search for similar blocks in the codebase and find useful patterns or reusable code for your new or modified block.
What happens if prerequisites are not met?
If the prerequisites (test content, content model, and test content URL) are not met, you must stop and invoke the 'content-driven-development' skill first to prepare the necessary resources before continuing with this skill.
Install Building Blocks
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
adobe/helix-website