Home Assistant Dashboard Skill

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

Before You Start

Known Issues This Skill Prevents

1. YAML indentation errors (must use 2 spaces, never tabs)
2. Invalid entity ID format (must be

   domain.entity_name

   )
3. Missing required card properties (e.g.,

   entity

   for button cards)
4. Incorrect view type configuration
5. Theme variables with wrong syntax

Quick Start

Step 1: Enable YAML Mode (Optional)

# configuration.yaml
lovelace:
  mode: yaml

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!

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

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

type: button
entity:light.living_room
  tap_action:
    action: toggle

type: button
entity: light.living_room
tap_action:
  action: toggle

Known Issues Prevention

lovelace.resources

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

• 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

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

assets/

• dashboard-template.yaml

  - Starter dashboard configuration

• card-snippets.yaml

  - Copy-paste card examples

Context7 Documentation

/home-assistant/home-assistant.io

/home-assistant/developers.home-assistant

/hacs/documentation

Official Documentation

• Dashboards Overview
• Card Types
• Views
• Themes
• Custom Cards (Developer)

Troubleshooting

Dashboard Shows Blank

# 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

# 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

• 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