Building Blocks
Guides the creation and modification of AEM Edge Delivery blocks by transforming authored content into interactive experiences through JavaScript decoration and CSS styling.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- Scoped, mobile-first CSS styling with BEM-like naming conventions
- Integrated developer and author-facing documentation workflows
- Content model validation and test content verification
- JavaScript decoration logic implementation using standard DOM APIs
- Pattern discovery through similarity searches in existing blocks
Use cases
- Modifying existing blocks to include new variants or content model changes
- Developing a new custom block from scratch for an AEM Edge Delivery project
- Refactoring block logic to align with project-specific JavaScript and CSS guidelines
FAQ
When should I use this skill?
This skill should be used during the implementation phase of your workflow. It is designed to be invoked after the 'content-driven-development' skill has been used to establish the necessary test content and content models.
What technical standards does this skill follow?
The skill enforces high-quality standards including mobile-first responsive design, low-specificity CSS selectors, functional JavaScript decoration, and rigorous linting and browser testing via the testing-blocks integration.
What does the Building Blocks skill do?
The Building Blocks skill guides developers through the complete process of creating or modifying AEM Edge Delivery blocks. It assists with implementing JavaScript decoration logic using standard DOM APIs and applying scoped, mobile-first CSS styles following BEM conventions.
Does it handle documentation for content authors?
Yes. Beyond code implementation, the skill guides you through creating developer documentation and updating author-facing guides for the Sidekick or Document Authoring libraries to ensure editors know how to use the new blocks.
How does this skill improve my AEM development workflow?
It improves efficiency by automating the boilerplate setup, ensuring code quality through integrated testing workflows, and maintaining architectural consistency by searching for similar patterns in your existing codebase.
Related skills
Every Style Editor
Performs a systematic, line-by-line review of written content to ensure compliance with Every's grammar, mechanics, and style guide.
Content Management2,82412 ptsTYPO3 Extension Upgrade
Automates the migration and modernization of TYPO3 extensions by applying systematic upgrade patterns, Rector rules, and Fractor transformations for PHP and configuration files.
Content Management612 ptsVideo to Article
Transforms recorded lectures and presentations into polished transcripts, structured outlines, and multi-format articles.
Content Management112 pts