What problem does it solve? Designing interactive HTML explainers that teach fluid mechanics concepts, fit any screen without scrolling, and stay numerically consistent with the chapter's Python code is hard to do by hand. This Skill encodes the complete design contract, the Viz.app JavaScript API, layout rules, and the lint/screenshot audit loop so every explainer meets the same quality bar. ## Core Features & Use Cases - Explainer contract and quality bar: 4–5 explainers per chapter, required tabs (Walkthrough, Explore, Explain, Derivation, Equations, Code, Check yourself), no-scroll fit at eight viewport sizes, and depth features like linked views, transport, presets, and inspectors. - Viz.app API reference: full documentation of the assets/viz_lib.js library covering linked views, plotting, field tools, particles, 3-D via three.js, live Explain and Derivation tabs, and synced Python code panels. - Build and audit loop: create files with tools/new_viz.py, validate with tools/viz_lint.py and tools/shot.py screenshots, then embed into notebooks, Colab, and the published web page via show_viz and the publish tool. - Use Case: When adding a new explainer for a chapter on gravity waves, load this Skill to storyboard the views, implement the Viz.app configuration with a dispersion-relation derivation, and iterate through the lint/shot audit until it passes at all sizes. ## Quick Start Load the interactive-viz skill and help me storyboard and build a new chapter 7 explainer on wave dispersion that passes the lint and screenshot audits.
