Sap Extension Creator
heshengtao/super-agent-party
Create Super Agent Party (SAP) extensions. An agent skill from heshengtao/super-agent-party.
Home Assistant frontend Lit context and hass migration guidance.
Install Ha Frontend Contexts
$ npx skills add home-assistant/frontend --skill ha-frontend-contexts -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install home-assistant/frontend ha-frontend-contexts --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/home-assistant/frontend.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/ha-frontend-contexts .claude/skills/ha-frontend-contexts && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ha-frontend-contexts" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-contexts into .claude/skills/ha-frontend-contexts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-contexts", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-contextsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add home-assistant/frontend --skill ha-frontend-contexts -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install home-assistant/frontend ha-frontend-contexts --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/home-assistant/frontend.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/ha-frontend-contexts .agents/skills/ha-frontend-contexts && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ha-frontend-contexts" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-contexts into .agents/skills/ha-frontend-contexts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-contexts", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add home-assistant/frontend --skill ha-frontend-contexts -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install home-assistant/frontend ha-frontend-contexts --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/home-assistant/frontend.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/ha-frontend-contexts .cursor/skills/ha-frontend-contexts && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ha-frontend-contexts" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-contexts into .cursor/skills/ha-frontend-contexts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-contexts", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/home-assistant/frontend.git --path .agents/skills/ha-frontend-contexts--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add home-assistant/frontend --skill ha-frontend-contexts -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install home-assistant/frontend ha-frontend-contexts --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/home-assistant/frontend.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/ha-frontend-contexts .gemini/skills/ha-frontend-contexts && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ha-frontend-contexts" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-contexts into .gemini/skills/ha-frontend-contexts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-contexts", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install home-assistant/frontend ha-frontend-contextsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add home-assistant/frontend --skill ha-frontend-contexts -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/home-assistant/frontend.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/ha-frontend-contexts .github/skills/ha-frontend-contexts && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ha-frontend-contexts" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-contexts into .github/skills/ha-frontend-contexts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-contexts", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add home-assistant/frontend --skill ha-frontend-contexts -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install home-assistant/frontend ha-frontend-contexts --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/home-assistant/frontend.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/ha-frontend-contexts .opencode/skills/ha-frontend-contexts && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ha-frontend-contexts" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-contexts into .opencode/skills/ha-frontend-contexts/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-contexts", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ha-frontend-contexts- GitHub stars
- 5.7k
- Token cost
- ~1.9k tokens
- SKILL.md length
- 599 words
- Files
- 1
- Skills in repo
- 12
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Home Assistant frontend Lit context and hass migration guidance.
- Changing component state access
- SKILL.md covers Goal, Core Files, Context Selection and Consumption Patterns, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Replacing hass reads
What it does
Ha Frontend Contexts is an agent skill from home-assistant/frontend. Home Assistant frontend Lit context and hass migration guidance. Use when adding or changing component state access, replacing hass reads, consuming entity or registry contexts, or reviewing rerender behavior.
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design. It works with Home Assistant. The repository describes itself as: :lollipop: Frontend for Home Assistant. The licence is Apache-2.0.
When your agent uses it
- Changing component state access
- Replacing hass reads
- Consuming entity
- Registry contexts
Example prompts
- “/ha-frontend-contexts”
What it can do on your machine
Read from SKILL.md and the folder at commit 0e9b62e. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Ha Frontend Contexts loads about 1.9k tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 599 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from home-assistant/frontend at commit 0e9b62e, republished under its Apache-2.0 licence (© home-assistant). 599 words, ~1,911 tokens.
Download SKILL.mdSave it as
.claude/skills/ha-frontend-contexts/SKILL.md (or your agent's skills folder).- name
- ha-frontend-contexts
- description
- Home Assistant frontend Lit context and hass migration guidance. Use when adding or changing component state access, replacing hass reads, consuming entity or registry contexts, or reviewing rerender behavior.
HA Frontend Contexts
Use this skill when a component reads Home Assistant state, registries, localization, services, config, UI data, connection state, or API helpers.
Goal
Move leaf components away from the broad hass: HomeAssistant object. Broad hass access rerenders components for unrelated changes, hides the data a component depends on, and makes tests harder to mock.
Container components may keep hass when they own it and feed providers. Leaf components should consume the narrowest context that covers their reads.
Core Files
- Context definitions:
src/data/context/index.ts consumedecorator,ContextSubscriptionController, andconsumeContext/ContextControllerfor reactive controllers:src/common/decorators/consume.ts(use instead of@lit/context'sconsumeandContextConsumer, enforced by ESLint)- Entity-scoped consume helpers:
src/common/decorators/consume-context-entry.ts - Transform decorator:
src/common/decorators/transform.ts - Canonical migration example:
src/panels/lovelace/cards/hui-button-card.ts - Providers are wired by
contextMixinonHassBaseEl; consumers do not wire providers manually.
Context Selection
| Context | Replaces |
|---|---|
statesContext | hass.states |
entitiesContext, devicesContext, areasContext, floorsContext | hass.entities, hass.devices, hass.areas, hass.floors |
registriesContext | all four registries together |
servicesContext | hass.services |
internationalizationContext | hass.localize, hass.locale, hass.language |
formattersContext | entity and attribute formatters |
configContext | hass.config, hass.user, hass.auth, hass.userData |
connectionContext | hass.connection, hass.connected, hass.debugConnection, hass.hassUrl |
apiContext | hass.callService, hass.callApi, hass.callApiRaw, hass.callWS, hass.sendWS, hass.fetchWithAuth |
uiContext | themes, selected theme, panels, sidebar, and UI state |
narrowViewportContext | narrow-layout boolean |
reducedMotionContext | prefers-reduced-motion media query |
Lazy contexts subscribe on first consumer and tear down after the last consumer: labelsContext, fullEntitiesContext, configEntriesContext, manifestsContext, triggerDescriptionsContext, and conditionDescriptionsContext.
The single-field contexts such as localizeContext, themesContext, and userContext are deprecated. Use grouped contexts instead.
Consumption Patterns
Import consume from src/common/decorators/consume, not from @lit/context. The @lit/context version forces a host update on every context change, so every consumed field rerenders the component, even without @state(), and @transform cannot skip anything. Our consume leaves update scheduling to the field:
@state()plus@consume: rerenders when the context value changes.@state()plus@consumeplus@transform: rerenders only when the transformed value changes.@consumealone: the field stays current but never triggers a render. Use this for values only read in event handlers or callbacks, such asapiContext, or for data read on demand, such as picker item callbacks.
In reactive controllers, extend ContextController and decorate fields with consumeContext({ context, subscribe, transform }) from the same file. transform stores one part of the context value, and contextUpdated() runs only when that part changes. @state() and @transform do not work on controller fields; call host.requestUpdate() when the host needs to rerender. Example: src/data/service-info-controller.ts.
Show full SKILL.md (221 more words)Show less
For lazily created subscriptions, use ContextSubscriptionController from the same file instead of @lit/context's ContextConsumer, which also forces a host update. Its callback must store the value in a reactive field or call host.requestUpdate() itself when the host needs to rerender.
Use entity-scoped helpers when the component watches an entity ID held on the host:
@state() @consumeEntityState({ entityIdPath: ["_config", "entity"] })
private _stateObj?: HassEntity;
@state() @consumeEntityRegistryEntry({ entityIdPath: ["_config", "entity"] })
private _entity?: EntityRegistryDisplayEntry;
@state() @consumeLocalize()
private _localize!: LocalizeFunc;Use consumeEntityStates when the host property contains one or more entity IDs. It filters missing entities and preserves the previous record when none of the selected entities changed.
@state() @consumeEntityStates({ entityIdPath: ["_config", "entities"] })
private _stateObjs?: Record<string, HassEntity>;For a single field from a grouped context, pair @consume with @transform:
@state()
@consume({ context: uiContext, subscribe: true })
@transform<HomeAssistantUI, Themes>({ transformer: ({ themes }) => themes })
private _themes!: Themes;Use @transform with watch when the transformer depends on a host property, such as a computed entity ID. consumeEntityState and consumeEntityStates only watch the first path segment.
To consume a whole group untransformed, omit @transform and type the field as ContextType<typeof statesContext> or the matching context type.
Review Checklist
- The component consumes the narrowest context needed for the data it reads.
- A broad
hassproperty is kept only when the component is a container or external API requires it. - Entity-scoped reads use the consume helpers rather than ad hoc context transforms.
- Context fields read during render or
willUpdateare marked@state()so updates trigger rendering. Fields only read outside the render cycle are left without@state(). - Tests and mocks only provide the data the component actually consumes.
© home-assistant, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/ha-frontend-contexts of home-assistant/frontend.
Open the folder on GitHubat commit 0e9b62e
Compare with similar skills
Ha Frontend Contexts next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Ha Frontend Contexts this skillhome-assistant/frontend | 5.7k | — | ~1.9k | Automated safety check: Pass | Apache-2.0 | |
| Sap Extension Creatorheshengtao/super-agent-party | 2.7k | — | ~6k | Automated safety check: Pass | AGPL-3.0 | |
| Develop Big Slider Cardnicufarmache/lovelace-big-slider-card | 104 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Hass Synchomeassistant-extras/device-card | 131 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Ha Android UIhome-assistant/android | 4k | — | ~1.5k | Automated safety check: Pass | Apache-2.0 | |
| Implement Widget Frontendcryptomilk/hass-eink-dashboard | 116 | — | ~3.3k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Develop Big Slider Card
nicufarmache/lovelace-big-slider-card
Implement, fix, extend, or review the Big Slider Card Home Assistant custom card.
Hass Sync
homeassistant-extras/device-card
Maintains synchronization between src/hass folder and Home Assistant frontend source code.
Ha Android UI
home-assistant/android
Home Assistant Android UI guidance. An agent skill from home-assistant/android.
Implement Widget Frontend
cryptomilk/hass-eink-dashboard
Add TypeScript types in ha.d.ts and editor schema in eink-dashboard-editor.ts for a new or updated widget type; also handles deprecating an old type (remove from picker, keep schema, add @deprecated…
Translations
jtenniswood/espcontrol
Find static user-visible words shown on the physical EspControl device and integrate them into the firmware translation process.
More from home-assistant/frontend
All 12 skills in this repoHa Frontend Components
home-assistant/frontend
Home Assistant frontend component patterns. An agent skill from home-assistant/frontend.
Ha Frontend Demo
home-assistant/frontend
Home Assistant standalone demo structure, configurations, URL navigation, mocked APIs, shared demo stubs used by gallery, and verification.
Ha Frontend Gallery
home-assistant/frontend
Home Assistant frontend gallery structure, pages, demos, content, and verification.
Ha Frontend Styling
home-assistant/frontend
Home Assistant frontend styling, theming, spacing, responsive layout, RTL, and View Transitions guidance.
Ha Frontend Testing
home-assistant/frontend
Home Assistant frontend testing and validation workflow. An agent skill from home-assistant/frontend.
Ha Frontend Types
home-assistant/frontend
Home Assistant frontend TypeScript conventions. An agent skill from home-assistant/frontend.
Related
Works with
Categories
Questions about Ha Frontend Contexts
What does Ha Frontend Contexts do?
Home Assistant frontend Lit context and hass migration guidance. Ha Frontend Contexts is an agent skill from home-assistant/frontend. Home Assistant frontend Lit context and hass migration guidance.
When should I use Ha Frontend Contexts?
Ha Frontend Contexts fits situations like: changing component state access; replacing hass reads; consuming entity; registry contexts.
How do I install Ha Frontend Contexts in Claude Code?
Run `npx skills add home-assistant/frontend --skill ha-frontend-contexts -a claude-code`. Or copy the skill folder (.agents/skills/ha-frontend-contexts in home-assistant/frontend) into .claude/skills/ha-frontend-contexts in your project. Claude Code loads it when a task matches its description.
How do I install Ha Frontend Contexts in Codex?
Run `npx skills add home-assistant/frontend --skill ha-frontend-contexts -a codex`. Or copy the skill folder (.agents/skills/ha-frontend-contexts in home-assistant/frontend) into .agents/skills/ha-frontend-contexts in your project. Codex loads it when a task matches its description.
Can I use Ha Frontend Contexts in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add home-assistant/frontend --skill ha-frontend-contexts -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ha-frontend-contexts, .gemini/skills/ha-frontend-contexts, .github/skills/ha-frontend-contexts and .opencode/skills/ha-frontend-contexts in your project.
What does Ha Frontend Contexts need to run?
SKILL.md names no scripts, command-line tools or credentials: Ha Frontend Contexts is instructions for the agent only.
Does Ha Frontend Contexts access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Ha Frontend Contexts safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Ha Frontend Contexts use?
Ha Frontend Contexts is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Ha Frontend Contexts use?
About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Ha Frontend Contexts?
Skills that share tags, products or a category with Ha Frontend Contexts: Sap Extension Creator (heshengtao/super-agent-party, 2.7k stars), Develop Big Slider Card (nicufarmache/lovelace-big-slider-card, 104 stars), Hass Sync (homeassistant-extras/device-card, 131 stars) and Ha Android UI (home-assistant/android, 4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Ha Frontend Contexts?
home-assistant (a GitHub organization) maintains it in home-assistant/frontend, which has 5,698 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on October 10, 2026.
Source: home-assistant/frontend on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.