skills.rest
adobe
adobeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

Building Blocks

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

45|59|Updated Oct 22, 2021
Search Tags:#development#front-end#CSS#JavaScript#AEM#web components#blocks#decoration
One-click install
npx skills add https://github.com/adobe/helix-website --skill building-blocks-adobe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Building Blocks
Source: https://github.com/adobe/helix-website/tree/main/.claude/skills/building-blocks
Command: npx skills add https://github.com/adobe/helix-website --skill building-blocks-adobe

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node, and includes references (resource) components.

What problem does it solves? Developing AEM Edge Delivery blocks can be complex, requiring adherence to specific JavaScript, CSS, and content modeling standards. This Skill provides a structured, best-practice-driven approach to building and modifying blocks, ensuring quality and consistency with less manual oversight.

Core Features & Use Cases

  • Structured Development Workflow: Guides through creating block files, implementing JavaScript decoration, and applying scoped CSS styling.
  • Code Quality & Standards: Enforces best practices for DOM manipulation, variant handling, performance, and code style.
  • Integrated Testing & Documentation: Automatically invokes the testing-blocks skill and guides the creation of both developer and author-facing documentation.
  • Use Case: When tasked with creating a new "hero" block, use this Skill to implement its JavaScript decoration and CSS styling, ensuring it follows project standards, is performant, and is ready for testing and documentation.

Quick Start

Build a new "carousel" block, implementing its JavaScript decoration and CSS styling according to AEM Edge Delivery best practices.

Frequently Asked Questions about Building Blocks

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

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

Build AEM Edge Delivery blocks by implementing a default decorate(block) function using DOM APIs, applying scoped CSS per guidelines, and supporting variants via block-class checks. The Skill guides scaffolding, decoration, styling, and testing workflows to ensure blocks follow project standards and are performant.

What are the prerequisites for creating AEM blocks in Edge Delivery?▼

Prerequisites include test content, a defined content model, and a test content URL. You'll need Node installed and should be in Content Driven Development Phase 2, with blocks ready for integration into testing, linting, and documentation workflows.

Can I use this to modify existing AEM block implementations?▼

Yes, this Skill addresses inconsistencies in block implementations through substantial changes to JavaScript decoration, CSS styling, and content-model alignment. It covers both creating new blocks and modifying existing ones to meet specification.

What's the best way to ensure AEM blocks follow development standards?▼

Follow the structured development workflow provided, which enforces best practices for DOM manipulation, variant handling, and performance while automatically invoking the testing-blocks Skill and guiding creation of developer and author-facing documentation.

Do I need to handle block variants in AEM Edge Delivery development?▼

Yes, supporting variants is a core requirement. Implement variant handling via block-class checks within your JavaScript decoration to allow flexible block behavior while maintaining code quality and consistency.

Related Skills

Explore More Software Engineering Skills→
adobe-summit2026-l613adobe-summit2026-l613

building-blocks

Implement AEM Edge Delivery block changes following content-driven-development patterns.

Official
Advanced
ddttomddttom
2

Using Content Driven Development

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

Community
Intermediate
samircaussamircaus

AEM Block Development

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

Community
Advanced
initialyzeinitialyze

Building Blocks

Scaffold and refine AEM Edge Delivery blocks with standardized structure and styling.

Official
Advanced