🎯

ha-dashboard

🎯Skill

from nodnarbnitram/claude-code-extensions

VibeIndex|
What it does

ha-dashboard skill from nodnarbnitram/claude-code-extensions

πŸ“¦

Part of

nodnarbnitram/claude-code-extensions(19 items)

ha-dashboard

Installation

Add MarketplaceAdd marketplace to Claude Code
/plugin marketplace add github:nodnarbnitram/claude-code-extensions
Install PluginInstall plugin from marketplace
/plugin install cce-core@cce-marketplace
Install PluginInstall plugin from marketplace
/plugin install cce-kubernetes@cce-marketplace # For Kubernetes development
Install PluginInstall plugin from marketplace
/plugin install cce-cloudflare@cce-marketplace # For Cloudflare Workers/AI
Install PluginInstall plugin from marketplace
/plugin install cce-esphome@cce-marketplace # For ESPHome IoT

+ 6 more commands

πŸ“– Extracted from docs: nodnarbnitram/claude-code-extensions
9Installs
3
-
Last UpdatedJan 15, 2026

Skill Details

SKILL.md

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

Overview

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

| 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

Quick Start

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.

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:

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

Known Issues Prevention

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

Configuration Reference

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

```

Common Patterns

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

```

Bundled Resources

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.

Context7 Documentation

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 |

Official Documentation

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

Troubleshooting

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

```

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