菜单
Configure Home Assistant Lovelace dashboards, cards, views, and themes. Use when working with dashboard YAML, card configuration, view layouts, custom cards, or frontend theming.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | ha-dashboard |
| description | Configure Home Assistant Lovelace dashboards, cards, views, and themes. Use when working with dashboard YAML, card configuration, view layouts, custom cards, or frontend theming. |
| allowed-tools | Read, Write, Edit, Grep, Glob, WebFetch |
Configure Lovelace dashboards, cards, views, and themes for Home Assistant.
This skill prevents 5 common errors and saves ~40% tokens.
| Metric | Without Skill | With Skill |
|---|---|---|
| Setup Time | 30+ min | 10 min |
| Common Errors | 5 | 0 |
| Token Usage | ~8000 | ~4800 |
domain.entity_name)entity for button cards)# configuration.yaml
lovelace:
mode: yaml
Why this matters: YAML mode gives full control over dashboard configuration and enables version control.
# ui-lovelace.yaml or dashboards.yaml
title: My Home
views:
- title: Home
path: home
cards:
- type: markdown
content: Welcome to your dashboard!
Why this matters: This minimal structure validates your YAML setup before adding complexity.
views:
- title: Living Room
path: living-room
cards:
- type: entities
title: Lights
entities:
- light.living_room
- light.kitchen
- type: weather-forecast
entity: weather.home
forecast_type: daily
Why this matters: Cards are the building blocks of dashboards - start with simple cards before complex ones.
domain.entity_name (e.g., light.living_room)tap_action for interactive cardsforecast_type on weather-forecast cards (required since 2023)Wrong:
type: button
entity:light.living_room
tap_action:
action: toggle
Correct:
type: button
entity: light.living_room
tap_action:
action: toggle
Why: Missing space after colon and incorrect indentation are the most common YAML errors.
| Issue | Root Cause | Solution |
|---|---|---|
| "Unknown card type" | Missing custom card resource | Add to lovelace.resources |
| Cards not updating | Browser cache | Hard refresh (Ctrl+Shift+R) |
| Theme not applying | Wrong variable name | Check theme variable spelling |
| Blank dashboard | YAML syntax error | Validate YAML, check logs |
| Entity unavailable | Wrong entity ID | Check entity in Developer Tools > States |
lovelace:
mode: yaml # or 'storage' for UI mode
resources:
- url: /local/card.js # Custom card resources
type: module
dashboards:
lovelace-custom:
mode: yaml
title: Custom
icon: mdi:view-dashboard
show_in_sidebar: true
filename: custom-dashboard.yaml
Key settings:
mode: yaml for manual control, storage for UI editingresources: Load custom cards/CSS (only in YAML mode)dashboards: Define additional dashboardsviews:
- title: View Name # Tab title
path: view-path # URL path (/lovelace/view-path)
icon: mdi:home # Tab icon (optional)
type: masonry # masonry, panel, sections, sidebar
theme: dark-mode # Apply specific theme
subview: false # Hide from navigation
cards: [] # Card list
type: horizontal-stack
cards:
- type: button
entity: light.living_room
name: Living
tap_action:
action: toggle
- type: button
entity: light.bedroom
name: Bedroom
tap_action:
action: toggle
type: conditional
conditions:
- condition: state
entity: binary_sensor.home_occupied
state: "on"
card:
type: entities
title: Home Controls
entities:
- light.living_room
- climate.thermostat
Located in references/:
card-reference.md - All built-in card types with YAML examplesview-types.md - View layout comparison and selection guidetheme-variables.md - CSS variables for themingcommon-patterns.md - Conditional visibility, stacks, entity rowsNote: For deep dives on specific topics, see the reference files above.
Located in assets/:
dashboard-template.yaml - Starter dashboard configurationcard-snippets.yaml - Copy-paste card examplesCopy these templates as starting points for your implementation.
For current documentation, use these Context7 library IDs:
| Library ID | Purpose |
|---|---|
/home-assistant/home-assistant.io | User docs - dashboards, cards, views, themes |
/home-assistant/developers.home-assistant | Developer docs - custom card development |
/hacs/documentation | HACS frontend cards |
Symptoms: Dashboard loads but shows nothing or error.
Solution:
# Check Home Assistant logs
ha core logs | grep -i lovelace
# Validate YAML online or locally
python -c "import yaml; yaml.safe_load(open('ui-lovelace.yaml'))"
Symptoms: "Custom element doesn't exist" error.
Solution:
# Ensure resource is loaded
lovelace:
resources:
- url: /local/my-card.js
type: module # or 'js' for non-module
# Check file exists at /config/www/my-card.js
Before using this skill, verify:
Manage Linear tickets, projects, milestones, and documents. Use for coordinating work across skills (orca-security, multi-repo) or tracking remediation progress.
Manage Linear tickets, projects, milestones, and documents. Use for coordinating work across skills (orca-security, multi-repo) or tracking remediation progress.
TypeScript 6+ guidance for project development, tsconfig configuration, diagnostics, module resolution, deprecations, and modern standard-library typings. Use when building or maintaining TypeScript 6+ projects, debugging compiler behavior, or working through TS 6-specific defaults and tooling such as `#/` subpath imports, `ignoreDeprecations`, `RegExp.escape`, `Temporal`, and `--stableTypeOrdering`. Triggers on typescript 6, ts 6, stableTypeOrdering, ignoreDeprecations, types array, noUncheckedSideEffectImports, baseUrl deprecated, moduleResolution node deprecated, and subpath imports.
Vite 8+ development with Rolldown and Oxc. Use when configuring vite.config.ts, migrating rollup/esbuild-era configs, authoring Vite plugins with environments and hook filters, or troubleshooting SSR, Module Runner, and production build behavior in Vite 8. Triggers on vite, vite.config.ts, rolldownOptions, oxc, module runner, environments, hotUpdate, and lightning css.
Vitest 4+ testing with Vite. Use when configuring vitest.config.ts, writing unit/integration/browser tests, implementing mocks with vi.fn/vi.spyOn/vi.mock, setting up V8 or Istanbul coverage, or migrating from Jest or older Vitest workspace setups. Triggers on vitest, vitest.config.ts, vi.mock, browser mode, vitest/browser, projects, setupFiles, and toMatchScreenshot.
Tauri v2+ cross-platform app development with Rust backend. Use when configuring tauri.conf.json, implementing Rust commands (#[tauri::command]), setting up IPC patterns (invoke, emit, channels), configuring permissions/capabilities, troubleshooting build issues, or deploying desktop/mobile apps. Triggers on Tauri, src-tauri, invoke, emit, capabilities.json.