Configure Home Assistant Lovelace dashboards, cards, views, and themes. Use when working with dashboard YAML, card configuration, view layouts, custom cards, or frontend theming.
From cce-homeassistantnpx claudepluginhub nodnarbnitram/claude-code-extensions --plugin cce-homeassistantThis skill is limited to using the following tools:
README.mdassets/card-snippets.yamlassets/dashboard-template.yamlreferences/card-reference.mdreferences/common-patterns.mdreferences/theme-variables.mdreferences/view-types.mdDesigns and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Implements structured self-debugging workflow for AI agent failures: capture errors, diagnose patterns like loops or context overflow, apply contained recoveries, and generate introspection reports.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
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: