Agent skill

Ha Frontend Styling

by home-assistant in home-assistant/frontend

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

Apache-2.0Auto-check passedFrontend & Design

Install Ha Frontend Styling

skills CLI

$ npx skills add home-assistant/frontend --skill ha-frontend-styling -a claude-code

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

GitHub CLI

$ gh skill install home-assistant/frontend ha-frontend-styling --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-styling .claude/skills/ha-frontend-styling && 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/

Paste into Claude Code

Install the "ha-frontend-styling" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-styling into .claude/skills/ha-frontend-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-styling", 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

$skill-installer install https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-styling

Type 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.

skills CLI

$ npx skills add home-assistant/frontend --skill ha-frontend-styling -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install home-assistant/frontend ha-frontend-styling --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ 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-styling .agents/skills/ha-frontend-styling && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "ha-frontend-styling" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-styling into .agents/skills/ha-frontend-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-styling", 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.

skills CLI

$ npx skills add home-assistant/frontend --skill ha-frontend-styling -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install home-assistant/frontend ha-frontend-styling --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ 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-styling .cursor/skills/ha-frontend-styling && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "ha-frontend-styling" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-styling into .cursor/skills/ha-frontend-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-styling", 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

$ gemini skills install https://github.com/home-assistant/frontend.git --path .agents/skills/ha-frontend-styling

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add home-assistant/frontend --skill ha-frontend-styling -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install home-assistant/frontend ha-frontend-styling --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ 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-styling .gemini/skills/ha-frontend-styling && rm -rf skills-src

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

Paste into Gemini CLI

Install the "ha-frontend-styling" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-styling into .gemini/skills/ha-frontend-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-styling", 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.

GitHub CLI

$ gh skill install home-assistant/frontend ha-frontend-styling

Installs 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).

skills CLI

$ npx skills add home-assistant/frontend --skill ha-frontend-styling -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ 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-styling .github/skills/ha-frontend-styling && rm -rf skills-src

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

Paste into GitHub Copilot

Install the "ha-frontend-styling" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-styling into .github/skills/ha-frontend-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-styling", 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.

skills CLI

$ npx skills add home-assistant/frontend --skill ha-frontend-styling -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install home-assistant/frontend ha-frontend-styling --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ 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-styling .opencode/skills/ha-frontend-styling && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "ha-frontend-styling" agent skill from https://github.com/home-assistant/frontend/tree/dev/.agents/skills/ha-frontend-styling into .opencode/skills/ha-frontend-styling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ha-frontend-styling", 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-styling
GitHub stars: 5.7k
Token cost: ~799 tokens
SKILL.md length: 313 words
Files: 1
Skills in repo: 12
Repo updated: Oct 10, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

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

Visual component structure
SKILL.md covers Theme And Layout Basics, Interaction States, View Transitions and Review Checklist
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Tasks that involve Responsive design

What it does

Ha Frontend Styling is an agent skill from home-assistant/frontend. Home Assistant frontend styling, theming, spacing, responsive layout, RTL, and View Transitions guidance. Use when editing CSS, layout, motion, or visual component structure.

Its SKILL.md is about 800 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 Responsive design and Theming and dark mode. 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

Visual component structure
Tasks that involve Responsive design
Tasks that involve Theming and dark mode

Example prompts

“/ha-frontend-styling”

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 Styling loads about 799 tokens when it runs. Until then it costs about 49 tokens; SKILL.md has 313 words of instructions outside code blocks.

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

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). 313 words, ~799 tokens.

Download SKILL.mdSave it as .claude/skills/ha-frontend-styling/SKILL.md (or your agent's skills folder).

name: ha-frontend-styling
description: Home Assistant frontend styling, theming, spacing, responsive layout, RTL, and View Transitions guidance. Use when editing CSS, layout, motion, or visual component structure.

HA Frontend Styling

Use this skill when editing CSS, layout, visual hierarchy, theme integration, responsive behavior, RTL support, or view transitions.

Theme And Layout Basics

Use Home Assistant CSS custom properties instead of hardcoded colors.
Use --ha-space-* spacing tokens instead of hardcoded spacing where possible.
Keep components mobile-first and enhance for desktop.
Keep layouts RTL-safe. Prefer logical properties when they fit.
Prefer ha-* components and current Web Awesome wrappers.
Avoid adding new legacy Material Web Components (mwc-*).
Scope styles to the component. Do not rely on global styles for component internals.

Spacing tokens are defined in src/resources/theme/core.globals.ts. The scale runs from --ha-space-1 at 4px through --ha-space-20 at 80px in 4px increments. Common values are --ha-space-2 at 8px, --ha-space-4 at 16px, and --ha-space-8 at 32px.

static get styles() {
  return css`
    :host {
      padding: var(--ha-space-4);
      color: var(--primary-text-color);
      background-color: var(--card-background-color);
    }

    .content {
      gap: var(--ha-space-2);
    }

    @media (max-width: 600px) {
      :host {
        padding: var(--ha-space-2);
      }
    }
  `;
}

Interaction States

Make touch targets large enough for mobile.
Provide clear hover, active, focus, disabled, loading, error, and unavailable states.
Preserve keyboard navigation and visible focus indicators.
Maintain WCAG AA contrast for text and essential UI affordances.

View Transitions

Use the View Transitions API only for meaningful continuity between DOM states.

Core resources:

Utility wrapper: src/common/util/view-transition.ts, withViewTransition().
Launch-screen fade example: src/util/launch-screen.ts.
Animation keyframes: src/resources/theme/animations.globals.ts.
Animation duration tokens: src/resources/theme/core.globals.ts.

Implementation rules:

Use withViewTransition() for fallback behavior.
Keep transitions simple. Subtle fades and crossfades usually work best.
Use --ha-animation-duration-fast, --ha-animation-duration-normal, or --ha-animation-duration-slow for timing.
Ensure each view-transition-name is unique at any given time.
Remember only one view transition can run at a time.
View transitions operate at document level and do not work inside Shadow DOM style isolation. For web components, set view-transition-name on :host or use document-level transitions.
The root gets view-transition-name: root by default. Target ::view-transition-group(root) to customize the default page transition.

Review Checklist

Styling uses theme variables and spacing tokens where practical.
Layout is mobile-first and RTL-safe.
Component styles are scoped.
Interactive states are clear and accessible.
Motion is subtle, tokenized, and respects reduced-motion behavior through existing globals.

Files

Just SKILL.md in .agents/skills/ha-frontend-styling of home-assistant/frontend.

Open the folder on GitHubat commit 0e9b62e

Compare with similar skills

Ha Frontend Styling 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 Styling compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Ha Frontend Styling this skillhome-assistant/frontend	5.7k	—	~799	Automated safety check: Pass	Apache-2.0	today
UI StylingOhh-889/skyroc	795	13 repos	~2.5k	Automated safety check: Pass	MIT	1 mo ago
Material 3hamen/material-3-skill	1.5k	2 repos	~7.8k	Automated safety check: Pass	MIT	2 mo ago
Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill	138	—	~3k	Automated safety check: Pass	MIT	9 days ago
Tailwind CSS Patternsever-works/ever-works	162	3 repos	~1.6k	Automated safety check: Notes	AGPL-3.0	today
UI Design Systemtry-works/role-model	118	—	~5k	Automated safety check: Pass	MIT	today

Similar skills

UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
795 GitHub starsUsed in 13 repos~2.5k tokens
Frontend & DesignAuto-check passed
Material 3
hamen/material-3-skill
Implement Google's Material Design 3 (Material You) UI system.
1.5k GitHub starsUsed in 2 repos~7.8k tokens
Frontend & DesignAuto-check passed
Material Design 3 UI/UX Guide
skydashnet/material-design-3-ui-skill
Guides designing, reviewing or implementing interfaces that follow Google's Material Design 3 system: semantic tokens, component states, adaptive layout and accessibility.
138 GitHub stars~3k tokensUpdated 9 days ago
Frontend & DesignAuto-check passed
Tailwind CSS Patterns
ever-works/ever-works
Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.
162 GitHub starsUsed in 3 repos~1.6k tokens
Frontend & DesignAuto-check: notes
UI Design System
try-works/role-model
React UI component systems with TailwindCSS + Radix + shadcn/ui.
118 GitHub stars~5k tokensUpdated today
Frontend & DesignAuto-check passed
Tailwindcss Development
cachethq/core
A skill your agent uses for Cachet Tailwind CSS and UI styling: Blade utility classes, public status-page components, Filament dashboard theme work, responsive layout, dark mode, spacing…
230 GitHub stars~1.1k tokensUpdated 5 days ago
Frontend & DesignAuto-check passed

Questions about Ha Frontend Styling

What does Ha Frontend Styling do?

Home Assistant frontend styling, theming, spacing, responsive layout, RTL, and View Transitions guidance. Ha Frontend Styling is an agent skill from home-assistant/frontend. Home Assistant frontend styling, theming, spacing, responsive layout, RTL, and View Transitions guidance.

When should I use Ha Frontend Styling?

Ha Frontend Styling fits situations like: visual component structure; tasks that involve Responsive design; tasks that involve Theming and dark mode.

How do I install Ha Frontend Styling in Claude Code?

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

How do I install Ha Frontend Styling in Codex?

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

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

What does Ha Frontend Styling need to run?

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

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

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

About 799 tokens (SKILL.md is roughly 3.2k 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 Styling?

Skills that share tags, products or a category with Ha Frontend Styling: UI Styling (Ohh-889/skyroc, 795 stars), Material 3 (hamen/material-3-skill, 1.5k stars), Material Design 3 UI/UX Guide (skydashnet/material-design-3-ui-skill, 138 stars) and Tailwind CSS Patterns (ever-works/ever-works, 162 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Ha Frontend Styling?

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.

Ha Frontend Styling

Install Ha Frontend Styling

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

HA Frontend Styling

Theme And Layout Basics

Interaction States

View Transitions

Review Checklist

Files

Compare with similar skills

Similar skills

UI Styling

Material 3

Material Design 3 UI/UX Guide

Tailwind CSS Patterns

UI Design System

Tailwindcss Development

More from home-assistant/frontend

Ha Frontend Components

Ha Frontend Contexts

Ha Frontend Demo

Ha Frontend Gallery

Ha Frontend Testing

Ha Frontend Types

Questions about Ha Frontend Styling

Install Ha Frontend Styling

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

HA Frontend Styling

Theme And Layout Basics

Interaction States

View Transitions

Review Checklist

Files

Compare with similar skills

Similar skills

More from home-assistant/frontend

Related

Questions about Ha Frontend Styling