MicroSim Generator

Overview

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.

When to Use This Skill

Use this skill when users request:

• Interactive educational visualizations

• Data visualizations (charts, graphs, plots)

• Timelines or chronological displays

• Geographic/map visualizations

• Network diagrams or concept maps

• Flowcharts or workflow diagrams

• Mathematical function plots

• Set diagrams (Venn)

• Priority matrices or bubble charts

• Custom simulations or animations

• Comparison tables with ratings

Step 1: Analyze Request and Match Generator

Scan the user's request for trigger keywords and match to the appropriate generator guide.

Quick Reference Routing Table

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

Decision Tree

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

Step 2: Load the Matched Guide

Once you identify the best generator, read the corresponding guide file from the references/ directory and follow its workflow.

Example:

• User asks for "a timeline showing the history of Unix"

• Match: timeline keyword → Load references/timeline-guide.md

• Follow the timeline-guide.md workflow

Step 3: Execute Generator Workflow

Each guide contains:

• Library-specific requirements

• Directory structure to create

• Step-by-step implementation workflow

• Code templates and patterns

• Best practices for that visualization type

Handling Ambiguous Requests

If the request could match multiple generators:

• Read references/routing-criteria.md for detailed scoring methodology

• Score top 3 candidates using the 0-100 scale

• Present options to user with reasoning: Based 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?

• Proceed with user's selection

Common Ambiguities

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?

Available Generators

Primary Generators

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

Shared Standards

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:

• Embedded via iframe in MkDocs pages

• Width-responsive design

• Non-scrolling iframe container

• Standard height: drawHeight + controlHeight + 2px

Quality Checklist:

• Runs without errors in modern browsers

• Responsive to container width

• Controls respond immediately

• Educational purpose is clear

• Code is well-commented

Examples

Example 1: Timeline Request

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

Example 2: Chart Request

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

Example 3: Custom Simulation

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

Example 4: Ambiguous Request

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)

Reference Files

For detailed information, consult:

• references/routing-criteria.md

• Complete scoring methodology for all generators

• references/<generator>-guide.md

• Specific implementation guide for each generator

• assets/templates/

• Shared templates and patterns

mkdocs.yml Integration

After creating a MicroSim, add it to the site navigation:

nav:

• MicroSims:
  • List of MicroSims: sims/index.md
  • Existing Sim: sims/existing-sim/index.md
  • New MicroSim: sims/new-microsim-name/index.md # Add here