An Adobe Edge Delivery Services starter project extended with a comprehensive Skills library for AI-assisted development and a Specification-Driven Development (SDD) workflow powered by Claude Code.
| Directory | Purpose |
|---|---|
blocks/ |
Reusable content blocks (cards, columns, footer, fragment, header, hero, presentation) |
scripts/ |
Core AEM library and global page decoration scripts |
styles/ |
Global CSS (eager + lazy phases) |
.claude/skills/ |
Claude Code skill library — specialized AI workflows for EDS development |
.specify/ |
Specification-Driven Development workflow (specs, logs, diagrams) |
.agents/ |
Agent helper scripts (skill discovery, etc.) |
.github/workflows/ |
CI/CD including Claude Code integration |
drafts/ |
Local test content for development (not published) |
The .claude/skills/ directory contains a set of specialized agent workflows designed to help Claude Code build, test, and document AEM EDS projects consistently and correctly.
Run the discovery script to see all available skills:
./.agents/discover-skillsKey skills include:
| Skill | Purpose |
|---|---|
content-driven-development |
Orchestrates the full development lifecycle — start here for all dev tasks |
building-blocks |
Create and modify EDS blocks with correct patterns |
testing-blocks |
Validate blocks before opening a PR |
eds-styles |
Block-scoped CSS with shared design tokens |
eds-wcag |
WCAG 2.2 AA accessibility for blocks |
eds-analytics |
Analytics / data layer integration |
eds-documentation |
Block README and authoring guide authoring |
docs-search |
Search aem.live documentation |
page-import |
Import a webpage to structured HTML for AEM authoring |
speckit-* |
Specification-Driven Development pipeline (see below) |
athenai-* |
AI-powered block implementation pipeline |
Important for AI agents:
AGENTS.mdat the project root contains the full agent instructions. All development tasks must start with thecontent-driven-developmentskill.
The .specify/ directory implements an SDD lifecycle built on top of GitHub's Spec Kit. Features are specified, planned, and validated before implementation.
/speckit.specify → Create user story spec
/speckit.figma-specify → (Optional) Extract Figma design context
/speckit.clarify → Refine the story
/speckit.plan → Generate implementation plan
/speckit.tasks → Create task breakdown
/speckit.analyze → Verify consistency
/speckit.implement → Execute implementation
/speckit.testcases → Generate test cases
Specs are stored in .specify/specs/<story-number>-<short-name>/.
This project includes GitHub Actions workflows for Claude Code integration:
| Workflow | Trigger | Purpose |
|---|---|---|
claude.yml |
@claude in issues/PRs |
On-demand AI assistance |
claude-code-review.yml |
PR opened/updated | Automated code review |
claude-speckit-implement.yml |
Manual dispatch | Run the SDD implementation pipeline |
Required secret: ANTHROPIC_API_KEY must be set in GitHub repository secrets.
- Node.js 18+
- An AEM Edge Delivery Services account (or use the public boilerplate backend)
# Install dependencies
npm install
# Start local development server
npx -y @adobe/aem-cli up --no-open --forward-browser-logs
# Or with local draft content
npx -y @adobe/aem-cli up --no-open --forward-browser-logs --html-folder draftsOpen http://localhost:3000 in your browser.
npm run lint # Check for issues
npm run lint:fix # Auto-fix issuesnpm test- No build tools. Vanilla JS (ES6+), plain CSS, semantic HTML — no Webpack, Vite, React, Tailwind, etc.
- Mobile-first CSS. Standard breakpoints:
600px,900px,1200px(allmin-width). - Block isolation. All block CSS must be scoped to
.{blockName}. - Content first. Never write code without test content. Use the
content-driven-developmentskill. - Performance is non-negotiable. Maintain Lighthouse 100. See Keeping it 100.
- AEM Edge Delivery Services docs
- Developer Tutorial
- Block Collection
- Best Practices for Developers
- Developing with AI Tools
Apache License 2.0 — see LICENSE.