skills.rest
Bobsilvio
BobsilvioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

html-js-card

Creates Home Assistant Lovelace cards using inline HTML, CSS, and JavaScript.

86|7|Updated Feb 8, 2026
Search Tags:#html#javascript#dashboard#home assistant#lovelace#shadow dom#custom card
One-click install
npx skills add https://github.com/Bobsilvio/ha-claude --skill html-js-card-bobsilvio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-js-card
Source: https://github.com/Bobsilvio/ha-claude/tree/main/.claude/skills/html-js-card
Command: npx skills add https://github.com/Bobsilvio/ha-claude --skill html-js-card-bobsilvio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building custom Lovelace dashboard cards in Home Assistant requires knowing how to work with the hass object, entity states, service calls, and shadow DOM, which is poorly documented and error-prone for most users. ## Core Features & Use Cases - Custom Card Creation: Guides the creation of Lovelace cards with inline HTML, CSS, and JavaScript. - Home Assistant Integration: Covers hass/entities/card variables, hass-update events, and callService for controlling devices from a card. - Shadow DOM Handling: Explains how to work with shadow DOM when rendering card content. - Use Case: Ask for a card that shows a room's temperature with a button that toggles the climate entity, and receive working HTML-JS card code. ## Quick Start Ask the assistant to create an HTML-JS card for Home Assistant that displays a sensor value and calls a service when clicked.

Frequently Asked Questions about html-js-card

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom Lovelace card with HTML and JavaScript?▼

Define a card using inline HTML, CSS, and JavaScript that accesses the hass object for entity states and renders content into the card element. The skill covers hass/entities/card variables and the hass-update event for reactive updates.

How to call a Home Assistant service from a custom card?▼

Use the callService method available on the hass object, passing the domain, service name, and target entity. This lets card buttons or controls trigger actions like toggling lights or setting climate temperatures.

Does the HTML-JS card work with shadow DOM in Home Assistant?▼

Yes, the skill covers shadow DOM handling, which is required because Lovelace renders cards inside shadow roots. You must attach and query elements within the card's shadow root rather than the global document.

Why is my custom card not updating when entity states change?▼

Cards must listen to the hass-update event or react to hass object changes to re-render when entity states update. Without this binding, the card shows stale data until the dashboard refreshes.

Related Skills

Explore More Software Engineering Skills→
ojiudezueojiudezue
1

ha-dashboard

Automate Home Assistant Lovelace dashboard configuration and customization.

Community
Advanced
nodnarbnitramnodnarbnitram
15

ha-dashboard

Guide YAML-based Home Assistant Lovelace dashboard layouts, cards, views, and themes.

Community
Advanced
markus41markus41
18

Home Assistant Automation Skill

Create YAML automations for Home Assistant with triggers, conditions, and actions.

Community
Intermediate
syncfusionsyncfusion
5

syncfusion-wpf-calculator

Automates Syncfusion SfCalculator integration in WPF apps with memory operations and MVVM bindings.

Official
Advanced