Claude-skill-registry ha-dashboard-layouts

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/ha-dashboard-layouts" ~/.claude/skills/majiayu000-claude-skill-registry-ha-dashboard-layouts && rm -rf "$T"

manifest: skills/data/ha-dashboard-layouts/SKILL.md

Home Assistant Dashboard Layouts

Create responsive Home Assistant Lovelace dashboards using native layout types.

When to Use This Skill

Use this skill when you need to:

Arrange cards vertically (top-to-bottom stacking) for sequential information
Place cards side-by-side horizontally for comparisons or related controls
Create multi-column grid layouts that automatically reflow on mobile
Build full-screen panel views for maps, cameras, or single-focus displays
Nest layouts for complex dashboard designs with sections
Make dashboards responsive with automatic mobile stacking

Do NOT use when:

You need conditional card visibility (use ha-conditional-cards instead)
Building forms or input interfaces (use entities card or custom forms)
You need advanced CSS Grid features (consider layout-card from HACS)

Usage

Identify user intent: Map natural language ("side by side", "3 columns") to layout type
Choose layout: vertical-stack (top to bottom), horizontal-stack (side by side), grid (multi-column), panel (full-screen)
Apply configuration: Add YAML with appropriate type and options
Test responsiveness: Verify mobile behavior (grid auto-stacks, horizontal stays side-by-side)
Refine: Adjust columns, square property, or nest layouts for complex designs

How to Request Layouts

Map user's natural language to layout types:

Vertical Stack (top to bottom):

"Stack these vertically"
"Put these one below the other"
"Top to bottom"

Horizontal Stack (side by side):

"Put these side by side"
"Arrange them horizontally"
"Next to each other"
"Layout in a row"

Grid Layouts:

"Use a 3-column grid" →
```
columns: 3
```
"Grid with columns: 4" →
```
columns: 4
```
"Two columns side by side" →
```
columns: 2
```
"Make cards square" →
```
square: true
```
"Equal height and width" →
```
square: true
```

Panel View (full-screen single card):

"Make this type: panel"
"Full-screen card"
"Kiosk mode"

Nested Layouts:

"Vertical stack with horizontal rows"
"Put separator, then gauges horizontal, then graph below"
"Stack sections vertically, but put cards side-by-side"

Layout Types Quick Reference

1. Vertical Stack

Cards stack top to bottom, full width.

{
    "type": "vertical-stack",
    "cards": [
        {"type": "entity", "entity": "sensor.temperature"},
        {"type": "entity", "entity": "sensor.humidity"},
        {"type": "entity", "entity": "sensor.pressure"},
    ]
}

Use when: Cards should stack regardless of screen size.

2. Horizontal Stack

Cards arranged left to right, equal width distribution.

{
    "type": "horizontal-stack",
    "cards": [
        {"type": "entity", "entity": "sensor.temperature"},
        {"type": "entity", "entity": "sensor.humidity"},
    ]
}

Use when: Cards should appear side-by-side on desktop and mobile. Limit to 2-3 cards (more gets cramped on mobile).

3. Grid Layouts

Multi-column grid with automatic mobile reflow.

# 3-column grid
{
    "type": "grid",
    "columns": 3,  # Auto-stacks to 1 column on mobile
    "cards": [
        {"type": "entity", "entity": "sensor.temp1"},
        {"type": "entity", "entity": "sensor.temp2"},
        {"type": "entity", "entity": "sensor.temp3"},
        {"type": "entity", "entity": "sensor.temp4"},
        # Cards wrap to next row
    ]
}

# Square cards (equal width/height)
{
    "type": "grid",
    "columns": 3,
    "square": True,  # Forces equal aspect ratio
    "cards": [...]
}

Common column counts:

```
columns: 2
```
→ Mobile-friendly, compact
```
columns: 3
```
→ Balanced tablet/desktop
```
columns: 4
```
→ Wide desktop screens

Use

square: true

when: Uniform appearance needed (gauges, icons, visual consistency).

4. Panel View

Full-screen single card (view-level property, not card type).

{
    "views": [
        {
            "title": "Map",
            "type": "panel",  # ← VIEW property
            "cards": [
                {"type": "map", "entities": ["person.john"]}
                # Only ONE card allowed
            ]
        }
    ]
}

Use when: Full-screen dashboards, kiosk mode, maps, cameras, single-focus displays.

5. Nested Layouts

Combine layouts for complex designs.

# Pattern: Vertical stack containing sections
{
    "type": "vertical-stack",
    "cards": [
        # Section 1: Horizontal cards
        {
            "type": "custom:bubble-card",
            "card_type": "separator",
            "name": "Quick Controls",
        },
        {
            "type": "horizontal-stack",
            "cards": [
                {"type": "entity", "entity": "sensor.temp"},
                {"type": "entity", "entity": "sensor.humidity"},
            ]
        },
        # Section 2: Grid layout
        {
            "type": "custom:bubble-card",
            "card_type": "separator",
            "name": "Sensors",
        },
        {
            "type": "grid",
            "columns": 3,
            "cards": [
                {"type": "entity", "entity": "sensor.pm25"},
                {"type": "entity", "entity": "sensor.co2"},
                {"type": "entity", "entity": "sensor.voc"},
            ]
        },
    ]
}

Common nesting patterns:

```
vertical-stack
```
→
```
horizontal-stack
```
(sections with side-by-side cards)
```
vertical-stack
```
→
```
grid
```
(sections with multi-column cards)
```
horizontal-stack
```
→
```
vertical-stack
```
(two-column responsive layout)

Mobile Responsiveness

Grid cards automatically reflow:

Desktop: Respects
```
columns
```
value
Mobile: Stacks to 1 column
No media queries needed

Horizontal stacks:

Remain side-by-side on mobile
Use sparingly (2-3 cards max)

Best practices:

Test on actual mobile device (browser resize ≠ mobile behavior)
Place frequently-used controls at top
Use
```
columns: 2
```
or
```
columns: 3
```
for mobile-friendly grids

Advanced Layouts

For more complex requirements, see reference files:

references/sections-view.md - Modern drag-and-drop Sections View (HA 2024+)
references/layout-card.md - HACS layout-card with CSS Grid and media queries
references/view-types.md - Masonry, Sidebar, and other view types
references/responsive-patterns.md - Advanced mobile-first patterns

Common Dashboard Patterns

Temperature Gauges in Grid

{
    "type": "grid",
    "columns": 4,
    "cards": [
        {
            "type": "custom:modern-circular-gauge",
            "entity": "sensor.office_temperature",
            "name": "Office",
            "min": 10,
            "max": 40,
        },
        {
            "type": "custom:modern-circular-gauge",
            "entity": "sensor.living_room_temperature",
            "name": "Living Room",
            "min": 10,
            "max": 40,
        },
        # ... more gauges
    ]
}

Gauge + Graph Side-by-Side

{
    "type": "horizontal-stack",
    "cards": [
        {
            "type": "custom:modern-circular-gauge",
            "entity": "sensor.temperature",
            "name": "Current",
        },
        {
            "type": "custom:mini-graph-card",
            "entity": "sensor.temperature",
            "name": "24h Trend",
            "hours_to_show": 24,
        },
    ]
}

Section with Separator

{
    "type": "vertical-stack",
    "cards": [
        {
            "type": "custom:bubble-card",
            "card_type": "separator",
            "name": "Climate",
            "icon": "mdi:thermometer",
        },
        {
            "type": "grid",
            "columns": 3,
            "cards": [
                # Climate cards here
            ],
        },
    ]
}