Step-by-Step Interactive Visual Lessons
Build a clickable visual lesson with paced reveals, meaningful animations, Back and Next controls, and a final overview.
Before & after
Same prompt, same agent — the only difference is the skill.
I can explain backpropagation to you. It's the core algorithm behind how neural networks update their weights. I could write out a detailed explanation with some math, or I could try a text-based analogy. What's your background with calculus and linear algebra? Do you prefer visual explanations or mathematical rigor? Once I know your level, I can tailor the explanation better.
INTERACTIVE LEARNING ARTIFACT: Backpropagation Fundamentals → NAVIGATION STRUCTURE This artifact: Step-by-step reveal Next/Back buttons: Show one concept at a time Forward progression: 8 steps total Time to complete: 6-8 minutes (estimated) → STEP 1: Forward Pass Animation Visual: Diagram of single neuron with input nodes → activation → output Text: "Input values pass through weights and bias, then activation function" Interactive: Hover over weights to see their current values (animated) Next button: Advances to Step 2 → STEP 2: Loss Calculation Visual: Predicted output vs actual output, distance shown as red line Equation displayed: Loss = 0.47 (sample value) Text: "Backpropagation goal: reduce this loss to near zero" Slider to try: Drag weights manually to see loss decrease → STEP 3-5: Gradient Computation (Chain Rule) Animation: Shows gradient flowing backward through network Color code: Green gradient (direction to move), arrow pointing toward improvement Equation: Simplified chain rule ∂L/∂w shown step by step Interactive: Click equation terms to highlight corresponding parts of diagram → STEP 6-8: Weight Update & Convergence Final diagram: Updated weights (before → after) Curve: Loss plotted over 100 iterations (shows convergence) Success state: "Network learned!" when loss < 0.1 Next action: Deep-dive button → "Want to build your own backprop? Start here."
About this skill
“Teach me visually” often produces a long explanation beside a decorative diagram. This builds an actual clickable lesson: each step changes the picture, explains why it changed, and lets the learner move forward or back without losing their place.
What it does
- Breaks a concept into prerequisite-aware steps with one new idea at a time.
- Keeps objects, colors, and labels consistent so learners can follow what changes.
- Builds working Back, Next, and Restart controls with an explicit progress indicator.
- Uses animation for movement, transformation, or changing relationships, with reduced-motion support.
- Explains relevant simplifications and prevents misleading diagrams or equations.
- Ends with a complete overview, a short transfer question, and a focused next topic.
What you get
A runnable interactive artifact, or a self-contained HTML lesson when an artifact runtime is unavailable. It includes the explanation, diagrams, navigation, and a final recap in one deliverable.
Best for
Students, self-learners, tutors, and educators explaining processes, algorithms, mechanisms, and other concepts that become clearer when revealed in stages.
SKILL.md preview
---
name: step-by-step-interactive-visual-lessons
description: >-
Build interactive visual lessons using prerequisite-aware steps, persistent diagrams, causal transitions, reversible navigation, and a final overview. Deliver a runnable artifact or self-contained HTML. Use when the user says "teach me photosynthesis visually", "make an interactive lesson", "walk me through this diagram", "animate this process one step at a time", "I keep getting lost between the steps", "let me click through the explanation", or "turn these notes into something I can explore".
---
# Step-by-Step Interactive Visual Lessons
… (sign up to view the full skill)More creator skills
View all Creator skills →Course Knowledge Checks and Lead Quiz Builder
Builds course quizzes with real-mistake distractors and per-option feedback, plus lead quizzes whose scoring is tested before launch.
Online Course Outline with Outcomes and Projects
Turns a course idea or brain dump into ordered modules and result-named lessons, with checkable outcomes, checkpoints, and a cut list.
Course & Digital Product Sales Page Copy
Writes or fixes a course sales page sized to price and traffic, with outcome-based curriculum, honest offer stack, real urgency, and FAQ.
Course Launch Runway Planner
Turns your revenue goal and list size into a dated launch plan: seed content, launch event, cart emails, real deadlines.