Add Web Components patterns to web integration skill

[mattpodwysocki]

Summary

Adds comprehensive Web Components (Custom Elements) patterns as a framework-agnostic alternative to framework-specific integration patterns.

What's Added

New Section in SKILL.md:

• Basic Custom Element - Standard pattern with connectedCallback / disconnectedCallback
• Attribute Configuration - Reading map config from HTML attributes
• Shadow DOM Pattern - Encapsulated styles (optional, more complex)
• Reactive Attributes - Using observedAttributes + attributeChangedCallback for live updates
• Framework Usage Examples - How to use the same component in React, Vue, Svelte, vanilla JS

Patterns Covered

Basic Web Component

class MapboxMap extends HTMLElement {
  connectedCallback() {
    // Initialize map
    this.map = new mapboxgl.Map({ container: this, ... });
  }
  
  disconnectedCallback() {
    // CRITICAL: cleanup
    this.map?.remove();
  }
}
customElements.define('mapbox-map', MapboxMap);

Usage Across Frameworks

The same component works without modification in:

• React - Via ref and custom event listeners
• Vue - Via template refs and @event bindings
• Svelte - Via bind:this and on:event
• Vanilla JS - Direct HTML usage

Advanced Patterns

• Shadow DOM for style encapsulation
• Reactive attributes that update map on attribute change
• Custom events for map interactions
• Exposed methods via getMap()

Benefits

✅ Framework-agnostic - write once, use everywhere
✅ No framework lock-in - web platform standard
✅ Maximum portability - ideal for component libraries
✅ Future-proof - based on web standards
✅ Encapsulation - clear API via attributes

When to Use

• Building component libraries used across multiple frameworks
• Micro-frontends architecture
• Maximum reusability requirements
• Want to avoid framework-specific code
• Need a portable, standard-based solution

When to Use Framework Components Instead

• Deep framework integration needed (state management, routing)
• Team already committed to specific framework
• Using framework-specific features (hooks, Composition API)
• Team more familiar with framework patterns

Testing

• Added comprehensive Web Components section
• Included basic, Shadow DOM, and reactive patterns
• Usage examples for React, Vue, Svelte, vanilla JS
• Updated skill description to mention Web Components
• Updated main README.md
• Follows existing skill standards

---

Addresses user request to add Web Components as framework-agnostic alternative to framework-specific patterns.