Home Assistant Dashboards Cards

# Home Assistant Dashboards & Cards

## Workflow

- Determine whether to create a new dashboard or edit an existing one.
- If editing, locate target cards first and transform config with a current `config_hash`.
- Use built-in cards unless a custom card is required.
- Discover entity IDs before wiring cards.
- Provide minimal, valid dashboard snippets or tool-driven changes.

## Tooling map (ha-mcp)

- Discover entities: `ha_get_overview`, `ha_search_entities`
- List/get dashboards: `ha_config_get_dashboard`
- Find cards: `ha_dashboard_find_card`
- Card docs: `ha_get_card_types`, `ha_get_card_documentation`
- Update config: `ha_config_set_dashboard`, `ha_config_update_dashboard_metadata`
- Resources: `ha_config_list_dashboard_resources`, `ha_config_set_dashboard_resource`, `ha_config_set_inline_dashboard_resource`, `ha_config_delete_dashboard_resource`
- HACS cards: `ha_hacs_info`, `ha_hacs_list_installed`, `ha_hacs_search`, `ha_hacs_download`

## Caveats

- Dashboard URL paths must contain a hyphen.
- Strategy dashboards require “Take Control” before editing.
- Resource changes may require a hard refresh.
- Jinja templates are not evaluated in core Lovelace YAML.

## References

All reference files are relative to the location of this SKILL.md file.

- Design patterns: `references/DESIGN_PATTERNS.md`
- Card schema guide: `references/CARD_SCHEMA_GUIDE.md`
- Custom resources: `references/CUSTOM_RESOURCES.md`


# Card Schema Guide

Use these tools to avoid guessing card fields:

- `ha_get_card_types()` to list supported card types.
- `ha_get_card_documentation("<type>")` to view options for a specific card.

## Practical rule

If unsure about a card option, query the card documentation instead of copying from blogs or older YAML.

## Example (official docs)

Tile card example from the official Tile card docs:

```yaml
type: tile
entity: light.bedroom
icon: mdi:lamp
color: yellow
```


# Dashboard Design Patterns (Native-First)

## Layout choices

- Use `type: sections` for modern, maintainable layouts.
- Keep sections aligned to areas/rooms for easy navigation.
- Use `grid` cards inside sections for dense clusters.

## Card selection

- Default to `tile` for controls and sensors.
- Use `heading` for section titles and quick scanning.
- Use `conditional` for swapping cards by state instead of templating fields.

## Dynamic UI without templates

- Do not use Jinja in Lovelace YAML.
- Create template entities for derived values, then display them normally.
- Use `visibility` for simple show/hide rules.

## Accessibility and usability

- Keep 2-3 columns for desktop and avoid overloading mobile views.
- Put high-frequency actions near the top of the view.

## Example (official docs)

Sections view type from the official Sections docs:

```yaml
type: sections
```


# Custom Resources (HACS or /local)

## When to use

- Only when built-in cards cannot meet the requirement.
- User explicitly asks for a custom card or custom styling.

## Resource checklist

- Install via HACS (preferred) or place file in `/config/www`.
- Register resource with type `module` for modern cards.
- Hard refresh browser after changes.

## Common paths

- `/hacsfiles/<repo>/<file>.js`
- `/local/<file>.js`

## Example (official docs)

Conditional card example from the official Conditional card docs:

```yaml
type: conditional
conditions:
  - condition: state
    entity: light.bed_light
    state: "on"
card:
  type: entities
  entities:
    - light.bed_light
```