interactive-html

What problem does it solve?

This Skill ensures that all generated learning applications are fully interactive, meaning every user control has a corresponding handler that updates the application's state and visibly changes the user interface.

Core Features & Use Cases

• State-Driven UI: All interactive elements read from and write to a single, centralized state object.
• Event Handlers: Buttons, sliders, and inputs are equipped with event listeners (onclick, oninput, onchange) that modify the state and trigger UI updates.
• Visible Changes: Every control is guaranteed to produce a visible effect on the application's display.
• Use Case: Building an educational simulation where a user adjusts a slider to control a variable (like temperature), and the simulation's output (e.g., a visual representation or a numerical readout) updates in real-time based on the new state.

Quick Start

Generate an HTML application where a slider controls the displayed temperature, updating a text readout as the slider moves.