Build reusable UI components using Web Components standards — Custom Elements, Shadow DOM, HTML templates, and slots. Includes Lit framework patterns. [EXPLICIT] Trigger: "web component", "custom element", "shadow DOM", "Lit element"
From jm-adknpx claudepluginhub javimontano/jm-adk-alfaThis skill is limited to using the following tools:
agents/guardian.mdagents/lead.mdagents/specialist.mdagents/support.mdevals/evals.jsonknowledge/body-of-knowledge.mdknowledge/knowledge-graph.mdprompts/meta.mdprompts/primary.mdprompts/variations/deep.mdprompts/variations/quick.mdtemplates/output.docx.mdtemplates/output.htmlSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
"The best component is the one that works everywhere without asking permission." — Alex Russell
Guides the creation of framework-agnostic UI components using Web Components standards (Custom Elements v1, Shadow DOM, slots, HTML templates) and the Lit library for ergonomic development. Use when you need reusable components that work across any framework or vanilla HTML. [EXPLICIT]
::part() selectors for themingobservedAttributes and property reflection for framework interopdark-mode — CSS custom properties bridge theme tokens into Shadow DOMaccessibility-testing — Shadow DOM requires careful ARIA and focus managementExample invocations:
| Scenario | Handling |
|---|---|
| Empty or minimal input | Request clarification before proceeding |
| Conflicting requirements | Flag conflicts explicitly, propose resolution |
| Out-of-scope request | Redirect to appropriate skill or escalate |