Microsim Generator

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

Decision Tree

Copy code
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:

1. Library-specific requirements
2. Directory structure to create
3. Step-by-step implementation workflow
4. Code templates and patterns
5. Best practices for that visualization type

Handling Ambiguous Requests

If the request could match multiple generators:

1. Read references/routing-criteria.md for detailed scoring methodology
2. Score top 3 candidates using the 0-100 scale
3. Present options to user with reasoning:

   Copy code
   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?
   

4. Proceed with user's selection

Common Ambiguities

Available Generators

Primary Generators

Shared Standards

All MicroSims follow these standards regardless of generator:

Directory Structure:

Copy code
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:

yamlCopy code
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