菜单
Create an educational MicroSim using the vis-network JavaScript library. Each MicroSim is a directory located in the /docs/sims folder. It has a main.html file that can be referenced with an iframe. The main.html file imports the main JavaScript code to run the educational MicroSim.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Load for ANY bug-fix task — code, UI/UX, content, docs, accessibility, or workflow. Reproduce → isolate → fix → prevent cycle with real-session patterns. GEPA-evolved from 353 real Claude Code session bugfixes (+31pp holdout).
Generate Canvas-ready HTML pages and assignments for BADM 350 Technology & AI Strategy course. Use when building weekly module content from markdown lesson plans, creating "Start Here" pages with Tuesday/Thursday session structure, or generating assignment HTML with rubrics. Triggers on requests to "build Canvas content", "create week X page", or "generate assignment for BADM 350".
This skill generates a structured chapter outline for intelligent textbooks by analyzing course descriptions, learning graphs, and concept dependencies. Use this skill after the learning graph has been created and before generating chapter content, to design an optimal chapter structure that respects concept dependencies and distributes content evenly across 6-20 chapters.
This skill generates comprehensive metrics reports for intelligent textbooks built with MkDocs Material, analyzing chapters, concepts, glossary terms, FAQs, quiz questions, diagrams, equations, MicroSims, word counts, and links. Use this skill when working with an intelligent textbook project that needs quantitative analysis of its content, typically after significant content development or for project status reporting. The skill creates two markdown files - book-metrics.md with overall statistics and chapter-metrics.md with per-chapter breakdowns - in the docs/learning-graph/ directory.
This skill generates interactive Chart.js bubble chart visualizations for priority matrices and multi-dimensional data analysis. Use this skill when users need to create scatter plots with variable bubble sizes, particularly for 2x2 priority matrices (Impact vs Effort, Risk vs Value, etc.), portfolio analysis, or any visualization comparing items across two dimensions with a third dimension represented by size. The skill creates a complete MicroSim package with HTML, CSS, and documentation.
This skill generates comprehensive chapter content for intelligent textbooks after the book-chapter-generator skill has created the chapter structure. Use this skill when a chapter index.md file exists with title, summary, and concept list, and detailed educational content needs to be generated at the appropriate reading level with rich non-text elements including diagrams, infographics, and MicroSims. (project, gitignored)
| name | microsim-vis-network |
| description | Create an educational MicroSim using the vis-network JavaScript library. Each MicroSim is a directory located in the /docs/sims folder. It has a main.html file that can be referenced with an iframe. The main.html file imports the main JavaScript code to run the educational MicroSim. |
This skill contains the rules for generating a Educational MicroSim using the vis.network JavaScript library. MicroSims are lightweight, interactive educational simulations designed for browser-based learning. MicroSims occupy a unique position at the intersection of
Educational MicroSims transform abstract concepts into visual interactive, manipulable experiences that enable students to learn through exploration and experimentation. Each MicroSim addresses specific learning objectives while maintaining the pedagogical rigor and technical quality necessary for educational deployment.
Before generating code, articulate the educational purpose:
Generate a self-contained, interactive vis-network.js simulation following the standardized MicroSim architecture. The program is width responsive.
Each Vis-Network MicroSim is contained in a folder within the /docs/sims directory. The folder name is $MICROSIM_NAME
/docs/sims/$MICROSIM_NAME
/docs/sims/$MICROSIM_NAME/index.md # main index markdown for each MicroSim containing the iframe and documentation
/docs/sims/$MICROSIM_NAME/main.html # main HTML5 file containing the p5.js CDN link and importing the p5.js JavaScript
/docs/sims/$MICROSIM_NAME/$MICROSIM_NAME.js # All the p5.js JavaScript
/docs/sims/$MICROSIM_NAME/metadata.json # JSON file with Dublin core metadata and description of controls