Help us improve
Share bugs, ideas, or general feedback.
From cce-homeassistant
Configures Home Assistant Lovelace dashboards, cards, views, and themes using YAML. Prevents errors in indentation, entity IDs, card properties, and view layouts. Use for editing dashboard YAML or custom cards.
npx claudepluginhub nodnarbnitram/claude-code-extensions --plugin cce-homeassistantHow this skill is triggered — by the user, by Claude, or both
Slash command
/cce-homeassistant:ha-dashboardThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Configure Lovelace dashboards, cards, views, and themes for Home Assistant.
Provides advanced Lovelace dashboard patterns for Home Assistant, including ui-lovelace.yaml structures, card types, layouts, conditional cards, custom cards, themes, and responsive designs.
Use when listing, reading, creating, updating, or deleting storage-backed Home Assistant dashboards, Lovelace resources, and targeted card changes through HA NOVA Relay.
Create and manage Home Assistant YAML configuration files including automations, scripts, templates, blueprints, Lovelace dashboards, and file organization. Use when working with Home Assistant configuration files (.yaml, .yml) or discussing HA automations, scripts, sensors, or dashboards.
Share bugs, ideas, or general feedback.
Configure Lovelace dashboards, cards, views, and themes for Home Assistant.
This skill prevents 5 common errors and saves ~40% tokens.
| Metric | Without Skill | With Skill |
|---|---|---|
| Setup Time | 30+ min | 10 min |
| Common Errors | 5 | 0 |
| Token Usage | ~8000 | ~4800 |
domain.entity_name)entity for button cards)# configuration.yaml
lovelace:
mode: yaml
Why this matters: YAML mode gives full control over dashboard configuration and enables version control.
# ui-lovelace.yaml or dashboards.yaml
title: My Home
views:
- title: Home
path: home
cards:
- type: markdown
content: Welcome to your dashboard!
Why this matters: This minimal structure validates your YAML setup before adding complexity.
views:
- title: Living Room
path: living-room
cards:
- type: entities
title: Lights
entities:
- light.living_room
- light.kitchen
- type: weather-forecast
entity: weather.home
forecast_type: daily
Why this matters: Cards are the building blocks of dashboards - start with simple cards before complex ones.
domain.entity_name (e.g., light.living_room)tap_action for interactive cardsforecast_type on weather-forecast cards (required since 2023)Wrong:
type: button
entity:light.living_room
tap_action:
action: toggle
Correct:
type: button
entity: light.living_room
tap_action:
action: toggle
Why: Missing space after colon and incorrect indentation are the most common YAML errors.
| Issue | Root Cause | Solution |
|---|---|---|
| "Unknown card type" | Missing custom card resource | Add to lovelace.resources |
| Cards not updating | Browser cache | Hard refresh (Ctrl+Shift+R) |
| Theme not applying | Wrong variable name | Check theme variable spelling |
| Blank dashboard | YAML syntax error | Validate YAML, check logs |
| Entity unavailable | Wrong entity ID | Check entity in Developer Tools > States |
lovelace:
mode: yaml # or 'storage' for UI mode
resources:
- url: /local/card.js # Custom card resources
type: module
dashboards:
lovelace-custom:
mode: yaml
title: Custom
icon: mdi:view-dashboard
show_in_sidebar: true
filename: custom-dashboard.yaml
Key settings:
mode: yaml for manual control, storage for UI editingresources: Load custom cards/CSS (only in YAML mode)dashboards: Define additional dashboardsviews:
- title: View Name # Tab title
path: view-path # URL path (/lovelace/view-path)
icon: mdi:home # Tab icon (optional)
type: masonry # masonry, panel, sections, sidebar
theme: dark-mode # Apply specific theme
subview: false # Hide from navigation
cards: [] # Card list
type: horizontal-stack
cards:
- type: button
entity: light.living_room
name: Living
tap_action:
action: toggle
- type: button
entity: light.bedroom
name: Bedroom
tap_action:
action: toggle
type: conditional
conditions:
- condition: state
entity: binary_sensor.home_occupied
state: "on"
card:
type: entities
title: Home Controls
entities:
- light.living_room
- climate.thermostat
Located in references/:
card-reference.md - All built-in card types with YAML examplesview-types.md - View layout comparison and selection guidetheme-variables.md - CSS variables for themingcommon-patterns.md - Conditional visibility, stacks, entity rowsNote: For deep dives on specific topics, see the reference files above.
Located in assets/:
dashboard-template.yaml - Starter dashboard configurationcard-snippets.yaml - Copy-paste card examplesCopy these templates as starting points for your implementation.
For current documentation, use these Context7 library IDs:
| Library ID | Purpose |
|---|---|
/home-assistant/home-assistant.io | User docs - dashboards, cards, views, themes |
/home-assistant/developers.home-assistant | Developer docs - custom card development |
/hacs/documentation | HACS frontend cards |
Symptoms: Dashboard loads but shows nothing or error.
Solution:
# Check Home Assistant logs
ha core logs | grep -i lovelace
# Validate YAML online or locally
python -c "import yaml; yaml.safe_load(open('ui-lovelace.yaml'))"
Symptoms: "Custom element doesn't exist" error.
Solution:
# Ensure resource is loaded
lovelace:
resources:
- url: /local/my-card.js
type: module # or 'js' for non-module
# Check file exists at /config/www/my-card.js
Before using this skill, verify: