MCPInstall

ha-dashboard

by nodnarbnitramData & Databases

Configure Home Assistant Lovelace dashboards, cards, views, and themes. Use when working with dashboard YAML, card configuration, view layouts, custom cards, or frontend theming.

Installs
80
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/nodnarbnitram/claude-code-extensions --skill ha-dashboard
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads ha-dashboard automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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.

MetricWithout SkillWith Skill
Setup Time30+ min10 min
Common Errors50
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

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

IssueRoot CauseSolution
"Unknown card type"Missing custom card resourceAdd to lovelace.resources
Cards not updatingBrowser cacheHard refresh (Ctrl+Shift+R)
Theme not applyingWrong variable nameCheck theme variable spelling
Blank dashboardYAML syntax errorValidate YAML, check logs
Entity unavailableWrong entity IDCheck entity in Developer Tools > States

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:

Library IDPurpose
/home-assistant/home-assistant.ioUser docs - dashboards, cards, views, themes
/home-assistant/developers.home-assistantDeveloper docs - custom card development
/hacs/documentationHACS frontend cards

Official Documentation

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

FAQ

What does the ha-dashboard skill do?

Configure Home Assistant Lovelace dashboards, cards, views, and themes. Use when working with dashboard YAML, card configuration, view layouts, custom cards, or frontend theming.

How do I install ha-dashboard?

Run npx skills add https://github.com/nodnarbnitram/claude-code-extensions --skill ha-dashboard in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ha-dashboard/ (personal) or .claude/skills/ha-dashboard/ (project).

Which AI agents can use ha-dashboard?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is ha-dashboard safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains ha-dashboard?

It is published by nodnarbnitram in nodnarbnitram/claude-code-extensions. It has 80 recorded installs.

More from nodnarbnitram/claude-code-extensions

View all →

tauri-v2

nodnarbnitram/claude-code-extensions

Tauri v2+ cross-platform app development with Rust backend. Use when configuring tauri.conf.json, implementing Rust commands ([tauri::command]), setting up IPC patterns (invoke, emit, channels), configuring permissions/capabilities, troubleshooting build issues, or deploying desktop/mobile apps. Triggers on Tauri, src-tauri, invoke, emit, capabilities.json.

Backend & APIs8.1K installs

code-reviewer

nodnarbnitram/claude-code-extensions

Review code for best practices, security issues, and potential bugs. Use when reviewing code changes, checking PRs, analyzing code quality, or performing security audits.

Code Quality & Workflow293 installs

ha-voice

nodnarbnitram/claude-code-extensions

Configure Home Assistant Assist voice control with pipelines, intents, wake words, and speech processing. Use when setting up voice control, creating custom intents, configuring TTS/STT, or building voice satellites. Activates on keywords: Assist, voice control, wake word, intent, sentence, TTS, STT, Piper, Whisper, Wyoming.

Media & Creative218 installs

esphome-config-helper

nodnarbnitram/claude-code-extensions

This skill should be used when the user asks to "create an esphome config", "set up an esp32 device", "configure esphome yaml", "add a sensor to esphome", "fix esphome compile error", or mentions "gpio pin assignment", "wifi setup", "ota update", or error messages like "Unknown platform", "GPIO already in use", "Could not compile", or "WiFi connection failed". Provides rapid ESPHome configuration generation, troubleshooting, and validation.

136 installs

frigate-configurator

nodnarbnitram/claude-code-extensions

Open the skill to read its SKILL.md instructions.

117 installs

ha-energy

nodnarbnitram/claude-code-extensions

Open the skill to read its SKILL.md instructions.

104 installs

Popular data & databases skills

View category →

supabase-postgres-best-practices

supabase/agent-skills

Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill BEFORE writing or changing anything that lives in a Postgres database: creating or altering tables and columns (including choosing column types), schema design, migrations and declarative schema files, RLS policies and the tests that verify them, indexes, triggers, database functions, queues and scheduled jobs (pgcron, pgmq), vector/semantic search (pgvector), and restoring dumps (pgrestore) or importing data. Also load it when diagnosing slow queries, high CPU, timeouts, EXPLAIN plans, connection exhaustion, locking, bloat, or rows visible to the wrong user or tenant. This is not just a performance guide — schema, migration, security, and SQL authoring tasks need these rules too, even for a one-column change or a single query.

OfficialData & Databases462.2K installs

prisma-client-api

prisma/skills

Prisma Client API reference covering model queries, filters, operators, and client methods. Use when writing database queries, using CRUD operations, filtering data, or configuring Prisma Client. Triggers on "prisma query", "findMany", "create", "update", "delete", "$transaction".

OfficialData & Databases393.5K installs

prisma-database-setup

prisma/skills

Deprecated compatibility name for prisma-orm-setup. Use only when a user or existing integration explicitly invokes prisma-database-setup; otherwise select prisma-orm-setup.

OfficialData & Databases392.3K installs

prisma-cli

prisma/skills

Prisma ORM 7 CLI reference for existing Prisma 7 applications or explicitly selected Prisma 7 workflows. Covers prisma init, generate, migrate, db, dev, studio, and mcp. For setup, connection repair, or Prisma 8, use prisma-orm-setup; not the Prisma Platform CLI.

OfficialData & Databases390.8K installs

prisma-postgres

prisma/skills

Deprecated compatibility name for prisma-postgres-setup. Use only when a user or existing integration explicitly invokes prisma-postgres; otherwise select prisma-postgres-setup.

OfficialData & Databases384.4K installs

prisma-driver-adapter-implementation

prisma/skills

Required reference for Prisma ORM 7 SQL driver adapter work. Use when implementing or modifying adapters, adding database drivers, or touching SqlDriverAdapter, Transaction, savepoint, result mapping, or DriverAdapterError behavior. Covers current transaction lifecycle, optional savepoint hooks, original database-error preservation, and verification.

OfficialData & Databases378.9K installs