← ClaudeAtlas

ha-lovelace-cardlisted

Design a Home Assistant Lovelace dashboard card or view and preview it live. Use when the user wants to build, add, or tweak a dashboard card (entities/glance/gauge/history-graph/custom) and see how it looks — write the card YAML, screenshot it with ha-shot, read the PNG, and iterate until it looks right.
LayerTM/ClaudeInHA · ★ 0 · AI & Automation · score 70
Install: claude install-skill LayerTM/ClaudeInHA
Build a Lovelace card by iterating against a real screenshot — never hand a user card YAML you have not *seen* render. The whole loop: **write the card → `ha-shot` → Read the PNG → adjust → repeat.** Set a shorthand for the Supervisor-proxied Core API (the token is always present): ```bash API=http://supervisor/core/api AUTH="Authorization: Bearer $SUPERVISOR_TOKEN" ``` ## 1. Use real entities Cards that reference non-existent entities render as errors. Find the exact `entity_id`s first: ```bash ha-state sensor. # list a domain ha-state light.living_room # confirm one entity + its attributes ``` Or via the API: `curl -sf -H "$AUTH" "$API/states" | jq -r '.[].entity_id'`. ## 2. Where dashboards live — pick the right file to edit | Mode | Config location | How it updates | |---|---|---| | **Storage** (default; "edit in the UI") | `/homeassistant/.storage/lovelace` (default dash), `/homeassistant/.storage/lovelace.<url_path>` (extra dashes), `.storage/lovelace_resources` (custom-card JS) | Cached in memory. Edit via the UI raw-config editor (live). A direct file edit only takes effect after a **Core restart** — avoid. | | **YAML** | default: `/homeassistant/ui-lovelace.yaml` (needs `lovelace: mode: yaml`); extra: files under `/homeassistant/dashboards/` declared in `configuration.yaml` | **Re-read on every fresh page load.** `ha-shot` launches a new browser each run, so the file is re-read every screenshot — no restart between iterations. | **For AI-driven it