skilld
All skills
dmccreary avatar

/microsim-generator

@ed7c050
by Dan McCrearydmccreary/claude-skills104 stars
16

Creates interactive educational MicroSims, routing to the best-matched generator - p5.js, Chart.js, Plotly, Mermaid, vis-network, timelines, maps, Venn, causal-loop/feedback-loop diagrams (CLD), concept-classifier sorting quizzes, infographic overlays with callout labels, Docker Python labs (runnable code blocks), and fact-verified statistics posters (every numeric claim checked against a cited source before rendering). Generates complete MicroSim packages with HTML, JavaScript, CSS, documentation, and metadata.

Ask your Agent

Use this Skill: https://skilld.dev/gh/dmccreary/claude-skills/microsim-generator

This session only. Nothing lands on disk.

assetstemplatesplotlyindex-template.md

≈530 tokens on demand. Your agent reads this file only when SKILL.md points to it.

{{TITLE}}

<iframe src="main.html" height="500px" width="100%" scrolling="no"></iframe>

View {{TITLE}} Fullscreen{ .md-button .md-button--primary }

Embed This Visualization

Place the following line in your website to include this visualization:

<iframe src="https://dmccreary.github.io/{{REPO_NAME}}/sims/{{MICROSIM_NAME}}/main.html" height="500px" width="100%" scrolling="no"></iframe>

Overview

{{OVERVIEW}}

How to Use

This interactive plot allows you to explore {{FUNCTION_DESCRIPTION}}:

  1. Drag the slider to move the point along the curve
  2. Hover over the curve to see exact x,y values at any point
  3. Use the toolbar to zoom, pan, or download the plot as an image

Mathematical Background

{{MATHEMATICAL_BACKGROUND}}

Key Concepts

{{KEY_CONCEPTS}}

Lesson Plan

Learning Objectives

After using this visualization, students will be able to:

{{LEARNING_OBJECTIVES}}

Discussion Questions

{{DISCUSSION_QUESTIONS}}

Activities

  1. Explore the Function: Move the slider from minimum to maximum. What patterns do you observe?
  2. Find Key Points: Identify where the function crosses zero, reaches its maximum, and reaches its minimum.
  3. Make Predictions: Before moving the slider, predict what the y-value will be for a given x-value.

Technical Notes

This MicroSim uses:

  • Plotly.js 2.27.0: A high-level JavaScript charting library built on D3.js and stack.gl
  • Plotly provides built-in interactivity including zoom, pan, hover tooltips, and image export

Plotly Features Used

  • Plotly.newPlot(): Creates the initial visualization
  • Plotly.restyle(): Efficiently updates trace data without full re-render
  • Plotly.Plots.resize(): Handles responsive resizing
  • Mode bar with zoom, pan, and download tools

References

{{REFERENCES}}

Source: SKILL.md on GitHub

Third-party checks

2 warnings14d4 checks · Risk SAFE
  • Gen Agent Trust Hub14d

    The skill is a productivity tool for generating interactive educational MicroSims. It requires the execution of multiple local scripts and the installation of the Playwright automation framework and Chromium binaries. It also provides features for running Python code locally via Docker. These capabilities represent legitimate developer workflows but involve security surfaces like external binary installation and dynamic code execution.

  • Socket14d

    1 alert: gptAnomaly

  • Snyk14d

    Risk: LOW · No issues

  • Runlayer6mo

    9/59 files flagged

Provenance

Signed by skilld at ed7c050. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub yesterday.

Activeupdated 4 weeks ago

Capability

metadata
{
  "ibook.version": "1.0",
  "ibook.preferred-model": "opus"
}

README badge

README badge for dmccreary/claude-skills/microsim-generator