Skip to main content
nodnarbnitram

cce-homeassistant

by nodnarbnitramv1.0.0

Home Assistant Lovelace dashboard configuration, card selection, and theme customization

Installation guide →

Documentation

# Home Assistant Plugin for Claude Code

Expert assistance for Home Assistant Lovelace dashboard configuration, card selection, view layouts, and theme customization.

## Overview

This plugin provides specialized agents and skills for working with Home Assistant dashboards, eliminating common configuration errors and reducing development time by ~40%.

## What's Included

### Agents

- **ha-dashboard-expert**: Expert in Lovelace dashboards, cards, views, themes, and custom card development

### Skills

- **ha-dashboard**: Configure Lovelace dashboards, cards, views, and themes with built-in error prevention

## Key Features

- **40+ Built-in Card Types**: Complete coverage of entities, media, information, and layout cards
- **View Type Selection**: Expert guidance on masonry, panel, sections, and sidebar views
- **Theme Customization**: Full theming support with CSS variables and dark mode
- **Custom Card Development**: LitElement-based custom card scaffolding
- **Error Prevention**: Prevents 5 common YAML/configuration errors
- **Context7 Integration**: Direct access to Home Assistant and HACS documentation

## Installation

### From Marketplace (Recommended)

```bash
# Install the plugin
/plugin install cce-homeassistant

# Verify installation
/agents  # Should show ha-dashboard-expert
```

### From Local Repository

```bash
# Add local marketplace
/plugin marketplace add /path/to/claude-code-extensions

# Install plugin
/plugin install cce-homeassistant@cce-marketplace
```

## Quick Start

### Automatic Skill Activation

The `ha-dashboard` skill activates automatically when you mention:
- "dashboard configuration"
- "lovelace card"
- "view layout"
- "home assistant theme"

Example:
```
> Help me create a Home Assistant dashboard with weather and light controls
```

### Manual Agent Invocation

Invoke the agent directly for complex dashboard work:
```
> @ha-dashboard-expert Create a sections view dashboard with climate controls
```

### Namespaced Commands

When installed as plugin, commands use the `cce-homeassistant:` prefix:
```bash
# Plugin mode
/cce-homeassistant:dashboard-validate

# Standalone mode (if using .claude/ directly)
/dashboard-validate
```

## Common Use Cases

### 1. Create New Dashboard

```
> Create a YAML dashboard with:
> - Weather forecast
> - All lights in glance card
> - Climate controls
> - Energy monitoring
```

The agent will:
- Generate complete `ui-lovelace.yaml` structure
- Select appropriate card types
- Configure proper YAML indentation
- Validate entity ID formats

### 2. Convert UI Dashboard to YAML

```
> Help me convert my UI-managed dashboard to YAML mode
```

The agent will:
- Guide you through backup process
- Enable YAML mode in configuration.yaml
- Export current dashboard structure
- Provide migration checklist

### 3. Custom Card Development

```
> Create a custom card for displaying my solar panel data
```

The agent will:
- Scaffold LitElement card structure
- Add proper getConfig() validation
- Implement hass object handling
- Configure resource loading

### 4. Theme Customization

```
> Create a dark theme with blue accent colors
```

The agent will:
- Generate theme YAML structure
- Apply proper CSS variables
- Configure dark mode variant
- Test state colors

## Prevented Errors

The skill prevents these common issues:

| Error | Prevention Method |
|-------|------------------|
| YAML indentation errors | 2-space validation, no tabs |
| Invalid entity IDs | Format checking: `domain.entity_name` |
| Missing required properties | Template validation |
| Incorrect view type config | Type-specific examples |
| Theme variable typos | Variable reference checking |

## Performance Metrics

| Metric | Without Plugin | With Plugin |
|--------|----------------|-------------|
| Setup Time | 30+ min | 10 min |
| Common Errors | 5 | 0 |
| Token Usage | ~8000 | ~4800 |

## Documentation Access

The plugin provides direct access to:

- **Home Assistant Official Docs**: Dashboard, card, view, and theme documentation
- **Developer Docs**: Custom card development guides
- **HACS Documentation**: Frontend card references
- **Context7 Libraries**: Real-time documentation lookup

## Skill Resources

The `ha-dashboard` skill includes bundled resources:

### References
- `card-reference.md`: All 40+ built-in card types with YAML examples
- `view-types.md`: View layout comparison and selection guide
- `theme-variables.md`: Complete CSS variable reference
- `common-patterns.md`: Conditional visibility, stacks, entity rows

### Assets
- `dashboard-template.yaml`: Starter dashboard configuration
- `card-snippets.yaml`: Copy-paste card examples

## Requirements

- Home Assistant 2023.1 or later
- Access to configuration files (File Editor or VS Code add-on)
- Knowledge of entity IDs (Developer Tools > States)

## Best Practices

1. **YAML Mode**: Use YAML mode for version control and advanced features
2. **Entity Validation**: Always check entity IDs in Developer Tools before using
3. **Mobile Testing**: Test dashboards on mobile devices
4. **Performance**: Limit cards per view to 15-20 for optimal performance
5. **Incremental Changes**: Test each card addition before moving to the next

## Troubleshooting

### Dashboard Shows Blank

```bash
# Check Home Assistant logs
ha core logs | grep -i lovelace

# Validate YAML syntax
python -c "import yaml; yaml.safe_load(open('ui-lovelace.yaml'))"
```

### Custom Card Not Loading

Ensure the resource is properly registered in `configuration.yaml`:

```yaml
lovelace:
  resources:
    - url: /local/my-card.js
      type: module
```

### Theme Not Applying

1. Restart Home Assistant after theme changes
2. Hard refresh browser (Ctrl+Shift+R)
3. Check theme name spelling in view configuration

## Support

- **GitHub Issues**: https://github.com/nodnarbnitram/claude-code-extensions/issues
- **Home Assistant Community**: https://community.home-assistant.io/
- **Official Documentation**: https://www.home-assistant.io/dashboards/

## License

MIT - See repository LICENSE file

## Contributing

Contributions welcome! See [CONTRIBUTING.md](../../../CONTRIBUTING.md) for guidelines.

## Version History

### 1.0.0 (2025-12-23)
- Initial release
- Home Assistant dashboard expert agent
- ha-dashboard skill with error prevention
- Context7 documentation integration
- Bundled reference materials and templates