Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.
Before & after
Same prompt, same agent — the only difference is the skill.
An interactive explainer is a great way to make a financial concept feel concrete and tangible. You could build something with sliders so people can adjust interest rate and time horizon and see the compounding effect visualized in real time. That would be way more engaging than a static image or chart. I can create an HTML artifact with some state controls and animations. What's your audience — financial advisors, young investors, general public? And what's the main insight you want to communicate about compound interest?
INTERACTIVE COMPOUND INTEREST VISUALIZER ARTIFACT STRUCTURE: • Input controls: Rate slider (0-12%), Years slider (1-50), Initial investment input • Output visualization: Animated growth curve (principal + interest stacked area chart) • Real-time display: "Your $10,000 grows to $X in Y years at Z% annual return" • Comparison row: Shows "if you waited 5 years to start" (regret calculator) INTERACTION MODEL: User adjusts rate slider → curve animates and updates numbers in real time User extends time horizon → visualizes 50-year payoff to drive urgency User compares scenarios → side-by-side bars show impact of delaying 5 years EMBEDDABLE & DOWNLOADABLE: Generated HTML link shareable in proposals, blog posts, email Download as PNG for slides Mobile-responsive (works on phone) DESIGN DETAILS: • Color scheme: green for growth, gray for principal • Math: Annual compounding; simple formula with no over-explanation • Loading time: < 1 second • Edge cases: if rate is 0%, curve is flat (user understands inflation importance) USE CASE: Financial advisor shares link in prospect email: "See how starting now vs later changes your outcome." Prospect spends 2 minutes interacting, feels ownership of plan. Conversion lift: +30% vs static PDF.
About this skill
Explain an idea by letting people change it and watch what happens. The math is written down and checked, so the numbers on the page hold up.
What it does
- Finds the one insight and the controls that reveal it, with a comparison baseline
- Writes the model and its assumptions, and checks two values by hand
- Builds sliders, steppers, and toggles that update live, work with the keyboard, and respect reduced motion
- Keeps everything in one offline HTML file that fits a proposal, lesson, or docs page
What you get
The insight and interaction plan, the formula with test values, and the complete HTML file.
Best for
Consultants, educators, and marketers who want a concept to click faster than a slide or static infographic allows.
SKILL.md preview
---
name: interactive-explainer-infographic
description: Build a self-contained interactive HTML explainer that teaches one concept by letting the reader change it - sliders for continuous inputs, steppers for stages, a comparison baseline, and a model whose math is stated and checked - for proposals, lessons, sales pages, or docs. Use when the user says "explain compound interest interactively", "make an interactive infographic", "build a slider demo of how X works", "something clients can play with instead of a slide", "interactive explainer for our pricing", or "show step by step how the process works".
---
# Interactive Concept Explainer (Single HTML File)
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Evidence-Based Journey Map Builder
Map one persona's journey across every touchpoint with evidence-tagged cells, sized pain points, backstage handoffs, and ranked fixes.