skills.rest
blakebauman
blakebaumanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Building Blocks

Automate creation and modification of AEM Edge Delivery blocks.

Updated Oct 7, 2025
Search Tags:#front-end#CSS#JavaScript#AEM#block development#content model#decoration#Edge Delivery
One-click install
npx skills add https://github.com/blakebauman/aem-camp --skill building-blocks-blakebauman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Building Blocks
Source: https://github.com/blakebauman/aem-camp/tree/main/.claude/skills/building-blocks
Command: npx skills add https://github.com/blakebauman/aem-camp --skill building-blocks-blakebauman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating or modifying AEM Edge Delivery blocks requires adherence to specific architectural patterns for JavaScript decoration and CSS styling, often leading to inconsistent implementations and maintenance headaches. This skill provides a structured guide to ensure quality and maintainability, saving you time and effort.

Core Features & Use Cases

  • Structured Development: Guides through block file creation, JavaScript decoration logic, and CSS styling, ensuring consistency and adherence to best practices.
  • Code Quality Adherence: Enforces best practices for DOM manipulation, variant handling, and performance, leading to robust and efficient blocks.
  • Integrated Testing: Automatically invokes the testing-blocks skill for comprehensive validation, ensuring your blocks are thoroughly tested before deployment.
  • Use Case: After defining the content model for a new "cards" block, use this skill to implement its JavaScript decoration logic and CSS styling, ensuring it follows AEM best practices and is ready for testing, reducing rework and bugs.

Quick Start

Implement the JavaScript decoration and CSS styling for a "hero" block, using the provided content model and test content URL.

Frequently Asked Questions about Building Blocks

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

FAQPage Schema
How do I structure JavaScript decoration and CSS styling for AEM Edge Delivery blocks?▼

AEM Edge Delivery blocks require consistent JavaScript decoration logic and CSS styling following architectural patterns. This skill automates block file creation, guides decoration implementation, and ensures styling adheres to best practices, reducing inconsistencies and maintenance overhead.

What's the best way to ensure my AEM block implementation follows best practices?▼

Follow structured block development by implementing DOM manipulation, variant handling, and performance optimization through guided scaffolding. This skill enforces code quality standards and integrates testing validation to catch issues before deployment.

Can I automate testing for my AEM blocks during development?▼

Yes. This skill automatically invokes the testing-blocks skill for comprehensive validation after you implement JavaScript decoration and CSS styling, ensuring thorough testing before your blocks reach production.

Do I need to define a content model before building an AEM block?▼

Content model definition is a prerequisite. After you define the model for your block, this skill guides you through implementing the JavaScript decoration logic and CSS styling to match that model within a Content Driven Development workflow.

What happens if my block decoration or styling doesn't meet AEM standards?▼

This skill enforces adherence to AEM architectural patterns for JavaScript decoration and CSS styling. Following its structured guidance ensures DOM manipulation, variant handling, and performance standards are met, preventing rework and bugs.

How do I implement a new AEM block from content model to deployment?▼

Start with your content model, use this skill to implement JavaScript decoration and CSS styling following AEM patterns, then the integrated testing invocation validates your block. This end-to-end process ensures consistency and quality before deployment.

Related Skills

Explore More Software Engineering Skills→
treevestreeves

Building Blocks

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

Community
Intermediate
ak8458ak8458

Building Blocks

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

Community
Advanced
blakebaumanblakebauman

Using Content Driven Development

Implement a content-first development workflow for AEM Edge Delivery Services projects.

Community
Intermediate
arbory-digital-incarbory-digital-inc

Building Blocks

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

Official
Basic