菜单
Home Assistant list component migration and usage guidance. Use when editing ha-list, ha-list-item, ha-md-list, or migrating to ha-list-nav, ha-list-selectable, ha-list-item-button, ha-list-item-option, or ha-list-item-base.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Execute broad changes one coherent, independently verifiable stage at a time. Use when work spans multiple independently reviewable changes, or when contracts, producer-consumer migrations, generated artefacts, or release packaging create an ordered multi-stage rollout; skip small single-purpose changes.
Commit workflow using the dot git-commit gateway in the maintainer's concise one-line style. Use only after the user explicitly requests a commit or push, including /commit or /commit-push. Never infer repeat authorisation from an earlier commit or push; never run raw git commit.
Patterns for working with git branches, remotes, diffs against the default branch, and rebases. Use when resolving rebase conflicts, continuing interactive rebases, amending commits, or any git operation that would open an interactive editor.
Investigate a topic against primary sources and return cited findings, comparing credible maintainer and contributor perspectives when judgement is involved. Use when the user wants a topic researched, docs, API, or spec facts gathered, an external library or GitHub behaviour verified, competing views compared, or reading legwork delegated to a background agent.
Ask minimal clarifying questions only when ambiguity materially changes implementation. Use for routine underspecification; do not use for user-requested light or full grilling, plan stress-testing, or broad design interviews.
Stress-test a plan or proposed change through focused one-question-at-a-time grilling, with light and full intensity. Use when the user says grill, grill me, grill me lightly, ask me a couple of questions, stress-test this plan, or wants question-led scrutiny before planning.
| name | home-assistant-list-components |
| description | Home Assistant list component migration and usage guidance. Use when editing ha-list, ha-list-item, ha-md-list, or migrating to ha-list-nav, ha-list-selectable, ha-list-item-button, ha-list-item-option, or ha-list-item-base. |
Use this skill when working with list containers or list items in the Home Assistant frontend. The new primitives replace the deprecated MWC-based ha-list, ha-md-list, ha-list-item, and ha-md-list-item.
ha-row-item (base row layout — slots, spacing, disabled)
├── ha-list-item-base (non-interactive, role="listitem")
│ ├── ha-list-item-button (interactive, renders <a> or <button>)
│ └── ha-list-item-option (selectable, role="option", aria-selected)
ha-list-base (roving-tabindex container, role="list")
├── ha-list-nav (wraps in <nav> landmark, use with ha-list-item-button + href)
└── ha-list-selectable (role="listbox", owns selection state)
| Use case | Container | Items |
|---|---|---|
| Navigation list (links) | ha-list-nav | ha-list-item-button with href |
| Action list (buttons) | ha-list-base | ha-list-item-button without href |
| Single-select listbox | ha-list-selectable | ha-list-item-option |
| Multi-select listbox | ha-list-selectable multi | ha-list-item-option |
| Static display rows | ha-list-base | ha-list-item-base |
| Old (MWC) | New | Notes |
|---|---|---|
| default slot (text) | headline slot or .headline attribute | Primary text |
slot="secondary" | supporting-text slot or .supportingText attribute | Secondary line |
slot="graphic" | slot="start" | Leading icon/avatar |
slot="meta" | slot="end" | Trailing content |
| — | slot="content" | Escape hatch: replaces entire middle column |
--ha-list-gap — spacing between items (default 0)--ha-list-padding — padding around the list (default 0)--ha-row-item-padding-block — vertical padding--ha-row-item-padding-inline — horizontal padding--ha-row-item-gap — gap between start/content/end--ha-row-item-min-height — minimum row height (default 48px)--ha-list-item-focus-radius — focus outline border-radius--ha-list-item-focus-width — focus outline width (steady state)--ha-list-item-focus-offset — focus outline offset--ha-list-item-focus-background — background color on keyboard focus--ha-list-item-selected-background — background when selected (appearance="line")All items expose: base, start, content, headline, supporting-text, end.
Additional parts:
ha-list-nav: nav (the <nav> wrapper), base (inner div)ha-list-item-button: rippleha-list-item-option: ripple, checkboxha-list-activated — from ha-list-base on Enter/Space. Detail: { index, item }.ha-list-selected — from ha-list-selectable on selection change. Detail: { index, diff: { added, removed } }.ha-list + ha-list-item (MWC)ha-list-nav. Selection → ha-list-selectable. Otherwise → ha-list-base.ha-list-item-button with href. Action → ha-list-item-button without href. Selection → ha-list-item-option. Static → ha-list-item-base.graphic → start, meta → end, text → headline/supporting-text.twoline, hasMeta, hasGraphic, noninteractive, activated, graphic="icon" — these have no equivalent and are not needed.@request-selected → use ha-list-selected on the container (for selectable) or @click / ha-list-activated for buttons.ha-list-navUse ha-list-item-base (not ha-list-item-button) for rows that display info without a link or action but still need to live inside a nav list. These participate in the list layout but are excluded from roving tabindex.
ha-list-item-base accepts pointer events by default, so ha-tooltip hover works without needing interactive.
src/panels/config/components/ha-config-navigation-list.ts — ha-list-nav + ha-list-item-button
src/panels/config/devices/ha-config-device-page.ts — mixed ha-list-item-button + ha-list-item-base in ha-list-nav
gallery/src/pages/components/ha-list.markdown — canonical gallery documentation
ha-list-item-button for non-interactive display rows — use ha-list-item-base.ha-list-item-option inside ha-list-nav — use ha-list-selectable.ha-list-selectable owns selection state.@click on ha-list-item-option for selection — listen to ha-list-selected on the container.role attributes manually — the components set correct ARIA roles automatically.