A skill for distilling interactive technical explanations from AI generated complexity.
AI tools help us write code, design systems, and generate documentation faster than ever. They've also created a new problem: the volume of technical output now exceeds our ability to understand it.
We are drowning in cognitive debt: AI-generated modules, auto-documented APIs, and synthesized design docs pile up faster than teammates can parse, review, and reason about them.
Inspired by Distill.pub we aim to make it easier to apply distillation to the flood of technical output. We aren't just summarizing, we assist the creative work of finding the right decomposition, the right visualization, the right sequence of ideas that turns complexity into understanding.
Consider a signal, a complex waveform that's hard to interpret as a whole. Fourier analysis decomposes it into simple sine waves, each with a frequency and amplitude. Toggle individual components on and off to see how they combine.
Figure 1. A complex waveform decomposed into its frequency components. Click any bar in the frequency chart to toggle that component. The combined signal updates in real time.
You could read a paragraph explaining that low frequencies carry the signal's overall shape while high frequencies add detail. Or you could turn off the high frequencies yourself and watch the waveform smooth out. The second builds intuition that the first cannot.
Interactive media lets readers explore parameter spaces, test hypotheses, and discover relationships at their own pace. The reader becomes a participant rather than a receiver.
That said, interaction needs to earn its place. A slider that doesn't build intuition is worse than a well-written sentence. Moonshine tries to follow one principle: every interaction should serve understanding.
Moonshine is a skill for AI coding assistants. When invoked, it guides you through a structured process, starting with questions before writing any code.
What concept are you explaining? Who is the audience? What is the key insight? What does the reader need to learn first, second, third to arrive there?
For each concept, choose the right medium: static prose, explorable sliders, linked visualizations, scroll-driven narrative, or animated transitions. Only add interaction where it genuinely helps.
Scaffold a structured Vite + React project with markdown prose and live in-page editing (still), or a single self-contained HTML file with no build tools (shine). Both come with D3 visualizations, article typography, and shared state for linked views.
Start with prose and static figures. Add interaction one layer at a time. Test every element: does this help the reader build a mental model they couldn't get from text alone?
Articles built with moonshine. Most are single self-contained HTML files (the shine flavor); Conductor, the still guide, and the curriculum map use still, with React figures and markdown prose. The guide and curriculum map include their complete source projects. See syntagmatic's collection for many more examples across different domains.
A self-demonstrating guide to still's authoring loop: edit prose where it renders, tune figures, reorder blocks, arrange diagrams, and route comments back to the agent.
1,590 school topics arranged by semantic similarity instead of timetable order, with subject continents, age cohorts, and prerequisite paths revealed through three linked views.
A series on fluid simulation. Particles estimate density and exert forces on neighbors, then move to the GPU with WebGPU for real-time interaction.
A field guide to methods that turn high-dimensional data into something you can look at, organized by the structure each family protects: variance, distances, neighborhoods, topology, density.
Finding neighbors in high-dimensional vector spaces. From the curse of dimensionality through partitioning, compression, and hardware-aware index design.
A workbench for studying latent spaces. From embedding text into vectors, to projecting with UMAP, to finding structure with clustering, to decomposing with sparse autoencoders.
An interactive reading of “Learning to Orchestrate Agents in Natural Language with the Conductor”: a small language model that coordinates other language models for improved performance.
# Add the marketplace and install /plugin marketplace add enjalot/moonshine /plugin install moonshine@moonshine-marketplace # Then start a new explanation /moonshine:still how gradient descent finds minima # structured project (Codex: $still) /moonshine:shine how gradient descent finds minima # single HTML file (Codex: $shine)
Moonshine asks what you're explaining and who the audience is before writing any code. still scaffolds a Vite + React project where the prose stays in markdown and the rendered page is the editing surface: edit blocks in place, tune figure parameters with a knob panel, reorder sections by dragging, and send comments straight back to the authoring agent. shine produces a single self-contained HTML file with D3 — no build tools, open it in a browser and it works. Manual install and development setup are covered in the repo README.
Distill.pub articulated why distillation matters in their essay Research Debt, and published some of the best examples of what interactive explanations can be. Mike Bostock created D3.js and wrote a series of interactive articles that showed how visualization and narrative can work together. Bret Victor imagined explorable explanations. Nicky Case, Setosa, and The Pudding proved the format works across a range of subjects. The Visaul Explainer skill showed the potential for agents making visual artifacts. Moonshine tries to make it practical to build interactive explanations with AI assistance.