skills.rest
ynulihao
ynulihaoCOMMUNITY
Explore all skills by this author →
GitHub

microsim-generator

Generates interactive educational MicroSims with HTML, JavaScript, and CSS.

564|70|Updated Jan 25, 2026
Search Tags:#data visualization#visualization#educational tools#micro-simulations#javascript libraries#interactive content
One-click install
npx skills add https://github.com/ynulihao/AgentSkillOS --skill microsim-generator-ynulihao
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: microsim-generator
Source: https://github.com/ynulihao/AgentSkillOS/tree/main/data/skill_seeds/microsim-generator
Command: npx skills add https://github.com/ynulihao/AgentSkillOS --skill microsim-generator-ynulihao

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the creation of interactive educational visualizations (MicroSims) by intelligently routing requests to the most appropriate JavaScript library and generator.

Core Features & Use Cases

  • Versatile Visualization: Supports 13 different types of visualizations including charts, timelines, maps, network diagrams, flowcharts, and custom simulations.
  • Automated Routing: Analyzes user requests to select the best-suited generator based on keywords and requirements.
  • Complete Package Generation: Creates full MicroSim packages including HTML, JavaScript, CSS, documentation, and metadata.
  • Use Case: A teacher needs to create an interactive timeline of the solar system for a lesson. This skill can generate the necessary HTML, JS, and CSS files for a vis-timeline-based MicroSim.

Quick Start

Use the microsim-generator skill to create a bar chart comparing the populations of major cities.

Frequently Asked Questions about microsim-generator

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

FAQPage Schema
How do I generate interactive educational visualizations without writing JavaScript code?▼

Interactive educational visualizations can be generated automatically by routing your request to the optimal JavaScript library, producing complete packages with HTML, CSS, and JavaScript files.

What types of interactive charts and diagrams can I create for educational content?▼

Interactive educational content supports 13 visualization types, including charts, timelines, maps, network diagrams, flowcharts, and custom simulations using libraries like p5.js, Chart.js, and Plotly.

How do I build an interactive timeline for a history or science lesson?▼

Building an interactive timeline uses the vis-timeline library to generate required HTML, JavaScript, and CSS files, creating a complete MicroSim package ready for classroom use.

Does this tool support network graphs and flowcharts for data visualization?▼

Network graphs and flowcharts are fully supported through automated routing to vis-network and Mermaid libraries, generating complete interactive MicroSims with documentation and metadata.

Can I create map-based interactive content using JavaScript libraries?▼

Map-based interactive content is generated using the Leaflet library, producing a complete package with HTML, JavaScript, and CSS for educational MicroSims without manual coding.

What is the best way to package interactive MicroSims for educational tools?▼

Packaging interactive MicroSims is handled automatically by generating a complete output bundle consisting of HTML, JavaScript, CSS, documentation, and metadata based on your specific visualization requirements.

Related Skills

Explore More Education & Research Skills→
HuuBarHuuBar

microsim-p5

Create interactive, width-responsive educational MicroSims with p5.js templates.

Community
Intermediate
NaveedTechLabNaveedTechLab
11

progress-motivator

Tracks learning progress and provides personalized motivational messages for users in educational platforms.

Community
Intermediate
whichguywhichguy

p5js

Create interactive and generative visual art with p5.js.

Community
Advanced
dmccrearydmccreary
90

microsim-generator

Route MicroSim creation requests to the best-matching specialized generator.

Community
Advanced