microsim-p5
Educational MicroSim Creation Skill for P5.js
Overview
This skill guides the creation of Educational MicroSims using the p5.js JavaScript library. MicroSims are lightweight, interactive educational simulations designed for browser-based learning. MicroSims occupy a unique position at the intersection of Simplicity (focused scope, transparent code), Accessibility (browser-native, universal embedding), and AI Generation (standardized patterns, prompt-compatible design).
Standard Context
This MicroSim Skill is designed to create all the required files for running your MicroSim on your website.
This microsim skill has been designed to be run within Claude code.
The best practice is to startup Claude Code from the command line
where you at the root of the GitHub checkout directory. This is
one level down from where you ran GitClone. This directory should
contain a .git directory.
If you don't see a .git directory and a mkdocs.yml file warn the
user that the automatic installation process may fail.
We assume that the website has a folder called docs/sims that each MicroSim will be placed in. If you do not see this folder then warn the user.
More from vishalsachdev/claude-skills
chartjs-generator
This skill generates interactive Chart.js visualizations for use in iframes using any chart type supported by the library (line, bar, pie, doughnut, radar, polar area, bubble, scatter). Use this skill when users need to create data visualizations for educational content, reports, or dashboards. The skill creates complete MicroSim packages with HTML, CSS, and documentation.
43infographic-generator-p5
This skill generates an interactive infographic visualization using p5.js that read vis-network compatible JSON data. Use this skill when creating educational infographics with nodes, edges, and hover interactions where users can explore relationships between concepts. Each infographic displays shapes with labels, shows tooltips on hover, and displays detailed descriptions in a control panel below the drawing area. The nodes are placed in absolute coordinates. The output is not a responsive design.
18secure-nextjs-api-routes
A comprehensive security middleware system for Next.js 13+ App Router API routes that provides authentication, rate limiting, CSRF protection, audit logging, and security headers in a composable, production-ready pattern. Use when building secure Next.js APIs that need protection against common web vulnerabilities.
13map-generator
This skill generates interactive maps using the Leaflet JavaScript library. Use this skill when users need to create geographic visualizations, location-based data displays, or interactive maps for educational textbooks. The skill creates complete MicroSim packages with HTML, CSS, and documentation, optimized for iframe embedding in narrow MkDocs pages with navbar and TOC.
10mermaid-generator
This skill generates interactive workflow diagrams using the Mermaid JavaScript library for placement in a narrow region of a textbook using an iframe. Use this skill when users request creating flowcharts, process diagrams, workflow visualizations, or decision trees for educational textbooks. The skill creates MicroSim packages with standalone HTML files featuring colorful backgrounds, 16-point fonts, and top-down rendering by default, saved to /docs/sims/ following the MicroSim pattern.
8install-skill-tracker
This skill installs a complete Claude Code skill tracking system using hooks to automatically log skill usage, execution duration, token usage, and user prompts for later analysis. Use this skill when setting up activity tracking in a Claude Code project to identify patterns, monitor costs, and discover opportunities for new skills.
7