What problem does it solve? Explaining data structures and algorithms with static text alone leaves learners unable to follow execution steps; this Skill produces self-contained interactive HTML teaching pages with SVG diagrams and step-by-step animations so readers can see how algorithms actually run. ## Core Features & Use Cases - Interactive Step-by-Step Animations: Builds dual-view animations (array + complete binary tree, custom-coordinate trees, or plain arrays) with prev/next controls, dot indicators, and code-line highlighting synchronized to each step. - Multiple Input Scenarios: Converts PDF/textbook material into structured explanation pages, turns a topic like "demonstrate quicksort" into a teaching page, visualizes provided code execution, or compares two concepts side by side. - Built-in Skeletons and Templates: Ships a CSS skeleton with dark mode, three JS animation templates, three HTML animation structures, and a complete heap overview reference implementation for alignment. - Use Case: A student uploads a textbook PDF chapter on heaps and receives a single HTML file with narrative explanations, static SVG diagrams, and interactive push/pop/heapify/heap-sort animations linked to highlighted code lines. ## Quick Start Ask Claude to generate an interactive animated teaching page that visualizes how quicksort partitions an array step by step.
