Skills
.Work. You
Rest

Lovelace Dashboard Design Skill

Community

Craft beautiful Home Assistant dashboards.

Design & Creative#ui#customization#yaml#home assistant#lovelace#dashboard design
Authormarkus41
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill simplifies the creation and customization of Lovelace dashboards for Home Assistant, enabling users to design visually appealing and functional user interfaces for their smart homes.

Core Features & Use Cases

  • Dashboard Structure: Provides YAML examples for organizing dashboard views, including titles, paths, and icons.
  • Card Types: Details various built-in and custom card types (e.g., entities, custom:button-card, custom:mushroom-*) and their use cases.
  • Layout & Styling: Offers guidance on using layout cards (grid, horizontal-stack, vertical-stack) and applying themes and card-mod for custom styling.
  • Responsive Design: Includes patterns for device detection and view visibility to ensure dashboards adapt to different screen sizes.
  • Use Case: Design a responsive dashboard for Home Assistant that displays different content and layouts on mobile devices versus desktop browsers.

Quick Start

Use the lovelace-design skill to generate a basic YAML structure for a Home Assistant dashboard view with a title and an entities card.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Lovelace Dashboard Design Skill
Download link: https://github.com/markus41/claude/archive/main.zip#lovelace-dashboard-design-skill

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.