Sap Extension Creator
heshengtao/super-agent-party
Create Super Agent Party (SAP) extensions. An agent skill from heshengtao/super-agent-party.
Home Assistant standalone demo structure, configurations, URL navigation, mocked APIs, shared demo stubs used by gallery, and verification.
Install Ha Frontend Demo
$ npx skills add home-assistant/frontend --skill ha-frontend-demo -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install home-assistant/frontend ha-frontend-demo --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-demo .claude/skills/ha-frontend-demo && 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-demo" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-demo into .claude/skills/ha-frontend-demo/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-demo", 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-demoType 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-demo -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install home-assistant/frontend ha-frontend-demo --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-demo .agents/skills/ha-frontend-demo && 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-demo" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-demo into .agents/skills/ha-frontend-demo/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-demo", 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-demo -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install home-assistant/frontend ha-frontend-demo --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-demo .cursor/skills/ha-frontend-demo && 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-demo" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-demo into .cursor/skills/ha-frontend-demo/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-demo", 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-demo--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-demo -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install home-assistant/frontend ha-frontend-demo --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-demo .gemini/skills/ha-frontend-demo && 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-demo" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-demo into .gemini/skills/ha-frontend-demo/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-demo", 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-demoInstalls 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-demo -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-demo .github/skills/ha-frontend-demo && 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-demo" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-demo into .github/skills/ha-frontend-demo/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-demo", 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-demo -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-demo --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-demo .opencode/skills/ha-frontend-demo && 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-demo" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-demo into .opencode/skills/ha-frontend-demo/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-demo", 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-demo- GitHub stars
- 5.7k
- Token cost
- ~1.1k tokens
- SKILL.md length
- 507 words
- Files
- 1
- Skills in repo
- 12
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Home Assistant standalone demo structure, configurations, URL navigation, mocked APIs, shared demo stubs used by gallery, and verification.
- Changing files under demo/
- SKILL.md covers Purpose, Running The Demo, Opening A Specific Demo and Opening A Specific Page, plus 4 more sections
- Calls pnpm
- Changing gallery consumers of demo/src/stubs/
What it does
Ha Frontend Demo is an agent skill from home-assistant/frontend. Home Assistant standalone demo structure, configurations, URL navigation, mocked APIs, shared demo stubs used by gallery, and verification. Use when changing files under demo/, changing gallery consumers of demo/src/stubs/, or running and validating the demo.
Its SKILL.md is about 1.1k 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 files under demo/
- Changing gallery consumers of demo/src/stubs/
- Running and validating the demo
Example prompts
- “/ha-frontend-demo”
What it can do on your machine
Read from SKILL.md and the folder at commit 3280113. 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
Shell commands in SKILL.md call:
pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
demo.home-assistant.io
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 Demo loads about 1.1k tokens when it runs. Until then it costs about 69 tokens; SKILL.md has 507 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 3280113, republished under its Apache-2.0 licence (© home-assistant). 507 words, ~1,075 tokens.
Download SKILL.mdSave it as
.claude/skills/ha-frontend-demo/SKILL.md (or your agent's skills folder).- name
- ha-frontend-demo
- description
- Home Assistant standalone demo structure, configurations, URL navigation, mocked APIs, shared demo stubs used by gallery, and verification. Use when changing files under demo/, changing gallery consumers of demo/src/stubs/, or running and validating the demo.
HA Frontend Demo
Use this skill for standalone demo work and changes to shared demo stubs consumed by the gallery. Follow the persistent repository guidance in AGENTS.md and load matching specialist skills alongside this skill, especially ha-frontend-testing when running or validating the demo.
Purpose
The demo is the full Home Assistant frontend running against a mocked backend and is published at https://demo.home-assistant.io. It needs no Home Assistant server, which makes it the easiest way to load the real UI in a browser, for example to take screenshots.
Running The Demo
Run commands from the repository root:
pnpm dev:demo # Development server on http://localhost:8090
pnpm dev:demo --background # Detached; also supports --status/--stop/--logsUse the E2E workflows documented in ha-frontend-testing when validating the demo.
Opening A Specific Demo
The demo contains multiple demo configurations. Select one directly with the demo query parameter, for example http://localhost:8090/?demo=<slug>. The valid slugs are defined in demoConfigs in demo/src/configs/demo-configs.ts, so "the second demo" means the slug of the second entry in that list. An unknown slug falls back to the default, which is the first entry.
Opening A Specific Page
The demo build uses hash-based routing: the frontend path goes in the URL hash, and the demo query parameter goes before the #. The URL format is:
http://localhost:8090/?demo=<slug>#/<path>Useful paths:
/lovelace/0: The selected demo's dashboard, also the default when no hash is given./energy: The energy dashboard. Its tabs are views:/energy/overview(Summary),/energy/electricity,/energy/gas,/energy/water, and/energy/now./map,/history,/todo,/config: Other sidebar panels.
For example, the water tab of the energy dashboard of the second demo is:
http://localhost:8090/?demo=<second slug>#/energy/waterStructure
demo/src/ha-demo.ts: Root element that sets up all backend mocks.demo/src/configs/<slug>/: One directory per demo configuration, containing entities, dashboard, and theme data.demo/src/configs/demo-configs.ts: Registry of demo configurations and URL slug handling.demo/src/stubs/: Mocked WebSocket and REST APIs.demo/script/develop_demo,demo/script/build_demo: Development server and static build wrappers.
Show full SKILL.md (217 more words)Show less
Core Data
The service descriptions in src/fake_data/demo_services.ts and the trigger and condition descriptions and icons in demo/src/stubs/automation_platforms_*.ts are generated from Home Assistant Core. Do not edit them by hand. Run script/gen_demo_core_data to regenerate them from the core dev branch, and add a domain to the lists in build-scripts/gulp/gen-demo-core-data.js when the demo needs its services, triggers, or conditions. Their translations come from the backend translations merged into the demo build.
Shared Gallery Stubs
demo/src/stubs/ is shared, not demo-private: gallery pages import from it directly. Before changing or removing anything a stub does, search for its callers across demo/src/ and gallery/src/, then check the affected gallery pages as well as the demo.
The two consumers use a stub differently, so demo behavior does not predict gallery behavior. A gallery page calls stubs against the hass from provideHass, where hass.config is the shared demoConfig object. A stub that mutates hass.config in place is therefore visible to the page. demo/src/ha-demo.ts copies components into a new array before the stubs run, so the same mutation never reaches the demo. A change can look correct in the demo while quietly breaking a gallery page.
Verification
Load ha-frontend-testing and use its demo and gallery workflows. Validate both consumers when changing shared stubs. Documentation-only changes do not require code tests unless examples or commands change.
© 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-demo of home-assistant/frontend.
Open the folder on GitHubat commit 3280113
Compare with similar skills
Ha Frontend Demo 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 Demo this skillhome-assistant/frontend | 5.7k | — | ~1.1k | 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 Contexts
home-assistant/frontend
Home Assistant frontend Lit context and hass migration guidance.
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 Demo
What does Ha Frontend Demo do?
Home Assistant standalone demo structure, configurations, URL navigation, mocked APIs, shared demo stubs used by gallery, and verification. Ha Frontend Demo is an agent skill from home-assistant/frontend. Home Assistant standalone demo structure, configurations, URL navigation, mocked APIs, shared demo stubs used by gallery, and verification.
When should I use Ha Frontend Demo?
Ha Frontend Demo fits situations like: changing files under demo/; changing gallery consumers of demo/src/stubs/; running and validating the demo.
How do I install Ha Frontend Demo in Claude Code?
Run `npx skills add home-assistant/frontend --skill ha-frontend-demo -a claude-code`. Or copy the skill folder (.agents/skills/ha-frontend-demo in home-assistant/frontend) into .claude/skills/ha-frontend-demo in your project. Claude Code loads it when a task matches its description.
How do I install Ha Frontend Demo in Codex?
Run `npx skills add home-assistant/frontend --skill ha-frontend-demo -a codex`. Or copy the skill folder (.agents/skills/ha-frontend-demo in home-assistant/frontend) into .agents/skills/ha-frontend-demo in your project. Codex loads it when a task matches its description.
Can I use Ha Frontend Demo 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-demo -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-demo, .gemini/skills/ha-frontend-demo, .github/skills/ha-frontend-demo and .opencode/skills/ha-frontend-demo in your project.
What does Ha Frontend Demo need to run?
Going by SKILL.md and its folder, Ha Frontend Demo needs the command-line tools its instructions call (pnpm).
Does Ha Frontend Demo access the network?
SKILL.md names 1 domain. As links in the text: demo.home-assistant.io. This is read from the text; nothing was executed.
Is Ha Frontend Demo 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 Demo use?
Ha Frontend Demo 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 Demo use?
About 1.1k tokens (SKILL.md is roughly 4.3k 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 Demo?
Skills that share tags, products or a category with Ha Frontend Demo: 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 Demo?
home-assistant (a GitHub organization) maintains it in home-assistant/frontend, which has 5,699 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on October 11, 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.