Ha Bubble Dashboard

Home Assistant dashboard design with Bubble Card 3.x, Streamline Card, Sidebar Card and Mushroom — including a merged HA/Bubble/Mushroom CSS theme with colour intelligence, palette recipes, WCAG checks, typography, wall-panel support and full troubleshooting. TRIGGERS: Bubble Card (any card type), Lovelace dashboards, CSS themes, colour palettes, fonts, Streamline templates, Sidebar Card nav, Mushroom chips, room pop-ups, wall panels, masonry→sections migration, native-vs-custom dashboard decisions, troubleshooting. SYMPTOMS: hardcodes hex in YAML · uses pre-v3.2 pop-up format · places pop-up

19 stars 3 forksData & Analytics

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add johnnyh1975/HA_Bubble_Skill --skill ha-bubble-dashboard

Manual install

git clone --depth 1 https://github.com/johnnyh1975/HA_Bubble_Skill.git /tmp/HA_Bubble_Skill
mkdir -p ~/.claude/skills
cp -r /tmp/HA_Bubble_Skill/. ~/.claude/skills/ha-bubble-dashboard

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# HA Dashboard UX

Reference skill for building Home Assistant dashboards using Bubble Card, Streamline
Card, and Sidebar Card — with the Casa5HeyneV2 merged HA/Bubble Card theme as the
CSS foundation.

---

## The Iron Law

```
COLOURS:    Never hardcode hex in card YAML. Always var(--ha-variable) → theme file.
POP-UPS:    Always use v3.2+ standalone format with cards: block. No separate stacks.
TEMPLATES:  Read bubble-card-ref.md before generating any Bubble Card YAML.
THEMES:     Output is a .yaml theme file for /config/themes/ — not inline card styles.
DASHBOARD:  Ask UI-mode vs YAML-mode before using Streamline Card !include syntax.
PLACEMENT:  Pop-ups and HBS footer are top-level view cards ONLY — never inside sections:
```

These six rules prevent 95% of errors. Violating any of them produces YAML that
either silently breaks or conflicts with the theme architecture.

**Note — light/dark mode:** Both modes is the default recommendation, not a law.
Single-mode themes are correct for wall panels, kiosk setups, and fixed displays.
Ask before generating both modes: see §3a for the decision question.

---

## Signal Scan — run before answering anything

Independent of *what* is being built. Scan the request for these; several can
apply at once. Each one changes the answer, and none of them is visible from
the output type alone — which is why they come first.

| Signal in the request | Do this before generating |
|---|---|

Read the full skill on GitHub

Details

Skill name: ha-bubble-dashboard
Repository: johnnyh1975/HA_Bubble_Skill
Repo updated: 30 October 2026

FAQ

What does the Ha Bubble Dashboard skill do?

How do I install the Ha Bubble Dashboard skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add johnnyh1975/HA_Bubble_Skill --skill ha-bubble-dashboard. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Ha Bubble Dashboard popular?

It lives in johnnyh1975/HA_Bubble_Skill, which has 19 GitHub stars and 3 forks.

Related skills

Majia Guanyuan

maojiebc/majia-guanyuan

观远 BI（Guandata）实战增益层。标准查数、指标批量查询、本地分析、建卡发布、ETL、数据集和表单结构管理、工作流、指标写入路由官方六组件。专攻 ETL 整库治理、SmartETL 全链路重写、引擎报错、自定义图表与 HTML 看板排障、看板口径档案与只读逐格验收、v7 发布兼容、移动端 phoneLayout、门店手机成绩单、SuperApp 的 LLM 中转及历史兼容、AI-native ADS 架构判断。餐饮会员公式见 majia-huiyuan。触发：execute-sql 5001、SQL 直查不可用、ETL 预览汇总、分块取数、历史数据抽取、预览截断、数字出处、看板口径档案、看板答案对账、观远、Guandata、会员、订单、复购率、RFM、ETL 治理、payload_json、自定义图表、HTML 看板、门店手机成绩单、换店滤空、phoneLayout、60004、SuperApp、ILLEGAL_JSON_RES、数据架构。

Data & Analytics

Notebooklm

JunSuzuki1973/notebooklm-antigravity-skill

Interact with Google NotebookLM via CLI (nlm). Use this when the user wants to manage notebooks, add sources, generate audio podcasts, research topics, query notebooks, or share content.

Data & Analytics

Taoguba Crawler

lisniuse/taoguba-crawler-skill

This skill should be used when the user asks to "crawl taoguba", "crawl tgb", "scrape taoguba articles", "run the crawler", "crawl bbs", "crawl home page", "generate article HTML", or needs to run the Taoguba (tgb.cn) web crawlers.

Data & Analytics

HTML Explainer

ds-vibe/html-explainer

Build a polished, lightly-interactive single-page web explainer for educational, informational, or explanatory content. Use when the user wants to explain, teach, summarize, or visualize a topic, concept, policy, dataset, process, or body of knowledge as an interactive web page — emphasizing progressive complexity, strong visual design, source-grounded accuracy, and an iterative quality loop. Triggers on requests like "make an interactive explainer / guide / walkthrough / one-pager," "turn this into a visual web page people can explore," or "help people get acquainted with X and drill down.

Data & Analytics

Lemonwrench

bpawnzZ/lemonwrench

Use when looking up car repair procedures, torque specs, diagrams or service-manual steps. Scrapes free OEM manuals by vehicle, resolves the exact trim/engine, and cross-checks parts catalogs and field sources.

Data & Analytics

Notebooklm Learner Pack

DrMultivac/notebooklm-learner-pack

Generate branded, topic-specific HTML NotebookLM Learner Packs — 29 copy-paste prompt cards (10 infographics + 5 slide decks + 5 audio overviews + 4 video storyboards + 5 knowledge tests) with a sticky dual-filter UI that toggles between six audience lenses (ELI5, Newbie, Clinical, Operator, Finance, Deep Dive) and five asset types. Triggers on "NotebookLM learner pack," "learner site," "learner prompts," "explainer prompt pack," "build a prompt library for [topic]," "make a NotebookLM pack on [topic] in [brand] voice," or the workflow of ingesting source material into NotebookLM and wanting a

Data & Analytics10

Browse the most popular Claude skills, all data & analytics skills, or write your own with the skills generator.