How does the decorate function work in this skill?

The decorate function is the standard entry point for EDS blocks, receiving the block element and transforming it from a raw table structure into a functional component.

What is an EDS Block?

An EDS block is a specialized UI component in Adobe Edge Delivery Services that combines content authored in Google Docs or Sharepoint with custom CSS and JavaScript for rendering.

What is the recommended file structure for an EDS block?

A standard block should include a .js file for logic, a .css file for styles, a README.md for documentation, and an EXAMPLE.md showing the expected Google Docs structure.

Why are reserved class names important in EDS development?

EDS automatically appends -container and -wrapper suffixes to blocks; using these in your custom code can cause severe CSS conflicts and break page layouts.

Adobe EDS Block Developer

Name: Adobe EDS Block Developer
Author: ddttom

byddttom

0•

内容管理

Accelerates Adobe Edge Delivery Services (EDS) development by providing standardized patterns for block decoration, content extraction, and vanilla JavaScript implementation.

This skill provides a comprehensive framework for building high-performance web components within the Adobe Edge Delivery Services ecosystem. It enforces Content Driven Development principles, ensuring that blocks correctly interpret Google Docs structures while maintaining strict architectural standards. By guiding developers through the decorate function pattern, configuration object management, and CSS naming safeguards, it helps prevent common production bugs and ensures maintainable, scalable frontend code for EDS-powered sites.

主要功能

01Provides structural guidance for Google Docs table integration and content extraction

020 GitHub stars

03Standardizes the decorate function pattern for consistent DOM manipulation

04Guides developers through metadata overrides and dependency injection patterns

05Enforces EDS-specific CSS naming conventions to prevent reserved class conflicts

06Implements robust configuration object architecture with global constant separation

使用场景

01Migrating existing frontend components into the EDS block structure

02Building custom UI components (blocks) for Adobe Edge Delivery Services websites

03Debugging and refactoring complex block logic for better performance and maintainability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ddttom/allaboutv2 eds-block-development

For use in Claude.ai and ChatGPT

Download Skill