aem-eds-frontend-best-practices

Codify vanilla JS and modern CSS requirements for AEM Edge Delivery Services frontends.

Updated Mar 20, 2026
One-click install
npx skills add https://github.com/piotrgodycki/aem-skills --skill aem-eds-frontend-best-practices
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: aem-eds-frontend-best-practices
Source: https://github.com/piotrgodycki/aem-skills/tree/main/aem-eds-frontend-best-practices
Command: npx skills add https://github.com/piotrgodycki/aem-skills --skill aem-eds-frontend-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides production-grade frontend guidance to build high-performance Adobe Experience Manager Edge Delivery Services (EDS) frontends using vanilla JavaScript and modern CSS, enabling teams to ship edge-delivered content with minimal frameworks and robust performance patterns.

Core Features & Use Cases

  • 17 rule files covering block development, CSS patterns, vanilla JS patterns, content modeling JSON, Universal Editor models, experimentation/personalization, forms and spreadsheets, Sidekick/SEO, testing, multi-site repoless, CDN configuration, performance optimization, edge compute, and third-party integrations.
  • A portable, repeatable blueprint for creating high-performance blocks (Hero, Columns, Tabs, Accordion, Carousel, Fragment, Card grids, data-driven content, and more) that render at the edge with zero-runtime framework overhead.
  • Real-world scenarios include data-driven blocks sourced from spreadsheets, API proxies at the edge, and CDN-driven content delivery with push-based invalidation to maintain freshness.

Quick Start

Begin by reading the 17 rules and start implementing EDS frontend patterns using vanilla JS and CSS, following the examples in each guide.

Frequently Asked Questions about aem-eds-frontend-best-practices

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

FAQPage Schema
What are the frontend best practices for AEM Edge Delivery Services?

AEM Edge Delivery Services frontend best practices focus on using vanilla JavaScript and modern CSS to build high-performance blocks with zero-runtime framework overhead. They codify requirements for block patterns, content modeling, and CDN workflows.

How do I build high-performance blocks for AEM EDS without frameworks?

You build AEM EDS blocks using vanilla JavaScript and modern CSS patterns. This approach ensures zero-runtime framework overhead, enabling fast edge-rendered content for standard blocks like Hero, Columns, Tabs, Accordion, and Carousel.

How does multi-site repoless setup work in AEM Edge Delivery Services?

Multi-site repoless setup in AEM Edge Delivery Services allows managing multiple sites without separate repositories. It is codified within frontend best practices to standardize content delivery and maintain robust performance patterns across different sites.

Can I use data-driven blocks sourced from spreadsheets in AEM EDS?

Yes, AEM EDS supports data-driven blocks sourced directly from spreadsheets. This pattern is included in frontend best practices to help you create dynamic content areas driven by external data without requiring complex backend integrations.

How do I configure CDN and edge compute for AEM Edge Delivery Services?

CDN configuration and edge compute in AEM EDS involve setting up API proxies at the edge and using push-based invalidation to maintain content freshness. Best practices provide guidelines for performance-focused deployment and third-party integrations.

Do I need React or other frameworks to build AEM EDS frontends?

No, you do not need React or similar frameworks for AEM EDS frontends. Best practices dictate using vanilla JavaScript and modern CSS to ensure minimal framework overhead and deliver robust, high-performance edge-rendered content.