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

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.