ha-dashboard

Guide YAML-based Home Assistant Lovelace dashboard layouts, cards, views, and themes.

15|7|Updated Sep 29, 2025
One-click install
npx skills add https://github.com/nodnarbnitram/claude-code-extensions --skill ha-dashboard
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ha-dashboard
Source: https://github.com/nodnarbnitram/claude-code-extensions/tree/main/.claude/skills/ha-dashboard
Command: npx skills add https://github.com/nodnarbnitram/claude-code-extensions --skill ha-dashboard

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you configure Home Assistant Lovelace dashboards, including views, cards, and theming, reducing trial-and-error and ensuring consistent frontend setups.

Core Features & Use Cases

  • Dashboard and view configuration (Masonry, Panel, Sections, Sidebar layouts)
  • Built-in card configuration (40+ card types)
  • Theme customization and CSS variables
  • Custom card development guidance
  • HACS frontend integration recommendations

Quick Start

Enable YAML mode in Home Assistant and start with a basic dashboard template to organize views and cards.

Frequently Asked Questions about ha-dashboard

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

FAQPage Schema
How do I configure a Home Assistant Lovelace dashboard using YAML?

Configure Lovelace dashboards in YAML mode by defining views, cards, and themes with proper indentation and entity IDs. Start with a basic template organizing views by layout type—Masonry, Panel, Sections, or Sidebar—then add built-in or custom cards with their required properties.

What are the different Lovelace view layouts and when should I use each one?

Lovelace offers four view layouts: Masonry arranges cards in a responsive grid, Panel displays full-screen content, Sections organizes cards into collapsible groups, and Sidebar adds a navigation panel. Choose based on your dashboard organization needs and content density.

Can I use custom cards and HACS integrations in my Lovelace dashboard?

Yes, Lovelace supports 40+ built-in cards plus custom cards installed via HACS. Configure custom cards by referencing their resource URLs and following their specific YAML schemas to extend dashboard functionality beyond standard components.

How do I apply custom themes and CSS variables to my Lovelace dashboard?

Customize Lovelace themes by defining CSS variables in your theme YAML file, then apply the theme globally or to specific views. This controls colors, fonts, and layout styling across your dashboard without modifying individual cards.

What YAML formatting rules prevent errors when configuring Lovelace cards?

Lovelace YAML requires consistent indentation, valid entity IDs, and all required properties for each card type. Common errors stem from incorrect nesting, missing colons, or mismatched entity references—validate structure before deployment.

Can I switch between YAML and storage mode for dashboard configuration?

Home Assistant supports both YAML and storage modes for Lovelace configuration. YAML mode offers version control and manual editing, while storage mode uses the UI editor; each approach has different backup and portability implications.