Home Assistant Dashboard Skill

Configure Lovelace dashboards, cards, views, and themes for Home Assistant.

Before You Start

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

Known Issues This Skill Prevents

• YAML indentation errors (must use 2 spaces, never tabs)

• Invalid entity ID format (must be domain.entity_name )

• Missing required card properties (e.g., entity for button cards)

• Incorrect view type configuration

• Theme variables with wrong syntax

Quick Start

Step 1: Enable YAML Mode (Optional)

configuration.yaml

lovelace: mode: yaml

Why this matters: YAML mode gives full control over dashboard configuration and enables version control.

Step 2: Create Basic Dashboard Structure

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.

Step 3: Add Cards to Views

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.

Critical Rules

Always Do

• Use 2-space indentation consistently

• Use entity ID format: domain.entity_name (e.g., light.living_room )

• Validate YAML before reloading (use an online YAML validator)

• Define tap_action for interactive cards

• Test on mobile devices

Never Do

• Use tabs for indentation

• Hardcode entity names that might change

• Create views with 20+ cards (split into multiple views)

• Forget forecast_type on weather-forecast cards (required since 2023)

• Mix UI-managed and YAML-managed dashboards without understanding the mode

Common Mistakes

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.

Known Issues Prevention

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

Configuration Reference

Dashboard Configuration (configuration.yaml)

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 editing

• resources : Load custom cards/CSS (only in YAML mode)

• dashboards : Define additional dashboards

View Configuration

views:

• 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

Common Patterns

Horizontal Stack of Buttons

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

Conditional Card Display

type: conditional conditions:

• condition: state entity: binary_sensor.home_occupied state: "on" card: type: entities title: Home Controls entities:
  • light.living_room
  • climate.thermostat

Bundled Resources

References

Located in references/ :

• card-reference.md

• All built-in card types with YAML examples

• view-types.md

• View layout comparison and selection guide

• theme-variables.md

• CSS variables for theming

• common-patterns.md

• Conditional visibility, stacks, entity rows

Note: For deep dives on specific topics, see the reference files above.

Assets

Located in assets/ :

• dashboard-template.yaml

• Starter dashboard configuration

• card-snippets.yaml

• Copy-paste card examples

Copy these templates as starting points for your implementation.

Context7 Documentation

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

Official Documentation

• Dashboards Overview

• Card Types

• Views

• Themes

• Custom Cards (Developer)

Troubleshooting

Dashboard Shows Blank

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'))"

Custom Card Not Loading

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

Setup Checklist

Before using this skill, verify:

• Home Assistant is running (2023.1+)

• You have access to configuration files (File Editor or VS Code add-on)

• You know your entity IDs (check Developer Tools > States)

• You've decided on YAML vs UI mode for dashboard management