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

0•

Design Tools

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.

Key Features

01Custom CSS styling and theme variable management

02Conditional card logic based on entity states and user presence

03Responsive design strategies for mobile and desktop views

04Advanced YAML patterns for core and custom Lovelace cards

050 GitHub stars

06Integration guides for popular HACS frontend repositories

Use Cases

01Designing high-density status displays for wall-mounted tablet interfaces

02Developing a unified, mobile-first dashboard for multi-user smart home control

03Implementing custom CSS branding and theme-consistent card styling

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lobbi-docs/claude lovelace-design

For use in Claude.ai and ChatGPT

Download Skill