Stats
Actions
Tags
From indigo
This skill should be used when the user asks to "build an HTML page for Indigo", "create an HTML dashboard", "make an Indigo web page", "create a device dashboard", "build a home summary page", "generate an HTML control page", "create a web dashboard", "make a lighting page", "build a security dashboard", or is working with HTML files in a plugin's Resources/static/pages/ directory. Generates self-contained HTML dashboard pages with indigo-api.js for live Indigo device data and controls.
How this skill is triggered — by the user, by Claude, or both
Slash command
/indigo:html-pagesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Self-contained HTML pages that display Indigo device data and controls. Pages use `indigo-api.js` for client-side REST API access. Serve from any Indigo plugin's static file directory, or open directly in a browser.
Self-contained HTML pages that display Indigo device data and controls. Pages use indigo-api.js for client-side REST API access. Serve from any Indigo plugin's static file directory, or open directly in a browser.
.html file with inline CSS and JSindigo-page-* meta tags in <head> provide page name, icon, and description for app discoveryindigo-api.js fetches device state and sends commands via POST /v2/api/commandprefers-color-scheme for automatic light/dark switchingINDIGO_CONFIG is not injected, enabling direct browser use without plugin infrastructureDetermine what the page should display. Use Indigo MCP tools to explore the user's setup:
mcp__indigo__list_devices — all devicesmcp__indigo__get_devices_by_type — filter by type (relay, dimmer, thermostat, sensor)mcp__indigo__list_action_groups — available scenesmcp__indigo__list_variables — variablesClarify the page's purpose. Common patterns:
Determine layout, device selection, and interactivity:
Layout options:
Interactivity levels:
Capability coverage — CRITICAL:
Show controls for EVERY capability a device supports by default. Never silently skip capabilities for layout reasons. If a dimmer has colour temperature support (supportsWhiteTemperature === true), its card must include a colour temp slider — even in small/half-width cards. Layout constraints are your problem to solve, not a reason to hide functionality.
If layout genuinely cannot fit all controls, explicitly ask the user before omitting anything:
"The [device] supports brightness, colour temperature, and RGB. A small card will be cramped with all three — would you like to skip colour or use a full-width card?"
Detect capabilities from the device object at render time:
dev.supportsOnState — toggledev.brightness != null / class contains Dimmer — brightness sliderdev.supportsWhiteTemperature — colour temp sliderdev.supportsRGB — RGB pickerdev.supportsHeatSetpoint — thermostat setpointdev.supportsCoolSetpoint — cool setpointPolling interval:
observeAll(callback, 5000))Produce a single HTML file. Follow this template structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<meta name="indigo-page-name" content="PAGE NAME">
<meta name="indigo-page-icon" content="house.fill">
<meta name="indigo-page-description" content="Brief description">
<title>PAGE NAME</title>
<style>
:root { /* light theme vars — see references/design-guidelines.md */ }
@media (prefers-color-scheme: dark) { :root { /* dark theme vars */ } }
</style>
</head>
<body>
<div id="content"></div>
<script>
// ── indigo-api.js V1 (MUST be inlined — see references/indigo-api-js.md) ──
// Paste the full IndigoAPI class and IndigoAPIError class here.
// Do NOT use <script src="../js/indigo-api.js"> — it fails in WKWebView.
</script>
<script>
if (typeof IndigoAPI !== "undefined" && IndigoAPI.isConfigured()) {
startDashboard();
} else {
showConfigForm(); // browser fallback
}
</script>
</body>
</html>
Sizing rules (pages are primarily viewed on iPhones and iPads):
env(safe-area-inset-*) padding to avoid navigation/tab bar clippingauto-fill, minmax(160px, 1fr) for responsive card layoutsreferences/design-guidelines.md for full device width table, spacing scale, and scroll behaviourScript loading:
IndigoAPI class directly in the page's <script> block — pages must be self-contained with no external script dependenciesreferences/indigo-api-js.md and include it in the generated pagereferences/design-guidelines.md "Script Loading" section for the patternGeneration rules:
typeof IndigoAPI !== "undefined" before use — defensive guard in case of unexpected loading issuesshowConfigForm() fallback that prompts for server URL and API key when INDIGO_CONFIG is not available (see examples/active-devices.html for the pattern)references/design-guidelines.md for the full theme templateCritical: All device commands use POST /v2/api/command — consult /indigo:api skill docs (docs/api/device-commands.md) for the full command reference. Do not guess command formats.
Offer deployment options based on how the page will be used:
Option A — Serve from an Indigo plugin (recommended for app integration):
Copy to any plugin's Contents/Resources/static/pages/ directory and restart the plugin via MCP. The page is then accessible at https://{server}:8176/{bundleID}/static/pages/page.html. Apps that support the /pages/ manifest endpoint discover pages automatically.
Option B — Browser-only: Save the HTML file anywhere. Open it directly in a browser — the page shows a connection form prompting for the Indigo server URL and API key. No plugin deployment needed. Good for quick testing or standalone dashboards on a wall-mounted tablet.
When building pages that show mixed device types, classify devices by their class field:
| Class contains | Category | Controls |
|---|---|---|
DimmerDevice | Lights | Toggle + brightness slider |
RelayDevice | Switches (or Lights if name contains light/lamp) | Toggle |
ThermostatDevice | Thermostats | Heat/cool setpoints, mode |
SensorDevice | Sensors | Display-only (sensorValue, onState) |
| Other | Other | Toggle if onState exists |
Check onState === true to determine if a device is active. For dimmers, also check brightness > 0.
const indigo = new IndigoAPI();
await indigo.getDevices(); // fetch all devices
await indigo.toggle(deviceId); // toggle on/off
await indigo.setBrightness(deviceId, 75); // dimmer 0-100
await indigo.setHeatSetpoint(deviceId, 21); // thermostat
await indigo.executeActionGroup(id); // run a scene
indigo.observeAll(callback, 5000); // poll every 5s, call back on change
indigo.observe(deviceId, callback, 5000); // poll single device
For detailed API and design documentation, consult:
references/indigo-api-js.md — Full indigo-api.js V1 API reference, device properties, error handling, command transportreferences/design-guidelines.md — CSS theme template, SF Symbol icons, interactive control patterns, responsive layout, deployment pathsexamples/active-devices.html — Complete working page: active devices with toggle controls, dark mode, browser connection form fallback. Copy and adapt as a starting point./indigo:api — Indigo REST and WebSocket API reference (device commands, authentication). Always consult before writing command code./indigo:control-pages — XML-based Indigo control pages (alternative to HTML pages)npx claudepluginhub simons-plugins/indigo-claude-plugin --plugin indigoGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.