Scaffold a vanilla-JS Lovelace card under custom_components/<domain>/www/<card-name>.js with every mandatory lifecycle method, shadow DOM, entity-change detection, HA CSS custom properties, and auto-registration in __init__.py. Activate on phrasings like "scaffold a Lovelace card for the integration", "add a custom Lovelace card called `<name>`", "erstelle eine Custom-Card für `<Resource>`". Do not activate for greenfield setup (use ha-integration-scaffold), TypeScript / Lit cards, or card removal.
How this skill is triggered — by the user, by Claude, or both
Slash command
/claude-home-assistant:ha-lovelace-card-scaffoldThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Spec: <https://github.com/nolte/claude-home-assistant/blob/develop/spec/claude/ha-lovelace-card-scaffold/de.md> (DE canonical) / [`en.md`](https://github.com/nolte/claude-home-assistant/blob/develop/spec/claude/ha-lovelace-card-scaffold/en.md).
Spec: https://github.com/nolte/claude-home-assistant/blob/develop/spec/claude/ha-lovelace-card-scaffold/de.md (DE canonical) / en.md.
Use this skill when the user wants to add a custom Lovelace card to an existing HA Custom Integration — a vanilla-JS card living under custom_components/<domain>/www/, auto-registered through __init__.py.
ha-integration-scaffoldvar(--primary-text-color) etc.) so the card respects the active theme.cache_headers=False in the StaticPathConfig. Otherwise updated cards stay stale for cached browsers.getCardSize, getGridOptions, setConfig, and getStubConfig. Sections-layout and the card picker depend on them.set hass. Re-rendering on every HA state tick burns CPU for nothing.| Field | Required | Default | Notes |
|---|---|---|---|
target_dir | yes | — | repo root |
card_type | yes | — | lowercase kebab-case, prefixed with <domain> |
display_name | yes | — | card-picker name |
description | yes | — | description in the picker |
entity_types | yes | — | list of platforms the card consumes |
preview | no | false | preview in picker |
grid_options | no | {columns: 6, rows: 3, min_columns: 3, min_rows: 2} | sections-layout defaults |
git -C <target_dir> rev-parse --is-inside-work-tree and clean working treedomain from manifest.json<target_dir>/custom_components/<domain>/www/<card-name>.js does not existStaticPathConfig entry for this card name in __init__.pyPrint the card name, type, picker label, grid options. Wait for user confirmation.
custom_components/<domain>/www/<card-name>.js — the full skeleton (class, lifecycle methods, shadow DOM, render method with CSS custom properties, customElements.define, window.customCards push)__init__.py — append StaticPathConfig block (or extend the existing block list) with cache_headers=Falsetests/test_lovelace_cleanup.py (when present) — append assertion for the new cardruff check custom_components/<domain>/__init__.py
pytest tests/ -v
_render bodyGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub nolte/claude-home-assistant --plugin claude-home-assistant