Context
The /indigo:html-pages skill currently generates raw HTML/CSS/JS for each page from scratch. As the skill matures, common UI patterns will emerge (device toggle card, brightness slider, thermostat dial, sensor gauge, chart panel).
Proposal
Create a reusable component library that the skill can compose when generating pages. Components would be self-contained HTML/CSS/JS snippets with a consistent API.
Example Components
- DeviceToggleCard — shows device name + on/off toggle switch
- BrightnessCard — device name + brightness slider + toggle
- ThermostatCard — current temp + heat/cool setpoints + mode selector
- SensorGauge — circular or linear gauge for sensor values
- ChartPanel — time-series chart using the
/history/ API
- ActionButton — large button to execute an action group
- StatusBadge — compact on/off indicator for dashboards
Implementation
- Store component templates in
docs/html-pages/components/
- Each component: HTML template + CSS + JS with documented props
- Skill references components when generating pages
- Components share the
indigo-api.js instance
Effort
Large — design, implement, test, and document each component.
Priority
P3 — Phase 3 of the HTML pages feature. Raw generation works for V1.
Context
The
/indigo:html-pagesskill currently generates raw HTML/CSS/JS for each page from scratch. As the skill matures, common UI patterns will emerge (device toggle card, brightness slider, thermostat dial, sensor gauge, chart panel).Proposal
Create a reusable component library that the skill can compose when generating pages. Components would be self-contained HTML/CSS/JS snippets with a consistent API.
Example Components
/history/APIImplementation
docs/html-pages/components/indigo-api.jsinstanceEffort
Large — design, implement, test, and document each component.
Priority
P3 — Phase 3 of the HTML pages feature. Raw generation works for V1.