build-demo-skeleton

Start by defining the learning objective in one sentence, then map what the user sees first, what action they take, and what changes on screen. Keep the demo focused on one core idea and let the interaction reveal the concept rather than long text explanations.

It takes three inputs: the concept to teach, the target audience, and the interaction type. From these it produces a demo title, user flow, state model, section map, text labels, and a reflection prompt.

Yes, when implementation is requested it scaffolds the files and component structure for the demo. By default it returns the design blueprint including the suggested file structure and implementation notes.

Avoid it when the concept requires extended reading, reference material, or sequential procedural knowledge that interaction cannot reveal quickly. The quality bar is that the demo makes the concept clearer within seconds, not minutes.

Limit the demo to one core idea, prefer simple state and obvious interactions, and avoid letting text explanations carry the lesson. Each screen change should directly make the target concept clearer.