microsim-iframe-tester
MicroSim Iframe Height Tester
Purpose
MicroSims are embedded in MkDocs pages via <iframe> tags with fixed heights and scrolling="no". If the iframe height is too short, controls at the bottom (sliders, buttons, dropdowns) get clipped and students can't interact with them. This skill automates checking that every MicroSim's controls are fully visible at the declared iframe height.
How It Works
Always use the Python script (scripts/test-iframe-heights.py) — it only requires pip install playwright and avoids any Node.js/npm dependency. A legacy Node.js version (scripts/test-iframe-heights.js) exists but should not be used. The script uses Playwright to:
- Find all MicroSim directories under
docs/sims/ - Read each
index.mdto extract the declared iframe height - Load
main.htmlin a browser viewport constrained to that height - Wait for p5.js (or other libraries) to finish rendering controls
- Find all interactive elements (buttons, sliders, selects, inputs, checkboxes)
- Check whether each element's bounding box fits within the iframe height
- Measure the actual content height needed
- Report pass/fail with recommended height for failures
More from dmccreary/claude-skills
readme-generator
This skill creates or updates a README.md file in the GitHub home directory of the current project. The README.md file it generates will conform to GitHub best practices, including badges, project overview, site metrics, getting started instructions, and comprehensive documentation.
189quiz-generator
This skill generates interactive multiple-choice quizzes for each chapter of an intelligent textbook, with questions aligned to specific concepts from the learning graph and distributed across Bloom's Taxonomy cognitive levels to assess student understanding effectively. Uses serial execution (one agent) for token efficiency. Use this skill after chapter content has been written and the learning graph exists.
84story-generator
This skill generates graphic novel narratives about scientists, mathematicians, engineers, inventors, and other historical figures in science and technology, designed for intelligent textbooks. It creates compelling, historically accurate 12-panel stories with embedded image prompts and can also generate the panel images automatically via the Google Gemini API. Use this skill when the user wants to add a new historical-figure story to a textbook's Stories section, or when creating educational graphic novel content. Also use this skill when the user says "give me some ideas for graphic-novel stories" to generate a curated list of story ideas tailored to the textbook's subject matter.
51learning-graph-generator
Generates a comprehensive learning graph from a course description, including 200 concepts with dependencies, taxonomy categorization, and quality validation reports. Use this when the user wants to create a structured knowledge graph for educational content.
44faq-generator
This skill generates a comprehensive set of Frequently Asked Questions (FAQs) from the course description, course content, learning graphs, concept lists, MicroSims, and glossary terms to help students understand common questions and prepare content for chatbot integration. Use this skill after course description, learning graph, glossary, and at least 30% of chapter content exist.
43chapter-content-generator
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)
39