microsim-p5

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

Updated Apr 21, 2026
One-click install
npx skills add https://github.com/HuuBar/skill-routing-experiment --skill microsim-p5-huubar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: microsim-p5
Source: https://github.com/HuuBar/skill-routing-experiment/tree/main/unified_skills/vishal/microsim-p5
Command: npx skills add https://github.com/HuuBar/skill-routing-experiment --skill microsim-p5-huubar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create interactive, width-responsive educational MicroSims using the p5.js JavaScript library, with clearly separated drawing and control regions and a simple template to accelerate development and deployment.

Core Features & Use Cases

  • Width-responsive canvas that adapts to container size, enabling classroom and online usage without layout issues.
  • Self-contained MicroSim package including index.md, main.html, a sketch file, and metadata.json for Dublin Core and educational metadata.
  • Reusable pattern that supports embedding via iframe in MkDocs, websites, or LMS platforms for demonstration and exploration.

Quick Start

Generate a new MicroSim by following this directory's p5.js template and preview it in an iframe.

Frequently Asked Questions about microsim-p5

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

FAQPage Schema
How do I create responsive p5.js sketches for educational demonstrations?▼

You create responsive p5.js educational MicroSims by using a template that separates drawing and control regions, ensuring the canvas adapts to container width for seamless classroom and online embedding.

What is a MicroSim and how does it work with p5.js?▼

A MicroSim is an interactive, width-responsive educational simulation built with p5.js, packaged with main.html, index.md, and metadata.json into a self-contained module for embedding via iframe.

Can I embed p5.js simulations in MkDocs documentation?▼

Yes, you can embed p5.js simulations in MkDocs. The MicroSim template generates an index.md file designed for iframe embedding within MkDocs sites and LMS platforms.

Do I need any external dependencies to build interactive MicroSims?▼

No external dependencies are required to build interactive MicroSims. The template relies solely on the p5.js JavaScript library and generates standard HTML, Markdown, and JSON files.

How do I add Dublin Core metadata to an educational p5.js sketch?▼

You add Dublin Core metadata to an educational p5.js sketch by generating a metadata.json file. The MicroSim template automatically structures this file with required Dublin Core and educational metadata fields.

What is the best way to structure a p5.js canvas with control panels for tutorials?▼

The best way to structure a p5.js canvas with control panels for tutorials is using a template that clearly separates the drawing region from the control region, ensuring responsive width adaptation.