explainer-visuals_skill

Overview

This skill creates high-quality animated, interactive explainer visuals tailored for essays and blog posts. It outputs a single self-contained HTML/CSS/JS file that embeds directly into web content or an iframe and respects accessibility and reduced-motion preferences. Use it to make abstract ideas, processes, and data instantly understandable through motion and interaction.

How this skill works

I first run a short discovery to capture the single most important insight, audience level, and placement in your essay. Then I select a visual format (morph, flow, force graph, waffle, etc.) and produce a responsive, keyboard-accessible HTML file with inline CSS and JavaScript. The output includes a static readable state, interactive controls, reduced-motion support, and a hidden caption for screen readers.

When to use it

• You want to visualize a single key insight or reveal over time
• Complex processes, algorithms, or system flows that benefit from stepwise explanation
• Data trends, comparisons, or distributions that need tangible representation
• Abstract mental models or frameworks that gain clarity through metaphor and motion
• When embedding a self-contained visual into an article or blog without extra build steps

Best practices

• Start simple: show the core idea at rest before adding layers of interaction
• Choose the simplest tech that solves the problem (CSS → Vanilla JS → D3/GSAP)
• Design motion with semantics: movement should explain relationships, not distract
• Always include role="img", a hidden text alternative, keyboard support, and prefers-reduced-motion handling
• Optimize for mobile touch and keep file size reasonable; comment code for future edits

Example use cases

• Animate a step-by-step algorithm with a scrubber and annotations for an instructional post
• Show a comparison of two business models with synchronized side-by-side animation
• Visualize a mental model using a metaphor-based diagram that reveals layers on click
• Create a unit/waffle chart that builds to show proportions across categories
• Produce a force-directed graph to reveal relationships in social or technical networks