v1.4 Creating HTML pages

[siclark]

Hi all,

Following the conversations on other threads with Jay and others on creating control pages, and HTML pages being an easier / better option, I've added a new capability to the Indigo Claude Code plugin — the /indigo:html-pages command. It generates self-contained HTML dashboard pages that connect to your Indigo server and show live device data with interactive controls.

What it does:

Describe what you want ("security dashboard showing my locks and motion sensors", "lighting controls for the
living room") and it generates a single HTML file with:

- Live device data via the Indigo REST API (polling every 5 seconds)
- Toggle switches, brightness sliders, thermostat controls
- Automatic dark mode support
- Responsive layout for iPhone, iPad, and desktop browsers
- SF Symbol icon metadata for app integration

Two ways to use the pages:

1. In a browser — open the HTML file directly and enter your server URL + API key in the connection form
2. Served from a plugin — drop the file into any plugin's Resources/static/pages/ directory and access it through
IWS

How it works:

Pages use a small JavaScript library called IndigoAPI (inlined in each page) that wraps the Indigo REST API. All
commands go through POST /v2/api/command with Bearer token auth. The library handles device fetching, command
sending, reactive polling, and error states.

Example — what a generated page looks like:

The skill ships with a sample page (active-devices.html) that shows all currently active devices with toggle
controls. It fetches your devices dynamically — no hardcoded device IDs.

Getting started:

# Install or update the plugin
/plugin install indigo@simons-plugins/indigo-claude-plugin
/reload-plugins

# Generate a page
/indigo:html-pages

The skill walks you through a 4-phase workflow: discover your devices (using MCP tools if connected), design the
layout, generate the page, and deploy it.

Looking for testers and contributors:

This is v1 — there's plenty of room to improve. I'd love help with:

- Testing on different setups — different device types, plugin configurations, local vs reflector connections
- Page templates — if you build a page you think others would find useful, share it and I can add it to the
examples
- Device type coverage — the library handles relays, dimmers, thermostats, and sensors. If you have speed
controls, sprinklers, locks, or other device types, test and let me know what's missing
- Design feedback — the generated pages aim for an iOS-native feel but I'm not a designer. Suggestions welcome

I am also thinking of creating a templates resource probably on git somewhere where we could share templates of pages, or css styles?

The skill docs, API reference, and design guidelines are all in the skills/html-pages/ directory. PRs welcome.

Cheers,
Simon (& Claude)

[siclark]

An example webpage it just built for me using the UK trains plugin for devices. Has dropdown to select what device to show, expanding boxes and refreshes automatically.

[siclark]

And a security page, I just asked for a security page to summarise and show all my security devices. This is it running in Domio.

[siclark]

Sorry for the spam, but I have had some fun upgrading the skill and testing how far it could go.

I have also used the /frontend-design skill and got this detailed evaluation of how we should build a room page.

Design Context (from our work)
Target audience: You and your family — people viewing this on iPhone primarily, iPad occasionally, sometimes desktop browser. Private home use, not a commercial product.
Use cases:
Quick glance at dining room state from anywhere in the house
Adjust lighting mood when entertaining (dimmer + warm/cool temp)
Check if the heating's actually working (dining TRV + parent downstairs zone)
See temperature trend over the last few hours
Brand personality/tone: iOS-native feel, matches the existing Home Summary/Security pages we've built. Refined, understated, not maximalist. Think "the Apple Home app done well" — dark mode friendly, generous whitespace, meaningful use of colour, SF Pro typography.
Constraint: Self-contained HTML — everything inline, including the chart library (will use a minimal SVG-based chart, no external libraries).
Phase 2: DESIGN — Proposal
Here's the dining room layout concept:
┌──────────────────────────────────────────┐
│ Dining Room │
│ 19.5° · Heating │
│ │
│ ╔════════════════════════════════════╗ │
│ ║ TEMPERATURE CHART (full width) ║ │
│ ║ Last 6 hours, sparkline style ║ │
│ ║ Current setpoint as dashed line ║ │
│ ╚════════════════════════════════════╝ │
│ │
│ LIGHTING ───────────────────── │
│ ┌─────────────────────────────────┐ │
│ │ Sideboard Lamps ON │ │
│ │ ━━━━━━━━━━━━━━━━░░░░░░ 60% │ │
│ │ Warm ━━━●━━━━━━━━━━━ Cool │ │
│ └─────────────────────────────────┘ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Shelves │ │ Desk Lamp │ │
│ │ dimmer + │ │ toggle │ │
│ │ slider │ │ │ │
│ └─────────────┘ └─────────────┘ │
│ │
│ HEATING ────────────────────── │
│ ┌─────────────────────────────────┐ │
│ │ TRV (Primary) 19.5° │ │
│ │ Target [ − ] 21° [ + ] │ │
│ │ Valve 100% · 64% │ │
│ └─────────────────────────────────┘ │
│ ┌─────────────────────────────────┐ │
│ │ Zone: Downstairs 20.8° │ │
│ │ Target 28° · Program heating │ │
│ │ (view only — controlled by │ │
│ │ master Heatmiser schedule) │ │
│ └─────────────────────────────────┘ │
└──────────────────────────────────────────┘
Design decisions:
Header: Big room name, small status line showing current temp + heating status
Temperature chart first: Most glanceable info, full-width SVG sparkline showing last 6 hours with target line overlay
Section headers: Small uppercase subtle labels (LIGHTING, HEATING), left-aligned
Primary light card (Sideboard Lamps): Full width, shows on/off toggle, brightness slider, AND colour temp slider (warm → cool gradient background)
Secondary lights (Shelves dimmer + Desk Lamp relay): Side-by-side smaller cards
Dining TRV: Full width, current temp prominent, setpoint controls with − / + buttons, valve position and battery as subtle metadata
Downstairs zone: Full width, clearly marked as view-only parent zone, shows current temp + target, explains it's controlled by the master schedule
Chart API: Uses existing /message/com.simons-plugins.domio/history/?device_id=X endpoint from the plugin
Colour palette:
Background: warm dark oklch(0.18 0.01 40) (slight amber tint, not pure grey)
Card surface: oklch(0.22 0.01 40)
Text: oklch(0.95 0.005 40)
Accent (warm, dining-room appropriate): amber oklch(0.75 0.15 65) instead of the usual cool blue
Heat: red-orange oklch(0.65 0.2 30) when heating, grey when idle
On state: subtle glow, not neon
Typography: System SF Pro (already -apple-system), varied weights — 700 for room name, 600 for card titles, 500 for body, 400 for metadata. Tabular numerals for temperatures.
Room template approach: I'll structure the JS so device IDs and labels are in a single ROOM_CONFIG object at the top. To adapt for another room, just change that config. The rest of the page logic is generic.

You could of course really get creative and specific on the design rules for your pages.

From which it built, which I think is pretty cool.. certainly easier than using the many Home Assistant dashboard tools and looks just as good.

IMG_0073.jpeg (209.89 KiB) Viewed 171 times

[Korey]

Now that is a super handy feature!!!

Thanks!!

[durosity]

Wow, this is astounding work. I’ve been a bit out of the loop lately due to other things going on, but it looks like there’s a lot of amazing stuff happening for me to delve into upon my return!

[siclark]

Thanks.. and the exciting thing, this is only the beginning! Some better standardised design prompts, shared standard templates and it could do really cool dynamic pages almost out the box.
And then it could also do some wild screens too... I am excited to see what people do with it.

[siclark]

Wow, this is astounding work. I’ve been a bit out of the loop lately due to other things going on, but it looks like there’s a lot of amazing stuff happening for me to delve into upon my return!

This is the page you are looking for durosity. Use this skill to create html pages, tell it it’s for your size mobile screen and you want it shared by indigo web server for domio and it should save in right place. Domio app will then see them.

[durosity]

Wow, this is astounding work. I’ve been a bit out of the loop lately due to other things going on, but it looks like there’s a lot of amazing stuff happening for me to delve into upon my return!

This is the page you are looking for durosity. Use this skill to create html pages, tell it it’s for your size mobile screen and you want it shared by indigo web server for domio and it should save in right place. Domio app will then see them.

Ah perfect, I've got it bookmarked now to have a look at over the weekend.