Dashboard Design Skill

This skill provides knowledge for designing and building Home Assistant dashboards using the sections view layout, mushroom cards, and card-mod CSS customization.

Auto-trigger

Activate this skill when the user mentions dashboards, cards, Lovelace, UI layout, mushroom, card-mod, or dashboard styling.

Dashboard Architecture

HA dashboards use storage mode by default (config stored in HA, editable via UI or WebSocket). The config is a JSON object with views, each containing sections with cards.

Key Constraint

Dashboard config is WebSocket-only — no REST API endpoint exists. Use /ha-dashboard commands or the ha_ws.py script.

Sections View Layout

The modern HA dashboard uses "type": "sections" views instead of the legacy masonry layout.

{
  "views": [
    {
      "type": "sections",
      "path": "default_view",
      "title": "Home",
      "icon": "mdi:home",
      "max_columns": 3,
      "sections": [
        {
          "type": "grid",
          "cards": [...]
        }
      ]
    }
  ]
}

See references/sections-view.md for full structure details.

Mushroom Cards

Mushroom is a popular custom card collection installed via HACS. Card types include:

• mushroom-entity-card — generic entity display
• mushroom-light-card — light controls with brightness/color
• mushroom-cover-card — cover with position/button controls
• mushroom-fan-card — fan with speed control
• mushroom-chips-card — compact chip row
• mushroom-template-card — fully customizable with Jinja2
• mushroom-title-card — section headers

See references/mushroom-cards.md for all card types and config options.

card-mod CSS Customization

card-mod allows custom CSS on any card. Critical for mushroom cards:

Use :host selector (NOT ha-card) to set CSS variables on mushroom cards — shadow DOM prevents ha-card from working.

{
  "card_mod": {
    "style": ":host { --mush-rgb-state-cover-open: 33, 150, 243; --mush-rgb-state-cover-closed: 255, 152, 0; }"
  }
}

See references/card-mod-css.md for patterns and variables.

Workflow

1. /ha-dashboard backup — always backup before changes
2. /ha-dashboard read — get current config
3. Modify the JSON (add views, sections, cards)
4. /ha-dashboard write <file> — push new config
5. Verify in browser (may need hard refresh)

Reference Files

• references/sections-view.md — Sections view JSON structure
• references/mushroom-cards.md — Mushroom card types and config
• references/card-mod-css.md — card-mod CSS patterns