skills.rest
amol-anand
amol-anandCOMMUNITY
Explore all skills by this author →
GitHub

Building Blocks

Standardize AEM Edge Delivery block creation with JavaScript decoration and CSS styling.

Updated Apr 14, 2025
Search Tags:#development#javascript#css#components#coding#blocks#decoration#aem
One-click install
npx skills add https://github.com/amol-anand/demo --skill building-blocks-amol-anand
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Building Blocks
Source: https://github.com/amol-anand/demo/tree/main/.claude/skills/building-blocks
Command: npx skills add https://github.com/amol-anand/demo --skill building-blocks-amol-anand

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Developing AEM blocks without a structured process can lead to inconsistent code, poor performance, and difficult maintenance. This Skill provides a comprehensive guide to building robust, high-quality AEM Edge Delivery blocks.

Core Features & Use Cases

  • Structured Development: Guides through creating block files, implementing JavaScript decoration, and adding CSS styling following best practices.
  • Code Quality & Standards: Enforces established patterns, naming conventions, and performance considerations for JS and CSS.
  • Integrated Testing: Automatically invokes the testing-blocks skill for comprehensive validation, linting, and GitHub checks.
  • Use Case: When tasked with creating a new "cards" block, this skill ensures you follow best practices for JS and CSS, leverage existing patterns, and integrate testing seamlessly, resulting in a robust and maintainable component that performs flawlessly.

Quick Start

Start building a new 'hero' block, ensuring all prerequisites from Content Driven Development are met.

Frequently Asked Questions about Building Blocks

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

FAQPage Schema
How do I standardize AEM block development to avoid inconsistent code?▼

Standardizing AEM block development involves following structured patterns for JavaScript decoration, CSS styling, and content model updates. This Skill provides comprehensive guidance on exporting a default decorate(block) function, performing DOM transformations, scoping CSS, and adhering to JavaScript and CSS guidelines to ensure consistent, maintainable blocks across your Edge Delivery projects.

What's the best way to build a new AEM block with JavaScript and CSS?▼

Building AEM blocks efficiently requires creating block files, implementing JavaScript decoration for DOM transformations, adding scoped CSS styling, and following established naming conventions and performance guidelines. This Skill guides you through the complete structured process, from setup through integration with testing and documentation workflows.

Do I need to test my AEM blocks after creating them?▼

Yes. Testing AEM blocks is essential for quality assurance. This Skill automatically integrates the testing-blocks workflow to perform comprehensive validation, linting, and GitHub checks, ensuring your JavaScript decoration, CSS styling, and content model changes meet performance and standards requirements.

Can I apply AEM block development patterns to existing blocks?▼

Yes. This Skill applies to both creating new blocks and significantly modifying existing ones. Whether you're building a new component or updating an existing block's JavaScript decoration, CSS styling, or content model within a Content Driven Development workflow, the structured patterns ensure consistency and quality.

What prerequisites do I need before starting AEM block development?▼

You need Node.js installed as a runtime dependency and should have Content Driven Development prerequisites in place. The Skill leverages a references component and guides you through the complete development workflow, from initial block creation to testing and documentation integration.

Why does block development without structure lead to maintenance problems?▼

Unstructured block development results in inconsistent code patterns, poor performance, and difficult maintenance across your Edge Delivery projects. This Skill prevents these issues by enforcing established patterns, naming conventions, and best practices for JavaScript and CSS, creating robust components that perform reliably and remain maintainable.

Related Skills

Explore More Software Engineering Skills→
initialyzeinitialyze

Building Blocks

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

Official
Advanced
kouisokouiso

verification-loop

Execute multi-phase build, type, lint, test, and security checks for software projects.

Community
Advanced
trielofftrieloff

Testing Blocks

Automate validation of AEM Edge Delivery code changes with unit and browser tests.

Community
Intermediate
Permit-JunctionPermit-Junction

building-blocks

Implement AEM Edge Delivery blocks with JavaScript decoration and CSS styling.

Official
Intermediate