Creates interactive educational MicroSims using the best-matched JavaScript library (p5.js, Chart.js, Plotly, Mermaid, vis-network, vis-timeline, Leaflet, Venn.js). Analyzes user requirements to route to the appropriate visualization type and generates complete MicroSim packages with HTML, JavaScript, CSS, documentation, and metadata.
This meta-skill routes MicroSim creation requests to the appropriate specialized generator based on visualization requirements. It consolidates 13 individual MicroSim generator skills into a single entry point with on-demand loading of specific implementation guides.
Use this skill when users request:
Scan the user's request for trigger keywords and match to the appropriate generator guide.
| Trigger Keywords | Guide File | Library |
|---|---|---|
| timeline, dates, chronological, events, history, schedule, milestones | references/timeline-guide.md | vis-timeline |
| map, geographic, coordinates, latitude, longitude, locations, markers | references/map-guide.md | Leaflet.js |
| function, f(x), equation, plot, calculus, sine, cosine, polynomial | references/plotly-guide.md | Plotly.js |
| network, nodes, edges, graph, dependencies, concept map, knowledge graph | references/vis-network-guide.md | vis-network |
| flowchart, workflow, process, state machine, UML, sequence diagram | references/mermaid-guide.md | Mermaid.js |
| venn, sets, overlap, intersection, union, categories | references/venn-guide.md | Custom |
| chart, bar, line, pie, doughnut, radar, statistics, data | references/chartjs-guide.md | Chart.js |
| bubble, priority, matrix, quadrant, impact vs effort, risk vs value | references/bubble-guide.md | Chart.js |
| causal, feedback, loop, systems thinking, reinforcing, balancing | references/causal-loop-guide.md | vis-network |
| comparison, table, ratings, stars, side-by-side, features | references/comparison-table-guide.md | Custom |
| animation, celebration, particles, confetti, effects | references/celebration-guide.md | p5.js |
| custom, simulation, physics, interactive, bouncing, movement, p5.js | references/p5-guide.md | p5.js |
Has dates/timeline/chronological events?
→ YES: timeline-guide.md
Has geographic coordinates/locations?
→ YES: map-guide.md
Mathematical function f(x) or equation?
→ YES: plotly-guide.md
Nodes and edges/network relationships?
→ YES: vis-network-guide.md (or causal-loop-guide.md if systems thinking)
Flowchart/workflow/process diagram?
→ YES: mermaid-guide.md
Sets with overlaps (2-4 categories)?
→ YES: venn-guide.md
Priority matrix/2x2 quadrant/multi-dimensional?
→ YES: bubble-guide.md
Standard chart (bar/line/pie/radar)?
→ YES: chartjs-guide.md
Comparison table with ratings/stars?
→ YES: comparison-table-guide.md
Celebration/particles/visual feedback?
→ YES: celebration-guide.md
Custom simulation/animation/physics?
→ YES: p5-guide.md
Once you identify the best generator, read the corresponding guide file from the references/ directory and follow its workflow.
Example:
timeline keyword → Load references/timeline-guide.mdEach guide contains:
If the request could match multiple generators:
references/routing-criteria.md for detailed scoring methodologyBased on your request, I recommend:
1. [Generator A] (Score: 85) - Best for [reason]
2. [Generator B] (Score: 70) - Alternative if you need [feature]
3. [Generator C] (Score: 55) - Possible if [condition]
Which would you prefer?
| Ambiguous Term | Clarification Needed |
|---|---|
| "graph" | Chart (ChartJS) or Network graph (vis-network)? |
| "diagram" | Structural (Mermaid), Network (vis-network), or Custom (p5)? |
| "map" | Geographic (Leaflet) or Concept map (vis-network)? |
| "visualization" | What type of data? What interaction needed? |
| Generator | Library | Best For |
|---|---|---|
| p5-guide | p5.js | Custom simulations, physics, animations |
| chartjs-guide | Chart.js | Bar, line, pie, doughnut, radar charts |
| timeline-guide | vis-timeline | Chronological events, history, schedules |
| map-guide | Leaflet.js | Geographic data, locations, routes |
| vis-network-guide | vis-network | Network graphs, dependencies, concept maps |
| mermaid-guide | Mermaid.js | Flowcharts, workflows, UML diagrams |
| plotly-guide | Plotly.js | Mathematical function plots |
| venn-guide | Custom | Set relationships (2-4 sets) |
| bubble-guide | Chart.js | Priority matrices, multi-dimensional data |
| causal-loop-guide | vis-network | Systems thinking, feedback loops |
| comparison-table-guide | Custom | Side-by-side comparisons with ratings |
| celebration-guide | p5.js | Particle effects, visual feedback |
All MicroSims follow these standards regardless of generator:
Directory Structure:
docs/sims/<microsim-name>/
├── main.html # Main visualization file
├── index.md # Documentation page
├── *.js or *.css # Supporting files
└── metadata.json # Dublin Core metadata (optional)
Integration:
Quality Checklist:
User: "Create a timeline showing key events in computer history"
Routing: Keywords "timeline", "events", "history" → references/timeline-guide.md
Action: Read timeline-guide.md and follow its workflow
User: "Make a bar chart comparing programming language popularity"
Routing: Keywords "bar chart", "comparing" → references/chartjs-guide.md
Action: Read chartjs-guide.md and follow its workflow
User: "Build an interactive bouncing ball simulation"
Routing: Keywords "interactive", "bouncing", "simulation" → references/p5-guide.md
Action: Read p5-guide.md and follow its workflow
User: "Create a graph of our project dependencies"
Routing: "graph" + "dependencies" suggests network → references/vis-network-guide.md
Action: Read vis-network-guide.md (but clarify if user meant a chart)
For detailed information, consult:
references/routing-criteria.md - Complete scoring methodology for all generatorsreferences/<generator>-guide.md - Specific implementation guide for each generatorassets/templates/ - Shared templates and patternsAfter creating a MicroSim, add it to the site navigation: