ha-dashboard-design
installsforks
How to install ha-dashboard-design?
tonylofgren/aurora-smart-home/ha-dashboard-design
$npx -y skills add tonylofgren/aurora-smart-home --skill ha-dashboard-designBeautiful, 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 Termin
SKILL.md
| 1 | # HA Dashboard Design |
| 2 | |
| 3 | Copy-paste-ready dashboard designs for Home Assistant. Pick a style, copy the blocks you need. |
| 4 | |
| 5 | ## Prerequisites (install via HACS) |
| 6 | |
| 7 | - **card-mod** - CSS styling for any card |
| 8 | - **button-card** - fully customizable button cards |
| 9 | - **mini-graph-card** - beautiful graphs (optional) |
| 10 | - **mushroom** - modern card suite (optional, used in some styles) |
| 11 | |
| 12 | ## Available Styles |
| 13 | |
| 14 | | Style | Feel | Best for | |
| 15 | |-------|------|----------| |
| 16 | | `glassmorphism` | Frosted glass, depth, blur | Dark wallpaper backgrounds | |
| 17 | | `dark-minimal` | Pure black, clean typography | Focus, productivity | |
| 18 | | `material-you` | Google Material 3, dynamic color | Modern, familiar | |
| 19 | | `nordic` | Light, airy, Scandinavian | Bright rooms, day use | |
| 20 | | `neon-cyberpunk` | Glow effects, vivid neon | Night mode, wow factor | |
| 21 | | `warm-home` | Amber/orange, cozy | Living rooms, evening | |
| 22 | | `soft-pastel` | Soft pinks, lilac, mint | Friendly, family homes | |
| 23 | | `luxury-gold` | Deep navy + gold accents | Premium, sophisticated | |
| 24 | | `retro-terminal` | Green phosphor, monospace | Geek aesthetic | |
| 25 | |
| 26 | ## How to Use |
| 27 | |
| 28 | 1. Read the reference file for the chosen style |
| 29 | 2. Copy the **Theme YAML** → paste into `config/themes/your-style.yaml` |
| 30 | 3. Copy the **card-mod global styles** → paste into your dashboard resources |
| 31 | 4. Copy individual **card blocks** → paste directly into your dashboard YAML |
| 32 | 5. Adjust entity IDs to match your setup |
| 33 | |
| 34 | ## Quick Start - Any Style |
| 35 | |
| 36 | ```yaml |
| 37 | # configuration.yaml - enable themes folder |
| 38 | frontend: |
| 39 | themes: !include_dir_merge_named themes/ |
| 40 | ``` |
| 41 | |
| 42 | ```yaml |
| 43 | # Activate theme in dashboard |
| 44 | theme: your-theme-name |
| 45 | ``` |
| 46 | |
| 47 | ## Image Generation |
| 48 | |
| 49 | To generate background images or dashboard mockup visualizations matching any style, |
| 50 | read `references/image-prompts.md` - contains ready-to-paste prompts for Midjourney, |
| 51 | DALL-E 3, Stable Diffusion, and Flux for every style. |
| 52 | |
| 53 | ## Reference Files |
| 54 | |
| 55 | Read only the file for the requested style: |
| 56 | |
| 57 | - `references/glassmorphism.md` |
| 58 | - `references/dark-minimal.md` |
| 59 | - `references/material-you.md` |
| 60 | - `references/nordic.md` |
| 61 | - `references/neon-cyberpunk.md` |
| 62 | - `references/warm-home.md` |
| 63 | - `references/soft-pastel.md` |
| 64 | - `references/luxury-gold.md` |
| 65 | - `references/retro-terminal.md` |
| 66 | - `references/image-prompts.md` - image generation prompts for backgrounds and mockups |
| 67 | |
| 68 | ## Card Types Covered in Every Style |
| 69 | |
| 70 | Each reference file contains copy-paste blocks for: |
| 71 | |
| 72 | - **Sensor display** - temperature, humidity, power readings |
| 73 | - **Media player** - Spotify, TV, speaker controls |
| 74 | - **Climate / thermostat** - temperature control with visual feedback |
| 75 | - **Security / alarm** - arm/disarm, door/window sensors |
| 76 | - **Camera** - live feed with overlay |
| 77 | - **Button grid** - scene/light/device shortcuts |
| 78 | - **Weather** - current + forecast display |
| 79 | - **Energy** - power consumption, solar, grid |
| 80 | - **Light control** - on/off, brightness, color temp slider |
| 81 | - **Presence** - person/device tracker cards |
| 82 | - **Calendar / agenda** - upcoming events |
| 83 | - **Statistics / graphs** - sensor history, mini-graph |
| 84 | - **Header / navigation** - page title, room nav |
| 85 | - **Alert banners** - notifications, warnings, status |
| 86 | |
| 87 | ## Dashboard Types |
| 88 | |
| 89 | **Always default to `masonry`** - it works in all HA versions and requires no setup. |
| 90 | |
| 91 | ```yaml |
| 92 | # Safe default - works everywhere |
| 93 | views: |
| 94 | - title: Home |
| 95 | type: masonry # ← default, always works |
| 96 | cards: |
| 97 | - ... |
| 98 | ``` |
| 99 | |
| 100 | `type: sections` (HA 2024.6+ grid layout) can give a blank page if the user's HA version |
| 101 | doesn't support it or if the view structure is wrong. Only suggest it if the user explicitly |
| 102 | asks for it or confirms they're on HA 2024.6+. |
| 103 | |
| 104 | ## Pre-Output Checklist |
| 105 | |
| 106 | - [ ] Dashboard uses `type: masonry` unless user specifically asked for Sections |
| 107 | - [ ] Theme YAML included with correct filename |
| 108 | - [ ] card-mod styles wrapped in correct YAML structure |
| 109 | - [ ] All entity IDs marked as placeholders (e.g., `sensor.YOUR_TEMPERATURE`) |
| 110 | - [ ] HACS dependencies listed at top of output |
| 111 | - [ ] Credentials/secrets not hardcoded |
| 112 | |
| 113 | ## Integration |
| 114 | |
| 115 | **Pairs with:** |
| 116 | - `ha-yaml` skill - for automations that respond to dashboard interactions |
| 117 | - `api-catalog` skill - for sensor data displayed on the dashboard |
People who liked this also viewed
6 picksType
- paperclip-create-agentCreate new agents in Paperclip with governance-aware hiring. Use when you need to inspect adapter configuration options, compare existing agent configs, draft a new agent prompt/config, and submit a hSkillsJul 2026
- subagent-driven-developmentUse when executing implementation plans with independent tasks in the current sessionSkillsJul 2026
- dispatching-parallel-agentsUse when facing 2+ independent tasks that can be worked on without shared state or sequential dependenciesSkillsJul 2026
- browser-act-skill-forgeForges reusable Skill packages (SKILL.md + scripts) from website exploration via browser-act — no re-exploration later. Use when: user wants a reusable Skill for any website, needs to understand a sitSkillsJul 2026
- wizardGenerate an interactive bash wizard that walks a human through a manual procedure — third-party setup, a one-off migration, an A→B state transition — opening URLs, capturing values, confirming each stSkillsJul 2026
- wonda-cliUsing the Wonda CLI to generate images, videos, music, and audio from the terminal — plus LinkedIn, Reddit, and X/Twitter research and automationSkillsJul 2026
