skills.rest
c-kraus
c-krausCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

html-builder

Create standalone HTML/JS widgets with embedded CSS for IFRAME embedding.

Updated May 10, 2026
Search Tags:#lecture notes#html#javascript#widgets#educational design#interactive visualization#iframe
One-click install
npx skills add https://github.com/c-kraus/thws-skills --skill html-builder-c-kraus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-builder
Source: https://github.com/c-kraus/thws-skills/tree/main/html-builder
Command: npx skills add https://github.com/c-kraus/thws-skills --skill html-builder-c-kraus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of turning lecture ideas into interactive, compact HTML/JS widgets without forcing you to write widget boilerplate by hand.

Core Features & Use Cases

  • Standalone HTML/JS Widgets: Generate a single-file widget with embedded CSS and vanilla JavaScript that can be embedded via IFRAME.
  • Targeted Visualization Patterns: Support parameter explorers, step-by-step process views, and interactive diagrams tailored for teaching moments.
  • Lecture-Friendly Output: Enforce a compact ~400–500px height, THWS orange design system, minimal UI text, and no “about”/credit sections so it complements lecture content.

Quick Start

Use the html-builder skill to create an IFRAME-embeddable interactive visualization widget for the lecture topic “interest rate vs. loan payoff”.

Frequently Asked Questions about html-builder

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

FAQPage Schema
How do I create interactive HTML widgets for lecture notes?▼

Interactive HTML widgets for lecture notes are created as standalone single-file HTML documents with embedded CSS and vanilla JavaScript, designed for IFRAME embedding. They support parameter explorers, step-by-step process views, and clickable diagrams for single-concept teaching.

What is an IFRAME-embeddable learning widget?▼

An IFRAME-embeddable learning widget is a compact standalone HTML file, approximately 400 to 500 pixels in height, containing embedded CSS and vanilla JavaScript. It provides interactive academic visualizations that can be directly inserted into lecture notes.

How do I build a parameter explorer for academic visualization?▼

Building a parameter explorer involves generating a single HTML file with embedded vanilla JavaScript that enables interactive variable manipulation. The widget enforces compact dimensions and minimal UI text to complement single-concept lecture content.

Can I use vanilla JavaScript to create interactive educational diagrams?▼

Yes, interactive educational diagrams are built using vanilla JavaScript within a standalone HTML file. The output requires no external dependencies or frameworks, relying entirely on embedded CSS and JavaScript for clickable diagram functionality.

Does the generated HTML widget require external CSS or JavaScript files?▼

No external CSS or JavaScript files are required. The generated widget is a single compact HTML document with all styling and vanilla JavaScript embedded directly inside, ensuring seamless IFRAME integration without external file dependencies.

What are the limitations of using embedded HTML widgets for teaching?▼

Limitations include a strict compact height of approximately 400 to 500 pixels and minimal UI text constraints. Widgets are designed for single-concept teaching moments and exclude about or credit sections to maintain lecture-friendly focus.

Related Skills

Explore More Education & Research Skills→
az9713az9713
4

lecture-transcript-slide-matcher

Align timestamped lecture transcripts with PDF slides into interactive HTML study guides.

Community
Intermediate
bentossellbentossell
467

visualise

Render SVG diagrams, HTML widgets, and charts inline in chat.

Community
Intermediate
tuan3wtuan3w
36

course

Convert online course schedules into structured Obsidian lecture notes.

Community
Advanced
Starchild-ai-agentStarchild-ai-agent
1

@1463/dashboard

Create interactive HTML/CSS/JavaScript dashboards with real-time data streaming.

Official
Advanced