Does this skill support HACS custom cards?

Yes, it includes specific patterns for popular HACS components like Mushroom cards, button-card, mini-graph-card, and card-mod.

How does it help with CSS and styling?

The skill provides a reference for key theme variables and card-mod snippets for deep customization of card backgrounds, borders, and icon states.

Is it compatible with YAML-mode Home Assistant?

Yes, it is primarily designed to help users working with ui-lovelace.yaml and manual dashboard configuration.

Can I use this for mobile-optimized designs?

Absolutely. It includes patterns for device detection, view visibility, and responsive grid layouts to ensure your dashboard works perfectly on phones.

What is the Lovelace Dashboard Design skill?

It is a specialized plugin for Claude Code that provides expert guidance, code snippets, and best practices for creating Home Assistant dashboards.

Lovelace Dashboard Architect

Name: Lovelace Dashboard Architect
Author: Lobbi-Docs

byLobbi-Docs

デザインツール

Architects sophisticated, responsive Home Assistant dashboards using advanced Lovelace YAML patterns and custom cards.

概要

The Lovelace Dashboard Design Skill is a comprehensive toolkit for building high-end Home Assistant interfaces. It provides specialized guidance for structuring ui-lovelace.yaml, implementing complex grid and stack layouts, and utilizing high-performance custom components like Mushroom cards and button-cards. Whether you are optimizing for a wall-mounted tablet or a mobile-first experience, this skill helps you implement conditional visibility, CSS theme variables, and card-mod styling to create a professional-grade smart home UI that is both functional and aesthetically pleasing.

主な機能

Custom CSS styling and theme variable management
Conditional card logic based on entity states and user presence
Responsive design strategies for mobile and desktop views
Advanced YAML patterns for core and custom Lovelace cards
0 GitHub stars
Integration guides for popular HACS frontend repositories

ユースケース

Designing high-density status displays for wall-mounted tablet interfaces
Developing a unified, mobile-first dashboard for multi-user smart home control
Implementing custom CSS branding and theme-consistent card styling

概要

主な機能

Custom CSS styling and theme variable management
Conditional card logic based on entity states and user presence
Responsive design strategies for mobile and desktop views
Advanced YAML patterns for core and custom Lovelace cards
0 GitHub stars
Integration guides for popular HACS frontend repositories

ユースケース

Designing high-density status displays for wall-mounted tablet interfaces
Developing a unified, mobile-first dashboard for multi-user smart home control
Implementing custom CSS branding and theme-consistent card styling