跳到正文
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（原文）

安装前可以查看交给 AI 代理的指令内容。

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护，适用 Google 的隐私权政策和服务条款。

同一仓库的技能

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-home1072026年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-home1072026年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-home1072026年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-home1072026年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-home1072026年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-home1072026年10月5日 更新

查看 tonylofgren 的全部技能

报告此技能的问题