ha-dashboard-designlisted

Beautiful, copy-paste-ready Home Assistant dashboard designs with complete CSS themes, card-mod styles, and button-card templates. Nine distinct visual styles: Glassmorphism, Dark Minimal, Material You, Nordic, Neon/Cyberpunk, Warm Home, Soft Pastel, Luxury Gold, and Retro Terminal. Use this skill whenever the user wants to make their dashboard look good, asks about card styling, CSS for Home Assistant, card-mod, button-card templates, Lovelace themes, dashboard aesthetics, or wants a specific visual style - even if they don't use the words "design" or "CSS".
tonylofgren/aurora-smart-home · ★ 86 · Web & Frontend · score 78

Install: claude install-skill tonylofgren/aurora-smart-home

# HA Dashboard Design Copy-paste-ready dashboard designs for Home Assistant. Pick a style, copy the blocks you need. ## Prerequisites (install via HACS) - **card-mod** - CSS styling for any card - **button-card** - fully customizable button cards - **mini-graph-card** - beautiful graphs (optional) - **mushroom** - modern card suite (optional, used in some styles) ## Available Styles | Style | Feel | Best for | |-------|------|----------| | `glassmorphism` | Frosted glass, depth, blur | Dark wallpaper backgrounds | | `dark-minimal` | Pure black, clean typography | Focus, productivity | | `material-you` | Google Material 3, dynamic color | Modern, familiar | | `nordic` | Light, airy, Scandinavian | Bright rooms, day use | | `neon-cyberpunk` | Glow effects, vivid neon | Night mode, wow factor | | `warm-home` | Amber/orange, cozy | Living rooms, evening | | `soft-pastel` | Soft pinks, lilac, mint | Friendly, family homes | | `luxury-gold` | Deep navy + gold accents | Premium, sophisticated | | `retro-terminal` | Green phosphor, monospace | Geek aesthetic | ## How to Use 1. Read the reference file for the chosen style 2. Copy the **Theme YAML** → paste into `config/themes/your-style.yaml` 3. Copy the **card-mod global styles** → paste into your dashboard resources 4. Copy individual **card blocks** → paste directly into your dashboard YAML 5. Adjust entity IDs to match your setup ## Quick Start - Any Style ```yaml # configuration.yaml - enable themes folder frontend: th