edu-demo-builder

Design interactive educational demos from a base HTML template.

Updated May 24, 2025

Search Tags:#workflow #template #documentation #visualization #orchestrator #UX-design #educational-demos

Ready to run

npx skills add https://github.com/hanialshater/nextjs-blog-hani --skill edu-demo-builder

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: edu-demo-builder
Source: https://github.com/hanialshater/nextjs-blog-hani/tree/main/skills/edu-demo-builder
Command: npx skills add https://github.com/hanialshater/nextjs-blog-hani --skill edu-demo-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps educators and developers rapidly design and share interactive, UX-focused educational demos, reducing iteration time and ensuring consistent presentation of concepts.

Core Features & Use Cases

Structured, copy-first workflow from a base template to generate new demos.
Visual-thinking guidance to pre-plan layouts and interactions before coding.
Documentation-first approach with an agent_approach.md to capture decisions and rationale.
Reproducible, phase-driven outputs suitable for teaching, demonstrations, and evaluation.

Quick Start

Copy the base template to your output location and start editing: cp problems/base.html problems/<name>/generations/gen{N}/agent_{id}.html

Frequently Asked Questions about edu-demo-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build interactive educational demos with a structured workflow?▼

To build interactive educational demos, copy a base HTML template to your output location and start editing. This workflow enforces a phase-driven process, guiding you from initial visual planning to final usability validation with reproducible outputs.

What is a documentation-first approach for creating UX-focused educational visualizations?▼

A documentation-first approach for educational visualizations captures design decisions and rationale in an agent_approach.md file before coding. This ensures explicit UX design logic, consistent outcomes, and reviewer-ready artifacts across generations.

Can I use this template orchestrator to iterate educational demo layouts without losing previous versions?▼

Yes, the template orchestrator supports iterating educational demo layouts across generations. By copying base templates into structured generation directories, you preserve previous versions while refining visuals and validating usability.

Do I need any external dependencies to start designing educational demos?▼

No external dependencies are required to start designing educational demos. You only need to copy the provided base HTML template to your local output directory and begin editing the visualizations directly.

What is the best way to document design decisions when refining educational demos?▼

The best way to document design decisions when refining educational demos is maintaining an agent_approach.md file. This captures your explicit design rationale and validation steps, ensuring reproducible, reviewer-ready artifacts.

Are there limitations to using phase-driven workflows for educational demo generation?▼

The phase-driven workflow for educational demo generation requires strict adherence to copying base templates and documenting decisions. Skipping phases or bypassing the documentation-first approach breaks reproducibility and compromises reviewer-ready outputs.