AI-Powered Adobe EDS Development

When Simple Tools Create Sophisticated Results

Modern web development often feels like an arms race of dependencies. Each project starts with hundreds of npm packages, complex build processes, and endless configuration files. The webcomponents-with-eds framework challenges this assumption head-on.

Built entirely with vanilla JavaScript, this development framework delivers enterprise-level capabilities whilst maintaining absolute simplicity. No npm install commands. No dependency vulnerabilities. No update fatigue. Just direct file editing with immediate results.

The numbers tell an interesting story. Eight production-ready components, 27 comprehensive documentation files containing over 5,000 lines of guidance, and 21 specialised AI skills - all orchestrated through 150 lines of pure Node.js server code. The project demonstrates that zero dependencies don't mean zero capabilities.

The Architecture That Makes It Work

The framework employs a dual-directory approach that effectively separates concerns. Simple components reside in /blocks/, where you can edit them directly - no build process is needed. Complex components requiring external libraries start in /build/ with modern tooling, then bundle into self-contained blocks for deployment.

// Simple component - edit directly in /blocks/

export default function decorate(block) {
  const button = block.querySelector('button');
  button.addEventListener('click', () => {
    block.classList.toggle('active');
  });
}

The development server handles the complexity invisibly. It serves your local files first, then falls back to proxying missing resources from your live EDS site. This creates a seamless development experience - you work on what matters without fighting tooling.

🚀 Server running at http://localhost:3000

📁 Serving files from: /current/directory

🔗 Proxying missing files to: https://allabout.network

📄 Main page: http://localhost:3000/server.html

Where Skills Meet Implementation Knowledge

Here's where things get interesting. Anthropic created Claude Skills, and Adobe built EDS-specific skills. But skills are lightweight orchestrators - they guide AI through workflows without containing the actual implementation knowledge. They tell Claude what to do, not how to do it.

The docs/for-ai directory solves this gap. Twenty-seven files containing implementation patterns, real-world solutions, and detailed guidance give AI the knowledge it needs. Adobe's skills provide the orchestration layer that makes this knowledge actionable.

This convergence is significant because it transforms AI from a passive observer into a knowledgeable partner. The skills say "now we test the component", whilst the documentation explains precisely how to write test files, what patterns to follow, and how to debug common issues.

Think of it like this: you wouldn't give someone a process flowchart and expect them to build a house. They need the flowchart (skills) and the actual construction knowledge (comprehensive docs). Together, they create something genuinely worthwhile.

Eight Components That Prove The Point

The framework includes production-ready components that demonstrate what's possible:

The ipynb-viewer block stands out as particularly innovative. It parses Jupyter notebooks and displays them directly in your EDS site. More impressively, it executes JavaScript code cells interactively in the browser, supports async/await patterns, and provides overlay previews for responsive testing across mobile, tablet, and desktop viewports.

The shoelace-card component shows how to handle external dependencies. It uses the Shoelace Design System during development, then bundles everything into a self-contained EDS block. Advanced glassmorphism effects, sophisticated animations, and modern JavaScript patterns - all without requiring external CDN resources at runtime.

Simpler components, such as accordions, cards, columns, and counters, demonstrate the direct-edit workflow—pure JavaScript with no dependencies, accessible keyboard navigation, and responsive designs that work across devices.

Interactive Testing That Actually Works

Traditional EDS testing involves a tedious cycle: edit code, save the file, switch to the browser, refresh the page, inspect the results, switch back, and repeat. The framework eliminates this by integrating with Jupyter notebooks.

Two execution environments work together. Node.js testing with jsdom offers fast, isolated testing without the need for a browser. You run tests, get results immediately, and iterate quickly. Browser execution through the ipynb-viewer block provides full DOM testing with real browser APIs.

The clever bit is how cells work independently. Each notebook cell imports exactly what it needs when executed—no setup cells, no initialisation steps, no dependencies between cells. You can run any cell at any time in any order.

// In a Jupyter notebook cell - executes in browser

import { testBlock, showPreview } from '/scripts/ipynb-helpers.js';
// Test your block
const result = await testBlock('accordion', `
  <div>
    <div><h3>Question 1</h3></div>
    <div><p>Answer 1</p></div>
  </div>
`);

// Show responsive preview with device testing
await showPreview(result.html, 'accordion');

Generated HTML previews link to actual CSS files instead of embedding styles. This means you edit CSS and refresh the browser for instant updates - no rebuild required. The live reload functionality works because the preview references the real files.

Helper functions like testBlock() handle block decoration testing, whilst showPreview() creates full-screen overlay previews with backdrop for realistic testing. The overlay includes buttons for mobile, tablet, and desktop views for responsive testing.

Documentation That Guides Rather Than Overwhelms

The docs/for-ai directory contains 27 files organised by audience and function. New developers start with complete EDS guides and server documentation. Experienced developers dive into block architecture standards and testing frameworks. Architects review design philosophy and system patterns.

Cross-references connect related topics across files. Forty-eight bidirectional links form a navigation web that enables both humans and AI to find relevant information quickly. The structure acknowledges that development questions rarely fit into neat categories.

Project management documents cover product requirements, technical standards, and security compliance. Testing guides outline debugging policies, performance monitoring, and quality assurance procedures. Implementation guides detail component development patterns and best practices.

Each file targets specific use cases. The EDS guide runs to 1,937 lines of comprehensive platform documentation. The Jupyter notebook testing guide spans 285 lines following Anthropic's best practices, with five supporting documents adding another 750 lines of examples, installation guides, advanced techniques, and troubleshooting.

AI Assistance That Actually Helps

The .claude directory contains the Claude Code configuration, which includes 21 specialised skills and 12 workflow commands. Slash commands provide quick access to everyday tasks, such as/new-block for creating components or /test-block for running comprehensive tests.

Skills handle specialised workflows. Content-driven development orchestrates the entire block creation process. EDS block development provides implementation patterns. Jupyter notebook testing enables interactive browser-based testing. The skill-developer meta-skill helps create new skills in accordance with Anthropic's best practices.

The skill activation system automatically triggers relevant expertise based on context. Working with block files? The EDS block development skill activates. Editing test files? Testing skills engage. Creating new skills? The skill-developer provides guidance.

{
  "keywords": ["create block", "new block"],
  "intent_patterns": ["/create.*block/i"],
  "file_triggers": {
    "path_patterns": ["blocks/**/*.js"],
    "content_patterns": ["export default function decorate"]
  }
}

Priority levels ensure critical workflows get attention. Enforcement levels range from suggestions to blocking actions until requirements are met. The system makes AI assistance feel natural rather than intrusive.

Where Philosophy Meets Practice

The framework's philosophy centres on amplifying human expertise rather than replacing it. AI provides knowledge and handles repetitive tasks. Humans make decisions, apply judgment, and maintain oversight.

This approach shows up in practical choices. Documentation emphasises patterns over recipes. Skills orchestrate workflows but don't make decisions. Testing tools provide feedback, but they require human interpretation to fully understand the results.

The zero-dependency principle extends beyond npm packages. The framework eliminates the need for external build tools, compilation steps, and complex configurations. Everything runs directly - Node.js for the server, vanilla JavaScript for components, standard HTML and CSS for structure and styling.

Performance optimisation focuses on Core Web Vitals rather than arbitrary metrics. Lazy loading patterns ensure efficient resource usage. Bundle optimisation creates self-contained components with a minimal footprint. Accessibility implementation makes components work for everyone.

Getting Started Without Getting Lost

Different paths suit different needs. Developers begin with the comprehensive EDS guide, then follow the raw blocks guide for simple components before tackling complex blocks. Architects review design philosophy, study architecture standards, and analyse system patterns. Project managers begin by defining product requirements, reviewing technical standards, and implementing security checklists.

AI assistants have their own starting point. The index file provides complete navigation and context. The Claude Code README explains commands, skills, and workflows. Architecture standards guide code generation. Frontend guidelines establish quality standards. The Jupyter notebook testing guide enables interactive development.

The quick start couldn't be simpler:

git clone https://github.com/ddttom/webcomponents-with-eds.git
cd webcomponents-with-eds
node server.js
# Server running at http://localhost:3000
# No npm install required

Integrating with Adobe Boilerplate

This framework works in conjunction with Adobe's EDS boilerplate, rather than replacing it. When adding this framework to your existing Adobe EDS project, merge selectively rather than overwriting.

Cherry-pick the components you need. Copy individual blocks from the /blocks/ directory into your project's blocks folder. Take the documentation files from /docs/for-ai/ that match your requirements. Add the .claude/ directory if you're using Claude Code for AI-assisted development.

The critical rule: never overwrite files that Adobe provides. The boilerplate includes essential configuration and core functionality. This framework extends what Adobe gives you - it doesn't replace it.

If you're starting fresh, begin with Adobe's boilerplate, then layer in components and documentation from this framework. The development server (server.js) operates independently and does not conflict with Adobe's tooling. You can run both simultaneously during development.

The beauty of zero dependencies lies in the absence of package conflicts. Each component remains self-contained. The documentation references standard EDS patterns. The AI skills understand both Adobe's conventions and the patterns in this framework.

Beyond The Code

This framework represents more than technical choices. It demonstrates that modern development doesn't require accepting complexity as inevitable. Simple tools can create sophisticated results when designed thoughtfully.

The convergence of skills and documentation creates something neither could achieve alone. Adobe's skills provide structure and workflow. Comprehensive documentation provides knowledge and patterns. Together, they enable genuinely productive AI-assisted development.

The interactive testing system eliminates traditional development cycles. Direct execution in browsers, responsive preview modes, and live CSS reload transform how you work with components. The separation between fast, isolated testing and accurate browser testing provides you with both speed and confidence.

Zero dependencies prove their worth through reliability. No supply chain attacks. No breaking changes from upstream maintainers. No compatibility matrices. Just code that works today and will work tomorrow.

📚 Additional Reading

Deep-dive articles explaining the philosophy and innovations behind this framework:

Additional Reading

The Convergence: Completing Adobe's Claude Skills for Perfect EDS AI Development

Explores why skills require thorough documentation to be effective, and how this repository completes Adobe's innovation by providing the implementation knowledge layer.

Interactive Testing Innovation Series

Building Interactive Notebooks for EDS: A Journey in Context-Aware Design

The story of developing the jupyter-notebook-testing skill and ipynb-viewer block, emphasising the design choices that facilitate context-aware, browser-based testing.

Living Documentation: Browser-Based Jupyter Notebooks for Adobe EDS

How interactive notebooks transform from testing tools into living documentation that's executable, maintainable, and AI-friendly.

Original Implementation

Using Web Components in Adobe Edge Delivery Services Blocks

This framework originated from a post demonstrating how to integrate web components with EDS using zero-dependency vanilla JavaScript.

Support & Resources

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Contact: tom.cranstoun@gmail.com

Related Articles