# Home Assistant Lit Rendering

> Home Assistant Lit rendering extensions for HA components and context-aware picker callback shape.

- Skill: `timmo001/home-assistant-lit-rendering` (Agent Skill)
- Install (CLI): `npx skillmds@latest add timmo001/home-assistant-lit-rendering`
- Raw SKILL.md: https://api.skillmd.com/api/skills/timmo001/home-assistant-lit-rendering/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: Apache-2.0
- Author: timmo001 (https://skillmd.com/u/timmo001)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/timmo001/home-assistant-lit-rendering

---


# Home Assistant Lit Rendering

Use this skill together with `lit-rendering` when editing Home Assistant frontend Lit code.

- Keep Home Assistant-specific rendering aligned with existing `ha-*` component patterns.
- When adding editor tabs or controls, gate them by the same HA mode/capability checks used by the existing action path; do not expose UI for YAML, generated, read-only, or unsupported modes just because optional callbacks are present.
- For `ha-generic-picker`, match repository callback shape:
  - `.getItems=${this._getItems}` when callback reads existing component state.
  - `.getItems=${this._getItems(optionsOrSections)}` when callback closes over render-local data.
- Keep `.sections` and `.getItems` aligned to the same current-render source.
- When values come from Home Assistant context (`hass`, consumed i18n/config contexts), avoid introducing passthrough fields just to route those values.
- Prefer existing Home Assistant references before introducing a new local rendering shape:
  - `src/components/ha-selector/ha-selector-select.ts`
  - `src/components/ha-target-picker.ts`
  - `src/components/ha-navigation-picker.ts`