ha-dashboard

Configure Home Assistant Lovelace dashboards, cards, views, and themes in YAML.

Updated Jun 11, 2026
One-click install
npx skills add https://github.com/brillianodhiya/VisionScript --skill ha-dashboard-brillianodhiya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ha-dashboard
Source: https://github.com/brillianodhiya/VisionScript/tree/main/.agents/skills/ha-dashboard
Command: npx skills add https://github.com/brillianodhiya/VisionScript --skill ha-dashboard-brillianodhiya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve? Building Home Assistant Lovelace dashboards by hand leads to YAML indentation errors, invalid entity IDs, missing card properties, and broken custom card resources. This Skill provides validated configuration patterns, card references, and troubleshooting guidance to produce working dashboard YAML on the first attempt. ## Core Features & Use Cases - Card Configuration: YAML examples for 40+ built-in card types including entities, tile, gauge, weather-forecast, picture-elements, and conditional cards. - View Layouts: Guidance for Masonry, Panel, Sections, and Sidebar view types with selection criteria and migration tips. - Theming: CSS variable reference for colors, typography, dark mode, and per-view or per-card theme application. - Use Case: Create a multi-view smart home dashboard with a lights view using entity-filter cards, a climate view with gauges and history graphs, and a security view with an alarm panel, all from the included starter template. ## Quick Start Ask the assistant to create a Home Assistant dashboard with an entities card for your lights and a weather-forecast card using the ha-dashboard skill.

Frequently Asked Questions about ha-dashboard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Lovelace dashboard in YAML mode?▼

Set lovelace mode to yaml in configuration.yaml, then define views with cards in ui-lovelace.yaml. Start with a minimal view containing one markdown card to validate your setup before adding complex cards.

How to fix "Unknown card type" error in Home Assistant?▼

The error means a custom card resource is not loaded. Add the card's JavaScript file to lovelace.resources with type module, verify the file exists under /config/www/, then hard refresh the browser with Ctrl+Shift+R.

Which Lovelace view type should I use for my dashboard?▼

Use Sections for organized grid layouts and UI editing, Masonry for quick general-purpose dashboards, Panel for single full-width cards like maps, and Sidebar for two-column layouts with a main area plus info sidebar.

Does the weather-forecast card require any mandatory properties?▼

Yes, forecast_type is required since Home Assistant 2023. Set it to daily, hourly, or twice_daily along with a valid weather entity, or the card will fail to render the forecast.

Why is my Home Assistant theme not applying?▼

Theme failures usually come from misspelled CSS variable names or themes not reloaded. Verify variable spelling, confirm the theme is defined under frontend.themes, then run frontend.reload_themes and clear the browser cache.

When should I not use this dashboard skill?▼

Do not use it for Home Assistant automations, scripts, integration setup, add-on management, or entity configuration. It only covers Lovelace frontend concerns: dashboards, cards, views, and themes.