ha-dashboard

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

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

Step 1: Enable YAML Mode (Optional)

```yaml

# 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

```yaml

# 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

```yaml

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.

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:

```yaml

type: button

entity:light.living_room

tap_action:

action: toggle

```

Correct:

```yaml

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 |

Dashboard Configuration (configuration.yaml)

```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

```yaml

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

```

Horizontal Stack of Buttons

```yaml

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

```yaml

type: conditional

conditions:

- condition: state

entity: binary_sensor.home_occupied

state: "on"

card:

type: entities

title: Home Controls

entities:

- light.living_room

- climate.thermostat

```

References

Located in references/:

• [card-reference.md](references/card-reference.md) - All built-in card types with YAML examples
• [view-types.md](references/view-types.md) - View layout comparison and selection guide
• [theme-variables.md](references/theme-variables.md) - CSS variables for theming
• [common-patterns.md](references/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](assets/dashboard-template.yaml) - Starter dashboard configuration
• [card-snippets.yaml](assets/card-snippets.yaml) - Copy-paste card examples

Copy 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 |

• [Dashboards Overview](https://www.home-assistant.io/dashboards/)
• [Card Types](https://www.home-assistant.io/dashboards/cards/)
• [Views](https://www.home-assistant.io/dashboards/views/)
• [Themes](https://www.home-assistant.io/integrations/frontend/)
• [Custom Cards (Developer)](https://developers.home-assistant.io/docs/frontend/custom-ui/lovelace-custom-card)

Dashboard Shows Blank

Symptoms: Dashboard loads but shows nothing or error.

Solution:

```bash

# 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:

```yaml

# 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:

• [ ] 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