From aem-edge-delivery-services
Guides block implementation and core changes in AEM Edge Delivery Services via JS decoration, CSS styling, and file modifications following content-driven workflow.
npx claudepluginhub adobe/skillsThis skill uses the workspace's default tool permissions.
This skill guides you through implementing AEM Edge Delivery blocks following established patterns and best practices. Blocks transform authored content into rich, interactive experiences through JavaScript decoration and CSS styling.
Orchestrates content-first development workflow for AEM Edge Delivery Services. Ensures test content exists before implementing JS/CSS/block changes, bug fixes, or core functionality.
Generates developer guide for AEM Edge Delivery Services projects by analyzing codebase structure, custom implementations, and design tokens. Use for onboarding or technical handovers.
Scaffolds new ACF Composer Gutenberg blocks in Sage themes with custom element architecture, scoped CSS, theme variations, block.json, Blade views, and JS lifecycle.
Share bugs, ideas, or general feedback.
This skill guides you through implementing AEM Edge Delivery blocks following established patterns and best practices. Blocks transform authored content into rich, interactive experiences through JavaScript decoration and CSS styling.
IMPORTANT: This skill should ONLY be invoked from the content-driven-development skill during Step 5 (Implementation).
If you are not already following the CDD process, STOP and invoke the content-driven-development skill first.
This skill is invoked automatically by content-driven-development during Step 5 (Implementation). It handles:
Block Development:
Core Functionality:
Combined:
Prerequisites (verified by CDD):
Track your progress:
Note: If your changes require core modifications (utilities in scripts.js, global styles, etc.), make those changes first, test them, then return to this workflow. See "When Modifying Core Files" below.
When to use: Creating new blocks or making major structural modifications
Skip this step when: Making minor modifications to existing blocks (CSS tweaks, small decoration changes)
Quick start:
Search the codebase for similar blocks:
ls blocks/
Use the block-collection-and-party skill to find reference implementations
Review patterns from similar blocks:
Create the block directory and files:
mkdir -p blocks/{block-name}
touch blocks/{block-name}/{block-name}.js
touch blocks/{block-name}/{block-name}.css
Basic JavaScript structure:
/**
* decorate the block
* @param {Element} block the block
*/
export default async function decorate(block) {
// Your decoration logic here
}
Basic CSS structure:
/* All selectors scoped to block */
main .{block-name} {
/* block styles */
}
blocks/{block-name}/# View the initial HTML structure from the server
curl http://localhost:3000/{test-content-path}
Essential pattern - re-use existing DOM elements:
export default async function decorate(block) {
// Platform delivers images as <picture> elements with <source> tags
const picture = block.querySelector('picture');
const heading = block.querySelector('h2');
// Create new structure, re-using existing elements
const figure = document.createElement('figure');
figure.append(picture); // Re-uses picture element
const wrapper = document.createElement('div');
wrapper.className = 'content-wrapper';
wrapper.append(heading, figure);
block.replaceChildren(wrapper);
// Only check variants when they affect decoration logic
// CSS-only variants like 'dark', 'wide' don't need JS
if (block.classList.contains('carousel')) {
// Carousel variant needs different DOM structure/behavior
setupCarousel(block);
}
}
For complete JavaScript guidelines including:
Read resources/js-guidelines.md
Essential patterns - scoped, responsive, using custom properties:
/* All selectors MUST be scoped to block */
main .my-block {
/* Use CSS custom properties for consistency */
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--body-font-family);
max-width: var(--max-content-width);
/* Mobile-first styles (default) */
padding: 1rem;
flex-direction: column;
}
main .my-block h2 {
font-family: var(--heading-font-family);
font-size: var(--heading-font-size-m);
}
main .my-block .item {
display: flex;
gap: 1rem;
}
/* Tablet and up */
@media (width >= 600px) {
main .my-block {
padding: 2rem;
}
}
/* Desktop and up */
@media (width >= 900px) {
main .my-block {
flex-direction: row;
padding: 4rem;
}
}
/* Variants - most are CSS-only */
main .my-block.dark {
background-color: var(--dark-color);
color: var(--clr-white);
}
For complete CSS guidelines including:
Read resources/css-guidelines.md
Note on iterative validation: While building, you can test changes in your browser as you go (load test content URL, check console, verify layout and functionality). For comprehensive testing guidance including browser testing techniques, responsive testing, and validation approaches, see the testing-blocks skill invoked in Step 5.
After implementation is complete, invoke the testing-blocks skill.
The testing-blocks skill will guide you through:
Provide the testing-blocks skill with:
After testing is complete, return to CDD workflow.
If your changes require modifying core files (scripts.js, styles.css, delayed.js), follow these principles:
Common core files:
Key principles:
Testing core changes:
For detailed patterns:
resources/js-guidelines.mdresources/css-guidelines.mdresources/js-guidelines.md - Complete JavaScript patterns and best practicesresources/css-guidelines.md - Complete CSS patterns and best practices