skills.rest
JonnyCBB
JonnyCBBCOMMUNITY
Explore all skills by this author →
GitHub

teach-me

Generate self-contained HTML scrollytelling explainers with GSAP animations and prerequisite chains.

1|Updated Dec 17, 2025
Search Tags:#education#animation#GSAP#Manim#scrollytelling#teach-me#interactive-explainer
One-click install
npx skills add https://github.com/JonnyCBB/claude-code-config --skill teach-me
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: teach-me
Source: https://github.com/JonnyCBB/claude-code-config/tree/main/plugins/jiffy-toolkit/skills/teach-me
Command: npx skills add https://github.com/JonnyCBB/claude-code-config --skill teach-me

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, manim, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Generates interactive scrollytelling explainers for any concept, enabling rapid creation of guided, visually rich lessons that adapt to the learner's pace.

Core Features & Use Cases

  • Prerequisite reasoning workflow: maps a concept to foundational concepts and builds a learning ladder.
  • GSAP-driven animations with optional Manim renders: delivers engaging, scroll-driven visuals for explanations; supports math content via Manim when needed.
  • Self-contained HTML output with theming: outputs a complete HTML file at a predictable path (~/.claude/teach-me/[slug]/index.html) and supports style presets for consistent branding.
  • On-demand resources: houses optional scripts, references, and assets to load as directed by the entry point.
  • Use cases: educational explainers for complex topics, onboarding tutorials, and interactive product demos.

Quick Start

Provide a concept name and run to generate a self-contained HTML explainer at ~/.claude/teach-me/[slug]/index.html.

Frequently Asked Questions about teach-me

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create interactive scrollytelling explainers for complex concepts?▼

Interactive scrollytelling explainers are generated by mapping prerequisite concepts into a learning ladder, then combining GSAP animations and optional Manim renders into a self-contained HTML file with progressive visual storytelling.

What is prerequisite reasoning and how does it work for educational explainers?▼

Prerequisite reasoning maps a target concept to its foundational concepts, building a progressive learning ladder that structures the explainer's narrative flow and adapts to the learner's pace for improved comprehension.

Can I use Manim for math content animations in a scroll-driven HTML explainer?▼

Yes, Manim renders can be integrated for math content within the scroll-driven HTML explainer, supplementing the default GSAP-based animations to deliver precise mathematical visuals during the scrollytelling experience.

Does generating these interactive explainers require Playwright or Manim dependencies?▼

Playwright and Manim are listed as dependencies, where Manim provides optional math content rendering capabilities and Playwright supports the generation and rendering workflow for the output HTML file.

What's the best way to build onboarding tutorials with GSAP-driven scroll animations?▼

GSAP-driven scroll animations are applied to onboarding tutorials by generating a self-contained HTML file at a predictable path, utilizing built-in style presets and progressive disclosure to guide users through product features.

Where is the output HTML file saved when generating an interactive explainer?▼

The self-contained HTML explainer file is written to a predictable local path at ~/.claude/teach-me/[slug]/index.html, bundling all GSAP animations, prerequisite chains, and style presets together.

Related Skills

Explore More Education & Research Skills→
zeronx798zeronx798

manim-video

Automate mathematical animation production with Manim Community Edition.

Community
Advanced
LeckyHuangLeckyHuang

cloud-design

Create standalone HTML/CSS/JS visual deliverables without a build step.

Community
Advanced
blueif16blueif16

website-replicator

Replicate website UI and scroll animations into GSAP, CSS, or Framer Motion code.

Community
Advanced
shuff57shuff57

manim-skill

Generate mathematical animations with Manim Community Edition and ffmpeg.

Community
Advanced