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.

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

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

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:

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