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

My comprehensive docs/for-ai provides the missing 90% that makes Adobe's EDS Skills actually work - creating the complete AI development environment.

The Missing Piece

Anthropic developed Claude Skills, and Adobe created EDS-specific skills. However, a crucial challenge emerged: skills are lightweight orchestrators that rely on comprehensive documentation for effective operation. Without detailed implementation knowledge, they function merely as process guides, instructing the AI on what to do. To achieve true efficacy, they must also guide the AI on how to do it.

My webcomponents-with-eds repository solved this gap with its docs/for-ai approach - 25+ comprehensive guides containing the actual implementation knowledge that skills reference.

Look at the reality of how these systems work together:

.claude/skills/          # Adobe's lightweight orchestrators (~10% of knowledge)
├── building-blocks/     # Points to implementation details
├── testing-blocks/      # References testing standards
└── [workflow guides]    # Needs comprehensive docs to function

docs/for-ai/            # My comprehensive implementation (~90% of knowledge)
├── implementation/     # The actual how-to knowledge
├── guidelines/         # Detailed standards and patterns
└── testing/           # Complete testing philosophy

The convergence isn't just complementary - it's essential. Without docs/for-ai, skills would need to be expanded by 10x to include the knowledge they currently reference.

The Architecture

My webcomponents-with-eds repository provides the comprehensive foundation that makes skills effective:

My Foundation: docs/for-ai (~90% of knowledge)

Adobe's Orchestration: EDS Skills (~10% of knowledge)

Adobe's skills, when combined with my comprehensive docs/for-ai documentation, create a complete AI assistant system. This is because skills alone are like a library catalog without books; they orchestrate workflows but lack deep implementation knowledge. My docs/for-ai provides that essential knowledge, ensuring AI assistants have both the processes and the detailed understanding needed for effective development.

How Skills Depend on docs/for-ai

The webcomponents-with-eds repository's docs/for-ai contains the comprehensive knowledge that skills reference:

webcomponents-with-eds/docs/for-ai/
├── implementation/          # Complete EDS component guides
│   ├── block-architecture-standards.md  # Referenced by building-blocks skill
│   ├── complex-eds-blocks-guide.md      # Essential for component creation
│   └── raw-eds-blocks-guide.md          # Core implementation knowledge
├── guidelines/             # Detailed development standards
│   ├── frontend-guidelines.md           # Referenced by multiple skills
│   ├── security-checklist.md            # Security implementation details
│   └── style-guide.md                   # Complete styling standards
└── testing/               # Comprehensive testing knowledge
    ├── eds-architecture-and-testing-guide.md  # Referenced by testing-blocks skill
    └── eds-native-testing-standards.md        # Testing philosophy and practice

Adobe's EDS Skills orchestrate workflows but depend on this documentation:

.claude/skills/
├── building-blocks/        # Orchestrates block creation → needs implementation docs
├── testing-blocks/         # Guides testing workflow → needs testing standards
└── content-driven-development/  # Manages CDD → needs architectural knowledge

Docs/for-ai elevates skills from being process guides into potent orchestrators of extensive knowledge, making them truly wonderful. With Docs/for-ai, skills are truly complete.

The Gap Analysis - Why Both Are Essential

When analysing the relationship between Skills and docs/for-ai, the dependency becomes clear:

Current State Reality

What Adobe's EDS Skills Provide

What docs/for-ai Provides

The gap analysis reveals a symbiotic relationship. Adobe's innovation provides the orchestration layer. My docs/for-ai provides the knowledge foundation. Remove either one, and the system fails.

Real-World Impact of the Complete System

The webcomponents-with-eds repository demonstrates what happens when comprehensive documentation meets lightweight orchestration:

What I Built Early

My repository solved the fragmented workflow problem with:

What Adobe's Skills Add

Adobe's EDS Skills (built on Anthropic's Claude Skills framework) provide:

The Combined Result

When Skills orchestrate docs/for-ai knowledge:

Now the skills automatically refer to the knowledge

Proven components like the Shoelace Card (130KB of sophisticated effects) demonstrate this works in production with perfect Lighthouse scores.

Slash Commands added to improve coordination

/.claude/commands
├── check-block.md
├── check-security.md
├── deploy-block.md
├── find-block-content.md
├── lint-all.md
├── new-block.md
├── review-docs.md
├── start-cdd.md

An Example ‘new-block’ /command

---

description: Create a new EDS block following Content Driven Development (CDD) process
---

You are creating a new EDS block. Follow these steps:

1. **Invoke the content-driven-development skill** to start the CDD process
2. The skill will guide you through:
   - Content model design
   - Test content creation
   - Block implementation
   - Testing and validation

**IMPORTANT**:
- Never skip the CDD process when creating new blocks
- Author needs come before developer needs
- Always create test content before writing code

Use this pattern to create and document the new block:

─ blocks/                         # 📝 DIRECT DEVELOPMENT
    └── {component-name}/
        ├── {component-name}.js     # Source code (edit directly)
        ├── {component-name}.css    # Source styles (edit directly)
        ├── README.md               # Documentation for Content Author
        ├── test.html               # Test file
        └── example.md              # Content author example of the component
        

If the user provides a block name as an argument, use it. Otherwise, ask the user:
"What would you like to name this new block?"

After getting the block name, invoke the content-driven-development skill and begin the process.

The Convergence Pattern in Practice

The webcomponents-with-eds repository structure shows how the convergence works:

webcomponents-with-eds/

├── docs/for-ai/                 # Comprehensive knowledge foundation
│   ├── implementation/          # Detailed component guides
│   │   ├── block-architecture-standards.md
│   │   ├── build-blocks-clarification.md
│   │   ├── complex-eds-blocks-guide.md
│   │   └── design-philosophy-guide.md
│   ├── guidelines/              # Project principles
│   │   ├── frontend-guidelines.md
│   │   ├── prd.md
│   │   └── security-checklist.md
│   └── testing/                 # Testing philosophy
│       └── eds-native-testing-standards.md
│
├── blocks/                      # Simple EDS components
│   ├── cards/                  # Vanilla JavaScript
│   ├── counter/                # Zero dependencies
│   └── shoelace-card/          # Deployed sophisticated component
│
└── build/                       # Complex components workspace
    └── shoelace-card/          # Development with full tooling
        ├── package.json
        └── vite.config.js

When enhanced with Adobe's Skills:

Why This Convergence Matters

The combination of my comprehensive docs/for-ai with Adobe's EDS Skills creates something neither could achieve alone:

  1. Orchestration needs implementation - Skills provide workflows, docs/for-ai provides the knowledge
  2. Lightweight plus comprehensive - Skills stay maintainable while docs provide depth
  3. Universal meets specific - Adobe's patterns work everywhere, docs add project reality
  4. 90% + 10% = 100% - Together they form a complete AI assistance system

Adobe's skills are brilliant orchestrators. My docs/for-ai provides what they orchestrate. This isn't just complementary - it's symbiotic. Skills make documentation actionable. Documentation makes skills meaningful.

The convergence shows that effective AI assistance needs both:

Skills in Practice

Here's how the convergence transforms actual development:

Block Development

Performance Optimization

Content Migration

What This Means for Developers

The implications of this convergence are profound:

Immediate Adoption Path

  1. Start with comprehensive docs/for-ai for knowledge foundation
  2. Add Adobe's Skills for workflow orchestration
  3. Let them work together symbiotically
  4. Watch AI transform into a knowledgeable partner

The 90/10 Rule

Accelerated Development

With both pieces in place:

The Complete Architecture

The webcomponents-with-eds repository demonstrates how comprehensive documentation completes lightweight orchestration:

  1. Comprehensive beats lightweight - 90% of knowledge needs to live somewhere substantial
  2. Documentation as foundation - Skills can reference but can't contain everything
  3. Orchestration needs implementation - Process without knowledge is empty
  4. Local-first enables everything - AI needs to see all the pieces

The repository proves that effective AI assistance requires:

Beyond EDS

The symbiotic pattern transcends Adobe Edge Delivery Services:

This proves an important principle: AI-first development needs both orchestration AND comprehensive documentation. Anthropic provided the framework. Adobe provided EDS-specific orchestration. I provided the implementation knowledge. Together, we've discovered the formula for effective AI assistance.

The pattern is reproducible:

  1. Start with comprehensive documentation (docs/for-ai)
  2. Add lightweight orchestration (Skills)
  3. Let AI leverage both for complete understanding

Practical Next Steps

For teams inspired by this convergence:

  1. Explore the repository - webcomponents-with-eds shows the complete pattern
  2. Build comprehensive docs/for-ai - Invest in the 90% knowledge foundation
  3. Add Adobe's Skills - Lightweight orchestration on top
  4. Maintain the split - Keep skills lightweight, documentation comprehensive
  5. Share your experience - Help evolve both approaches

The Path Forward

The convergence opens new possibilities:

Enhanced Orchestration

Skills can become more sophisticated orchestrators when they have comprehensive documentation to reference.

Living Documentation

docs/for-ai can evolve based on what skills need to reference most frequently.

Community Knowledge

Teams can share both orchestration patterns (Skills) and implementation knowledge (docs/for-ai).

Conclusion - The Complete System

The webcomponents-with-eds repository provides the comprehensive foundation that makes Adobe's EDS Skills truly functional. Without the ~90% of implementation knowledge in docs/for-ai, skills would be hollow orchestrators pointing to missing documentation.

The complete picture:

The evidence is clear:

When I created docs/for-ai, I was solving the 2 AM debugging problem - creating comprehensive documentation that AI could understand. Adobe's skills provide the orchestration layer that makes this knowledge actionable. The convergence isn't just beneficial - it's essential.

My contribution makes Adobe's innovation complete. Their skills make my documentation actionable. Together, we've created the complete AI development environment.

Your next EDS project needs both pieces. Use Adobe's Skills for orchestration. Add comprehensive docs/for-ai for the actual knowledge. Watch as AI transforms from confused observer to knowledgeable partner with both the workflows AND the implementation details.

The future of AI-assisted EDS development requires both orchestration and knowledge. The webcomponents-with-eds repository shows how to provide both.

/fragments/ddt/proposition
style
bg-dark

Related Articles

Back to Top