Sap Extension Creator
heshengtao/super-agent-party
Create Super Agent Party (SAP) extensions. An agent skill from heshengtao/super-agent-party.
Home Assistant frontend component patterns. An agent skill from home-assistant/frontend.
Install Ha Frontend Components
$ npx skills add home-assistant/frontend --skill ha-frontend-components -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install home-assistant/frontend ha-frontend-components --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-components .claude/skills/ha-frontend-components && 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-components" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-components into .claude/skills/ha-frontend-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-components", 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-componentsType 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-components -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install home-assistant/frontend ha-frontend-components --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-components .agents/skills/ha-frontend-components && 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-components" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-components into .agents/skills/ha-frontend-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-components", 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-components -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install home-assistant/frontend ha-frontend-components --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-components .cursor/skills/ha-frontend-components && 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-components" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-components into .cursor/skills/ha-frontend-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-components", 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-components--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-components -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install home-assistant/frontend ha-frontend-components --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-components .gemini/skills/ha-frontend-components && 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-components" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-components into .gemini/skills/ha-frontend-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-components", 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-componentsInstalls 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-components -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-components .github/skills/ha-frontend-components && 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-components" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-components into .github/skills/ha-frontend-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-components", 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-components -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-components --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-components .opencode/skills/ha-frontend-components && 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-components" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-components into .opencode/skills/ha-frontend-components/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-components", 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-components- GitHub stars
- 5.7k
- Token cost
- ~1.2k tokens
- SKILL.md length
- 427 words
- Files
- 1
- Skills in repo
- 12
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Home Assistant frontend component patterns. An agent skill from home-assistant/frontend.
- Reviewing dialogs
- SKILL.md covers Dialogs, Buttons, Forms and Alerts, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Keyboard shortcuts
What it does
Ha Frontend Components is an agent skill from home-assistant/frontend. Home Assistant frontend component patterns. Use when implementing or reviewing dialogs, ha-form, ha-alert, keyboard shortcuts, tooltips, panels, Lovelace cards, or ha-button usage.
Its SKILL.md is about 1.2k 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
- Reviewing dialogs
- Keyboard shortcuts
- Ha-button usage
Example prompts
- “/ha-frontend-components”
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 Components loads about 1.2k tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 427 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). 427 words, ~1,158 tokens.
Download SKILL.mdSave it as
.claude/skills/ha-frontend-components/SKILL.md (or your agent's skills folder).- name
- ha-frontend-components
- description
- Home Assistant frontend component patterns. Use when implementing or reviewing dialogs, ha-form, ha-alert, keyboard shortcuts, tooltips, panels, Lovelace cards, or ha-button usage.
HA Frontend Components
Use this skill when creating or reviewing Home Assistant UI components and common interaction patterns.
Cross-load ha-frontend-events when component work includes event listener typing, custom event dispatch, or event-map declarations.
Dialogs
Open dialogs through the fire-event pattern:
fireEvent(this, "show-dialog", {
dialogTag: "dialog-example",
dialogImport: () => import("./dialog-example"),
dialogParams: { title: "Example", data: someData },
});Dialog implementation requirements:
- Use
ha-dialog. - Use
DialogMixin, which implementsHassDialogNext<T>, for new dialogs. Seesrc/dialogs/dialog-mixin.ts. - Read dialog parameters from the mixin's
paramsproperty and render the dialog open. Returnnothingwhile required parameters are absent. - Call the mixin's
closeDialog()to close a new dialog. The mixin handles theclosedevent, firesdialog-closed, and removes the host element. - Existing dialogs may implement the legacy
HassDialog<T>interface fromsrc/dialogs/make-dialog-manager.ts. - Preserve the existing
showDialog(), open-state, and close-event lifecycle when maintaining a legacy dialog; do not copy that lifecycle into aDialogMixindialog. - Use
header-titleandheader-subtitlefor simple header text. - Use slots when standard header attributes are not enough.
- Use
ha-dialog-footerwithprimaryActionandsecondaryActionslots. - Add
autofocusto the first focusable element, such as<ha-form autofocus>, and forward it internally if needed.
Use standard dialog widths: small, medium, large, or full. Avoid custom dialog sizing unless there is a clear product need.
Buttons
ha-button wraps the Web Awesome button in src/components/ha-button.ts.
Axes:
variant:brand,neutral,danger,warning,success.appearance:accent,filled,outlined,plain.size:xs,s,m,l,xl.
Common usage:
- Use
appearance="filled"for primary emphasis when needed. - Use
appearance="plain"for cancel and dismiss actions. - Use
variant="danger"for destructive actions. - Place primary actions in
slot="primaryAction"and secondary actions inslot="secondaryAction".
Show full SKILL.md (179 more words)Show less
Forms
ha-form is schema-driven with HaFormSchema[] and supports common selectors for entities, devices, areas, targets, numbers, booleans, time, actions, text, objects, selects, icons, media, and location.
Use computeLabel, computeError, and computeHelper for translated labels, validation, and helper text.
<ha-form
.hass=${this.hass}
.data=${this._data}
.schema=${this._schema}
.error=${this._errors}
.computeLabel=${(schema) => this._localize(`ui.panel.${schema.name}`)}
@value-changed=${this._valueChanged}
></ha-form>Alerts
Use ha-alert for user-visible status messaging.
- Alert types:
error,warning,info,success. - Useful properties:
title,alert-type,dismissable,narrow. - Slots:
iconfor custom leading icon,actionfor custom action content. - Content is announced by screen readers when dynamically displayed.
html`
<ha-alert alert-type="error">${this._localize("ui.example.error")}</ha-alert>
<ha-alert alert-type="warning" .title=${this._localize("ui.example.warning")}>
${this._localize("ui.example.description")}
</ha-alert>
<ha-alert alert-type="success" dismissable>
${this._localize("ui.example.success")}
</ha-alert>
`;Shortcuts And Tooltips
Use ShortcutManager from src/common/keyboard/shortcuts.ts for keyboard shortcuts. It blocks shortcuts in input fields, can prevent shortcuts during text selection, and supports character and KeyCode shortcuts for non-latin keyboards. See src/state/quick-bar-mixin.ts for global shortcut examples.
Use ha-tooltip from src/components/ha-tooltip.ts for contextual hover help. See src/components/ha-label.ts for an example.
Panels And Lovelace Cards
Panels commonly extend SubscribeMixin(LitElement) and receive route and narrow-layout properties.
Lovelace cards should implement LovelaceCard, validate config in setConfig(), handle loading, error, unavailable, and missing-entity states, and add a configuration editor when needed.
Cards are user-story surfaces. Support different households, entity types, responsive layouts, and accessible interaction states.
© 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-components of home-assistant/frontend.
Open the folder on GitHubat commit 0e9b62e
Compare with similar skills
Ha Frontend Components 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 Components this skillhome-assistant/frontend | 5.7k | — | ~1.2k | 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 Contexts
home-assistant/frontend
Home Assistant frontend Lit context and hass migration guidance.
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 Components
What does Ha Frontend Components do?
Home Assistant frontend component patterns. An agent skill from home-assistant/frontend. Ha Frontend Components is an agent skill from home-assistant/frontend. Home Assistant frontend component patterns.
When should I use Ha Frontend Components?
Ha Frontend Components fits situations like: reviewing dialogs; keyboard shortcuts; ha-button usage.
How do I install Ha Frontend Components in Claude Code?
Run `npx skills add home-assistant/frontend --skill ha-frontend-components -a claude-code`. Or copy the skill folder (.agents/skills/ha-frontend-components in home-assistant/frontend) into .claude/skills/ha-frontend-components in your project. Claude Code loads it when a task matches its description.
How do I install Ha Frontend Components in Codex?
Run `npx skills add home-assistant/frontend --skill ha-frontend-components -a codex`. Or copy the skill folder (.agents/skills/ha-frontend-components in home-assistant/frontend) into .agents/skills/ha-frontend-components in your project. Codex loads it when a task matches its description.
Can I use Ha Frontend Components 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-components -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-components, .gemini/skills/ha-frontend-components, .github/skills/ha-frontend-components and .opencode/skills/ha-frontend-components in your project.
What does Ha Frontend Components need to run?
SKILL.md names no scripts, command-line tools or credentials: Ha Frontend Components is instructions for the agent only.
Does Ha Frontend Components 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 Components 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 Components use?
Ha Frontend Components 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 Components use?
About 1.2k tokens (SKILL.md is roughly 4.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 Components?
Skills that share tags, products or a category with Ha Frontend Components: 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 Components?
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.