block-scaffolder

Creating a custom AEM EDS block requires authoring a JavaScript decorate function, scoped CSS, and authoring table markup. This Skill generates a complete EDS-compliant scaffold from a natural-language description, enforcing naming conventions and null-safe DOM handling.

The EDS decorate function must be a default export accepting a block element, applying null-safe DOM manipulation and responsive image generation. This Skill generates this entry point automatically while enforcing mobile-first scoped styling under the block class.

Accessible EDS authoring markup uses specific table-to-DOM structures for Google Docs or Word. This Skill produces example authoring table markup and integrates ARIA patterns for interactive components during scaffold generation.

Prototyping component behavior with EDS block scaffolding is fully supported. This Skill creates a complete starting point including a test page, variant strategy guidance, and block mapping configuration to validate interactive logic quickly.

EDS block scaffolding supports mobile-first scoped CSS by generating styles under the specific block class. This Skill automatically produces correctly scoped CSS that adheres to EDS folder layout and lowercase hyphenated naming conventions.

EDS blocks break on empty authoring cells due to unhandled null DOM references. This Skill prevents this by generating null-safe decoration patterns that gracefully handle missing table data during the block rendering lifecycle.