web-components-architecture
CommunityArchitect robust, zero-DOM UI components.
Software Engineering#web-components#custom-elements#declarative-shadow-dom#shadow-dom#handleEvent#attribute-driven
Authormatthewharwood
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill enforces a strict architecture for Web Components: zero DOM selection, attribute-driven state, event-based output, handleEvent pattern, and Declarative Shadow DOM for server-renderable components.
Core Features & Use Cases
- Zero DOM selection and no innerHTML
- Attribute-driven state and data flow through attributes
- Event-based output via CustomEvents
- HandleEvent pattern for memory-efficient delegation
- Declarative Shadow DOM for instant rendering
- Progressive enhancement with degraded behavior when JS is unavailable
Quick Start
Define a custom element using the web-components-architecture patterns and register it with a hyphenated name; wrap internal content in a Declarative Shadow DOM template.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: web-components-architecture Download link: https://github.com/matthewharwood/engmanager.xyz/archive/main.zip#web-components-architecture Please download this .zip file, extract it, and install it in the .claude/skills/ directory.