本文へ移動
cccskills
無料GitHub で公開

HA Dashboard Design

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
インストール方法を見る

含まれるファイル（11）

  • SKILL.md4.7 KB
  • references/dark-minimal.md9.8 KB
  • references/glassmorphism.md11.8 KB
  • references/image-prompts.md7.3 KB
  • references/luxury-gold.md7.2 KB
  • references/material-you.md8.7 KB
  • references/neon-cyberpunk.md12.5 KB
  • references/nordic.md9.0 KB
  • references/retro-terminal.md9.1 KB
  • references/soft-pastel.md6.3 KB
  • references/warm-home.md5.6 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

StyleFeelBest for
glassmorphismFrosted glass, depth, blurDark wallpaper backgrounds
dark-minimalPure black, clean typographyFocus, productivity
material-youGoogle Material 3, dynamic colorModern, familiar
nordicLight, airy, ScandinavianBright rooms, day use
neon-cyberpunkGlow effects, vivid neonNight mode, wow factor
warm-homeAmber/orange, cozyLiving rooms, evening
soft-pastelSoft pinks, lilac, mintFriendly, family homes
luxury-goldDeep navy + gold accentsPremium, sophisticated
retro-terminalGreen phosphor, monospaceGeek 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

# configuration.yaml - enable themes folder
frontend:
  themes: !include_dir_merge_named themes/

# Activate theme in dashboard
theme: your-theme-name

Image Generation

To generate background images or dashboard mockup visualizations matching any style, read references/image-prompts.md - contains ready-to-paste prompts for Midjourney, DALL-E 3, Stable Diffusion, and Flux for every style.

Reference Files

Read only the file for the requested style:

  • references/glassmorphism.md
  • references/dark-minimal.md
  • references/material-you.md
  • references/nordic.md
  • references/neon-cyberpunk.md
  • references/warm-home.md
  • references/soft-pastel.md
  • references/luxury-gold.md
  • references/retro-terminal.md
  • references/image-prompts.md - image generation prompts for backgrounds and mockups

Card Types Covered in Every Style

Each reference file contains copy-paste blocks for:

  • Sensor display - temperature, humidity, power readings
  • Media player - Spotify, TV, speaker controls
  • Climate / thermostat - temperature control with visual feedback
  • Security / alarm - arm/disarm, door/window sensors
  • Camera - live feed with overlay
  • Button grid - scene/light/device shortcuts
  • Weather - current + forecast display
  • Energy - power consumption, solar, grid
  • Light control - on/off, brightness, color temp slider
  • Presence - person/device tracker cards
  • Calendar / agenda - upcoming events
  • Statistics / graphs - sensor history, mini-graph
  • Header / navigation - page title, room nav
  • Alert banners - notifications, warnings, status

Dashboard Types

Always default to masonry - it works in all HA versions and requires no setup.

# Safe default - works everywhere
views:
  - title: Home
    type: masonry   # ← default, always works
    cards:
      - ...

type: sections (HA 2024.6+ grid layout) can give a blank page if the user's HA version doesn't support it or if the view structure is wrong. Only suggest it if the user explicitly asks for it or confirms they're on HA 2024.6+.

Pre-Output Checklist

  • Dashboard uses type: masonry unless user specifically asked for Sections
  • Theme YAML included with correct filename
  • card-mod styles wrapped in correct YAML structure
  • All entity IDs marked as placeholders (e.g., sensor.YOUR_TEMPERATURE)
  • HACS dependencies listed at top of output
  • Credentials/secrets not hardcoded

Integration

Pairs with:

  • ha-yaml skill - for automations that respond to dashboard interactions
  • api-catalog skill - for sensor data displayed on the dashboard

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

API Catalog

無料

Reference guide for connecting popular APIs to Home Assistant via Node-RED, YAML, or custom integrations. Covers authentication, endpoints, and complete working examples for: energy APIs (Tibber, Nordpool), weather (SMHI, OpenWeatherMap, yr.no), transport (SL, Trafikverket, Resrobot), smart home clouds (Shelly, Tuya, Philips Hue, IKEA), and global APIs (OpenAI, Spotify, Google Calendar, Telegram, GitHub). Use this skill whenever the user mentions a specific external service, API, or data source they want to connect to Home Assistant - even if they don't say "API".

日本語の概要は準備中です。原文の説明を表示しています。

tonylofgren/aurora-smart-home1062026年10月5日 更新

aurora

無料

Aurora Smart Home orchestrator — routing layer for all smart home skills. Use this skill when the user asks ANY smart home question and you need to decide which skill to invoke, or when a task spans multiple skills (e.g., "build a sensor that shows on a dashboard and triggers automations"). Invoke aurora FIRST before reaching for a specific skill — it will route to the right specialist(s) and recommend the correct Claude model to keep token usage efficient. Trigger on: smart home, Home Assistant, ESPHome, automation, IoT, dashboard, ESP32, Node-RED, or any request about controlling or monitoring devices at home.

日本語の概要は準備中です。原文の説明を表示しています。

tonylofgren/aurora-smart-home1062026年10月5日 更新

ESPHome

無料

ESPHome device configuration, firmware, and IoT product development. Covers ESP32, ESP32-S3, ESP32-C3, ESP32-C6, ESP32-H2, ESP32-P4, ESP8266, RP2040, RP2350, nRF52, LibreTiny, Shelly, Sonoff, Tuya, BLE proxy, Matter firmware, Thread, Zigbee, GPIO, sensor YAML, LVGL displays, LED strips, voice assistant hardware, device flashing, Arduino conversion, alarm_control_panel, lock, valve, media_player, microphone, speaker, audio DAC, event entities, datetime entities, Z-Wave proxy, MIPI DSI displays, and DLMS smart meters. Also covers designing new ESPHome-based products: hardware selection, component sourcing, PCB design (KiCad), enclosures, 3D printing, CE/FCC certification, BOM optimization, and manufacturing from prototype to production scale.

日本語の概要は準備中です。原文の説明を表示しています。

tonylofgren/aurora-smart-home1062026年10月5日 更新

HA Integration Dev

無料

Home Assistant custom integration development in Python. Covers custom_components, DataUpdateCoordinator, config_flow, OAuth2, conversation agent, HACS publishing, device registry, entity platforms, services, repair issues, diagnostics, Bluetooth integrations, and multi-coordinator patterns.

日本語の概要は準備中です。原文の説明を表示しています。

tonylofgren/aurora-smart-home1062026年10月5日 更新

Home Assistant YAML

無料

Home Assistant YAML configuration and automation. The most common skill for general HA questions. Covers automations, blueprints, scripts, scenes, template sensors, Lovelace dashboards, Mushroom cards, packages, helpers, presence detection, voice Assist, calendar automation, Jinja2 templates, notification patterns, energy monitoring, Matter devices, automation debugging and traces, dashboard sections view, and trigger-based template entities.

日本語の概要は準備中です。原文の説明を表示しています。

tonylofgren/aurora-smart-home1062026年10月5日 更新

Node-RED

無料

Node-RED visual automation flows for Home Assistant. Covers visual automation, flow JSON, trigger-state, api-call-service, function nodes, context storage, timer patterns, error handling, and node-red-contrib-home-assistant-websocket nodes. Use when user mentions "Node-RED", "flow", "visual automation", or "node-redflöde".

日本語の概要は準備中です。原文の説明を表示しています。

tonylofgren/aurora-smart-home1062026年10月5日 更新

tonylofgren のスキルをすべて見る

このスキルの問題を報告する