Agent skill

Ha Frontend UX Readiness

by home-assistant in home-assistant/frontend

Home Assistant frontend UI/UX readiness routing for new cards, badges, screens, and interaction patterns.

Apache-2.0Auto-check passedFrontend & Design

Install Ha Frontend UX Readiness

skills CLI
$ npx skills add home-assistant/frontend --skill ha-frontend-ux-readiness -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install home-assistant/frontend ha-frontend-ux-readiness --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-ux-readiness .claude/skills/ha-frontend-ux-readiness && rm -rf skills-src

Use ~/.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/

Facts

Skill name
ha-frontend-ux-readiness
GitHub stars
5.7k
Token cost
~855 tokens
SKILL.md length
403 words
Files
1
Skills in repo
12
Repo updated
First seen
Licence
Apache-2.0

At a glance

Home Assistant frontend UI/UX readiness routing for new cards, badges, screens, and interaction patterns.

  • Works in 4 steps: Apply ha-frontend-review and record its… → Classify the user-facing decision. → Decide whether the evidence gathered… → …
  • Tasks that involve UI design
  • SKILL.md covers Early Exit, Triage, Routes and Reporting
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Ha Frontend UX Readiness is an agent skill from home-assistant/frontend. Home Assistant frontend UI/UX readiness routing for new cards, badges, screens, and interaction patterns. Use it with ha-frontend-review to decide whether frontend review is enough or further UI/UX input is needed. Skip it for PRs already carrying Needs UX and for fixes or technical details that preserve an established experience.

Its SKILL.md is about 860 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, covering UI design and Frontend development. 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

  • Tasks that involve UI design
  • Tasks that involve Frontend development

Example prompts

  • “/ha-frontend-ux-readiness”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Apply ha-frontend-review and record its UI/UX evidence.
  2. Classify the user-facing decision.
  3. Decide whether the evidence gathered during frontend review settles the direction.
  4. Select exactly one route below and state which frontend-review evidence supports it.

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

    No scripts in the folder and no shell commands in SKILL.md.

    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 UX Readiness loads about 855 tokens when it runs. Until then it costs about 90 tokens; SKILL.md has 403 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~90
When it runs · the whole SKILL.md, loaded when a task matches
~855

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). 403 words, ~855 tokens.

Download SKILL.mdSave it as .claude/skills/ha-frontend-ux-readiness/SKILL.md (or your agent's skills folder).
name
ha-frontend-ux-readiness
description
Home Assistant frontend UI/UX readiness routing for new cards, badges, screens, and interaction patterns. Use it with `ha-frontend-review` to decide whether frontend review is enough or further UI/UX input is needed. Skip it for PRs already carrying Needs UX and for fixes or technical details that preserve an established experience.

HA Frontend UI/UX Readiness

Use the design context and evidence gathered through ha-frontend-review to decide whether a change's UI/UX direction is settled and whether further UI/UX review should be recommended or is explicitly required. This skill routes the result; it does not repeat or replace implementation, accessibility, or frontend quality review.

Early Exit

If the PR already carries the Needs UX label, reviewers have already decided to ask designers or UX reviewers for guidance. Do not use this skill to make that recommendation again.

Triage

  1. Apply ha-frontend-review and record its UI/UX evidence.
    • Include the applicable gallery specification, production or approved designs, shared ha-* components, task requirements, historical feedback, and direct instructions.
    • Keep the implementation review separate from this readiness decision.
  2. Classify the user-facing decision.
    • Existing-feature fixes and technical details normally remain with frontend review when they preserve the established experience.
    • New cards, badges, screens, and interaction patterns normally need this readiness check.
  3. Decide whether the evidence gathered during frontend review settles the direction.
    • Frontend maintainer guidance, explicit UI/UX approval, current guidance, an established pattern, or a task that settles the material visual and interaction choices can settle the direction.
    • Insufficient or conflicting evidence leaves the direction unresolved.
  4. Select exactly one route below and state which frontend-review evidence supports it.
Show full SKILL.md (190 more words)Show less

Routes

  • Frontend review sufficient: The change preserves the established experience, or the evidence settles the material visual and interaction choices. Cite that evidence and continue with ha-frontend-review.
  • UI/UX review recommended: A new user experience has material design choices that remain unresolved. Identify the decision that needs input and recommend UI/UX review.
  • UI/UX review required: A workflow rule or direct human instruction explicitly requires UI/UX review. Cite that evidence. A new design, task link, or lack of evidence is not enough on its own.

Frontend maintainer guidance, explicit UI/UX approval, established patterns, and task requirements inform the route. A task can settle requirements without settling the UI/UX. Recommend UI/UX review when important design choices remain unresolved.

Reporting

Keep the result concise and use this structure:

  • Route: Frontend review sufficient, UI/UX review recommended, or UI/UX review required
  • Established patterns: relevant gallery specifications, production designs, and shared ha-* components for the next reviewer to compare
  • Supporting evidence: approval, guidance, established patterns, task requirements, direct instructions, or the evidence gap or conflict
  • Next action: the review action implied by the route

Separate whether the UI/UX direction is settled from whether the implementation is correct.

© 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-ux-readiness of home-assistant/frontend.

Open the folder on GitHubat commit 3280113

Compare with similar skills

Ha Frontend UX Readiness 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.

Ha Frontend UX Readiness compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Ha Frontend UX Readiness this skillhome-assistant/frontend5.7k—~855Automated safety check: PassApache-2.0
Senior FrontendOhh-889/skyroc7952 repos~1.1kAutomated safety check: NotesMIT
Userinterface Wikiraphaelsalaja/userinterface-wiki907—~3.5kAutomated safety check: PassMIT
UI Design Braincarmahhawwari/ui-design-brain893—~2.1kAutomated safety check: PassMIT
Variate Design VariationsNutlope/variate212—~3.5kAutomated safety check: PassMIT
Design-Led Website Builderliucongg/liucong-skills248—~1.3kAutomated safety check: PassApache-2.0

Similar skills

  • Senior Frontend

    Ohh-889/skyroc

    Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.

    795 GitHub starsUsed in 2 repos~1.1k tokens
    Frontend & DesignAuto-check: notes
  • Userinterface Wiki

    raphaelsalaja/userinterface-wiki

    UI/UX best practices for web interfaces. An agent skill from raphaelsalaja/userinterface-wiki.

    907 GitHub stars~3.5k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • UI Design Brain

    carmahhawwari/ui-design-brain

    Generate production-grade UI using real component patterns and best practices from 60+ documented interface components.

    893 GitHub stars~2.1k tokensUpdated 7 mo ago
    Frontend & DesignAuto-check passed
  • Puts four real design variations of one project file on your localhost behind a small card you flip with the arrow keys, then acts on your verdict.

    212 GitHub stars~3.5k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed
  • Design-Led Website Builder

    liucongg/liucong-skills

    Turns a short brief into a researched, distinctive website: lock the intent with at most one question, research live reference sites, source materials, then build and verify.

    248 GitHub stars~1.3k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed
  • UI Aesthetics Judgment

    kasonye/ui-aesthetics-skill

    Sets rules for web UI work that favor hierarchy, spacing and restrained styling, with routes for generating, reviewing and polishing interfaces.

    383 GitHub stars~3.2k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

More from home-assistant/frontend

All 12 skills in this repo
  • Ha Frontend Components

    home-assistant/frontend

    Home Assistant frontend component patterns. An agent skill from home-assistant/frontend.

    5.7k GitHub stars~1.2k tokensUpdated today
    Auto-check passed
  • Ha Frontend Contexts

    home-assistant/frontend

    Home Assistant frontend Lit context and hass migration guidance.

    5.7k GitHub stars~1.9k tokensUpdated today
    Auto-check passed
  • Ha Frontend Demo

    home-assistant/frontend

    Home Assistant standalone demo structure, configurations, URL navigation, mocked APIs, shared demo stubs used by gallery, and verification.

    5.7k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Ha Frontend Gallery

    home-assistant/frontend

    Home Assistant frontend gallery structure, pages, demos, content, and verification.

    5.7k GitHub stars~2k tokensUpdated today
    Auto-check passed
  • Ha Frontend Styling

    home-assistant/frontend

    Home Assistant frontend styling, theming, spacing, responsive layout, RTL, and View Transitions guidance.

    5.7k GitHub stars~799 tokensUpdated today
    Auto-check passed
  • Ha Frontend Testing

    home-assistant/frontend

    Home Assistant frontend testing and validation workflow. An agent skill from home-assistant/frontend.

    5.7k GitHub stars~1.7k tokensUpdated today
    Auto-check passed

Works with

Questions about Ha Frontend UX Readiness

What does Ha Frontend UX Readiness do?

Home Assistant frontend UI/UX readiness routing for new cards, badges, screens, and interaction patterns. Ha Frontend UX Readiness is an agent skill from home-assistant/frontend. Home Assistant frontend UI/UX readiness routing for new cards, badges, screens, and interaction patterns.

When should I use Ha Frontend UX Readiness?

Ha Frontend UX Readiness fits situations like: tasks that involve UI design; tasks that involve Frontend development.

How do I install Ha Frontend UX Readiness in Claude Code?

Run `npx skills add home-assistant/frontend --skill ha-frontend-ux-readiness -a claude-code`. Or copy the skill folder (.agents/skills/ha-frontend-ux-readiness in home-assistant/frontend) into .claude/skills/ha-frontend-ux-readiness in your project. Claude Code loads it when a task matches its description.

How do I install Ha Frontend UX Readiness in Codex?

Run `npx skills add home-assistant/frontend --skill ha-frontend-ux-readiness -a codex`. Or copy the skill folder (.agents/skills/ha-frontend-ux-readiness in home-assistant/frontend) into .agents/skills/ha-frontend-ux-readiness in your project. Codex loads it when a task matches its description.

Can I use Ha Frontend UX Readiness 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-ux-readiness -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-ux-readiness, .gemini/skills/ha-frontend-ux-readiness, .github/skills/ha-frontend-ux-readiness and .opencode/skills/ha-frontend-ux-readiness in your project.

What does Ha Frontend UX Readiness need to run?

SKILL.md names no scripts, command-line tools or credentials: Ha Frontend UX Readiness is instructions for the agent only.

Does Ha Frontend UX Readiness 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 UX Readiness 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 UX Readiness use?

Ha Frontend UX Readiness 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 UX Readiness use?

About 855 tokens (SKILL.md is roughly 3.4k 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 UX Readiness?

Skills that share tags, products or a category with Ha Frontend UX Readiness: Senior Frontend (Ohh-889/skyroc, 795 stars), Userinterface Wiki (raphaelsalaja/userinterface-wiki, 907 stars), UI Design Brain (carmahhawwari/ui-design-brain, 893 stars) and Variate Design Variations (Nutlope/variate, 212 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ha Frontend UX Readiness?

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.